Visual Studio Code实时eslint检测，保存自动修复配置

背景

由于当前公司团队在工程化和项目的一些标准流程还相差甚远，在老大的分享和推进下，逐渐的完善一些团队协作规范。意在提高效率、高质量的代码输出。保证最终产品的稳定行。
由于项目框架内使用了ESLint代码静态检测，为了在开发时发现一些代码格式的问题，所以有了接下来这个VS Code配置来实现实时eslint检测，保存时自动修复配置。

Visual Studio Code 安装插件

vscode.png
快捷键 Ctrl + Shift + P 搜索Settings（JSON）文件并打开

settings.png

直接使用以下配置,也可以在已有配置后面添加以下配置

{
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "[javascript]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    // eslint 配置项
    "eslint.enable": true, // 启用ESLint
    "eslint.run": "onType", // 运行linter的时间。 onSave/onType: 保存后/输入时
    "eslint.lintTask.enable": true, // 扩展是否为整个工作区文件夹提供lint任务。
    "eslint.quiet": true, // 忽略警告
    // 应激活ESLint扩展名并尝试验证文件的语言标识符数组
    "eslint.probe": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "html",
        "vue",
        "markdown"
    ],
    // 控制编辑器是否自动格式化粘贴的内容。格式化程序必须可用，并且能针对文档中的某一范围进行格式化。
    "editor.formatOnPaste": true,
    // 在保存时格式化文件。格式化程序必须可用，延迟后文件不能保存，并且编辑器不能关闭。
    "editor.formatOnSave": false,
    // 控制在保存时设置格式是设置整个文件格式还是仅设置修改内容的格式。仅当 "#editor.formatOnSave#" 为 "true" 时应用。
    //  - file: 设置整个文件的格式。
    //  - modifications: 格式修改(需要源代码管理)。
    "editor.formatOnSaveMode": "file",
    // 控制编辑器在键入一行后是否自动格式化该行。
    "editor.formatOnType": false,
    // 指定如何计算ESLint使用的工作目录
    "eslint.workingDirectories": [
        {
            "mode": "auto"
        }
    ],
    "eslint.codeAction.disableRuleComment": {
        "enable": true, // 在快速修复菜单中显示禁用lint规则。默认情况下为true。
        "location": "separateLine" // 选择在separateLine 或 sameLine上添加eslint disable注释。默认为separateLine
    },
    // 在保存时运行的代码操作类型。
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // 控制在保存时运行代码操作时修复哪些问题
    //  all : 通过重新验证文件内容修复所有可能的问题。这将执行与在终端中使用--fix选项运行eslint相同的代码路径，因此可能需要一些时间。这是默认值。
    // problems : 仅修复当前已知的可修复问题，只要它们的文本编辑不重叠即可。此模式要快得多，但很可能只能解决部分问题。
    "eslint.codeActionsOnSave.mode": "all",
    "eslint.format.enable": true, // 使用ESlint作为由ESlint验证的文件的格式化程序
    // 用于配置如何使用ESLint CLI引擎API启动ESLint的选项。默认为空选项包。指向自定义.eslintrc.json文件的示例如下：
    // "eslint.options": {
    //  "configFile": "C:/mydirectory/.eslintrc.json" 
    // }
}