vscode：如何在保存less文件时，自动生成对应的css文件，并指定css文件的保存路径

Posted 2023-05-25 一直闭眼看世界

一、下载安装Easy LESS
首先利用vscode的插件功能搜索并下载安装Easy LESS

点击Install，安装自动生成css文件的插件Easy LESS

二、指定css文件保存路径
点击设置——》扩展设置
点击在setting.json中编辑
方法有两种：
两种方法都是修改如下部分

（一）：相对路径法
如下我设置的路径可以理解为，less文件的上两层的目录下创建一个css文件夹，然后把less文件生成的css文件存在css这个文件夹中。

如上设置，保存style.less文件后，会生成的文件目录结构如下所示，其中style.css为style.less生成的对应css文件

（二）：绝对路径法
$workspaceRoot代表根目录
下图表示设置的文件保存路径为：根目录\\exercise文件夹\\css文件夹下
生成的文件目录结构：

自动保存js文件时如何禁用vscode自动格式在EOF添加换行符？

【中文标题】自动保存js文件时如何禁用vscode自动格式在EOF添加换行符？

【英文标题】：How to disable vscode auto format adding newline at EOF when auto save js files?

【发布时间】：2019-09-17 16:00:12

【问题描述】：

我正在使用 vscode 并启用自动格式化配置以在保存文件时格式化文件。 但是我最近发现vscode编辑器总是在每个js文件的EOF处添加一个换行符，那么如何禁用它呢？

我特地添加了配置"files.insertFinalNewline": false,，但还是不行。

vscode 信息：

Version: 1.33.1 (system setup)
Commit: 51b0b28134d51361cf996d2f0a1c698247aeabd8
Date: 2019-04-11T08:27:14.102Z
Electron: 3.1.6
Chrome: 66.0.3359.181
Node.js: 10.2.0
V8: 6.6.346.32
OS: Windows_NT x64 6.1.7601

vscode config.json

    "workbench.colorTheme": "Monokai",
    "editor.fontSize": 16,
    "editor.formatOnPaste": true,
    // Format a file on save.
    // A formatter must be available,
    // the file must not be auto-saved,
    // and editor must not be shutting down.
    "editor.formatOnSave": true,
    "debug.console.fontSize": 16,
    "terminal.integrated.fontSize": 14,
    "markdown.preview.fontSize": 14,
    "window.zoomLevel": 1,
    "editor.renderWhitespace": "all",
    "window.title": "$dirty$activeEditorLong$separator$rootName$separator$appName",
    "search.exclude": 
        "**/.gitignore": true,
        "**/.idea": true,
        "**/.vscode": true,
        "**/build": true,
        "**/dist": true,
        "**/tmp": true,
        "**/yarn.lock": true
    ,
    "workbench.iconTheme": "material-icon-theme",
    "editor.wordWrapColumn": 110,
    "http.proxyStrictSSL": false,
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": false,
    "files.trimFinalNewlines": false,
    "html.format.endWithNewline": false,
    "javascript.implicitProjectConfig.experimentalDecorators": true,
    // Enable/disable default JavaScript formatter (For Prettier)
    "javascript.format.enable": false,
    // Use 'prettier-eslint' instead of 'prettier'.
    // Other settings will only be fallbacks
    // in case they could not be inferred from eslint rules.
    "prettier.eslintIntegration": true,
    "prettier.tabWidth": 4,
    "prettier.singleQuote": true,
    "prettier.arrowParens": "always"

.eslintrc.json

    "extends": "airbnb",
    "plugins": [
        "react",
        "jsx-a11y",
        "import",
        "react-hooks"
    ],
    "parserOptions": 
        "sourceType": "module",
        "ecmaFeatures": 
            "legacyDecorators": true,
            "experimentalObjectRestSpread": true
        
    ,
    "env": 
        "browser": true,
        "es6": true
    ,
    "parser": "babel-eslint",
    "globals": 
        "describe": true,
        "it": true,
        "inject": true,
        "beforeEach": true,
        "addProviders": true,
        "spyOn": true,
        "expect": true,
        "global": true,
        "require": true,
        "async": true,
        "ENVIRONMENT": true,
        "client": true
    ,
    "rules": 
        "linebreak-style": 0,
        "quotes": [2, "single", 
            "avoidEscape": true,
            "allowTemplateLiterals": true
        ],
        "indent": [2, 4, 
            "SwitchCase": 1,
            "VariableDeclarator": 1
        ],
        "react/jsx-indent": [2, 4],
        "comma-dangle": ["error", "never"],
        "class-methods-use-this": 0,
        "import/newline-after-import": 0,
        "space-before-function-paren": ["error", "never"],
        "func-names": ["error", "never"],
        "consistent-return": [0],
        "eol-last": ["error", "never"],
        "no-script-url": ["off"],
        "react/jsx-indent-props": [2, 4],
        "react/forbid-prop-types": [2, 
            "forbid": []
        ],
        "jsx-a11y/anchor-is-valid": ["error", 
            "components": ["Link"],
            "specialLink": ["to"],
            "aspects": ["noHref"]
        ],
        "jsx-a11y/href-no-hash": "off",
        "jsx-a11y/no-static-element-interactions": "off",
        "jsx-a11y/click-events-have-key-events": "off",
        "import/no-unresolved": [
            "error",
            
                "ignore": ["client/"]
            
        ],
        "import/no-extraneous-dependencies": [
            "error",
            
                "devDependencies": true
            
        ],
        "import/extensions": 0,
        "max-len": [
            0, 110, 4
        ],
        "react/jsx-filename-extension": [
            1,
            
                "extensions": [
                    ".js",
                    ".jsx"
                ]
            
        ],
        "react-hooks/rules-of-hooks": "error"
    ,
    "settings": 
        "import/resolver": 
            "node": 
                "extensions": [".js", ".jsx", ".json", ".css"]
            
        
    

那么，如何正确配置 vscode？​​p>

【问题讨论】：

看起来你正在使用 Prettier 作为你的格式化程序，所以 Prettier 可能有这个选项？

如果您使用的是 prettier，那么他们似乎认为由于 prettier 是固执己见的，它决定它总是在 EOF 处添加换行符，而不管您可能有与此相矛盾的任何其他设置。

【参考方案1】：

我遇到了同样的问题。要修复它，您需要位于项目的文件夹中。然后打开你的设置，即 command + shift + p，输入设置，选择首选项：打开设置 UI，在文本编辑器选项卡下，选择文件，你会发现 Eol 选项卡可以从 \n、\n、自动中进行选择。我选择自动，因此它将覆盖您指定的任何内容。

【讨论】：

我这样做了，但是没有用，无论我做什么都会添加新行