vscode保存代码时自动ESLint格式化（支持vue）

admin管理员组

文章数量:1530366

一、问题描述

在开发项目的时候，往往我们会配置ESLint的代码规范。而我们在实际开发过程中，每次出现代码格式问题都去手动修改是非常麻烦的（比如双引号改成单引号；缩进问题；句尾分号、逗号等），而通过配置vscode在保存时去自动修改这些简单的代码规格是非常必要也非常方便的！

二、项目配置方案

2.1 安装eslint插件

2.2 修改用户配置

ctrl + shift + p => 首选项：打开工作区设置
在打开的配置文件中添加以下内容：

{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

解释：
eslint.autoFixOnSave：用来进行保存时自动格式化，但是默认只支持 javascript .js 文件；
eslint.validate 用来配置作用的文件类型`

2.3 缺点

该种方式是针对项目级配置，每次新建项目都需要重新配置一下！
配置成功后再项目目录下会产生 => .vscode / settings.json 文件
一个文件中有多处修改时，保存一次可能不会将全部修改全部自动化修改，这时我们手动多保存几次即可！！！

三、vscode全局配置方案

1. 文件 => 首选项 => 设置：搜索setting

2. 在打开的 vscode 配置文件settings.json中，添加以下ESLint相关配置

// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
//  #去掉代码结尾的分号
"prettier.semi": false,
//  #让函数(名)和后面的括号之间加个空格
// "javascript.format.insertSpaceBeforeFunctionParenthesis": true,


"files.autoSave": "afterDelay",
"javascript.referencesCodeLens.enabled": true,
"git.enabled": true,
"[typescript]": {
  "editor.defaultFormatter": "vscode.typescript-language-features"
},
"[less]": {
  "editor.defaultFormatter": "HookyQR.beautify"
},
"tslint.jsEnable": true,
// "workbench.colorTheme": "Monokai Dimmed",
"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"typescript.updateImportsOnFileMove.enabled": "always",
"explorer.confirmDragAndDrop": false,
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
  "editor.defaultFormatter": "HookyQR.beautify"
},
"[json]": {
  "editor.defaultFormatter": "HookyQR.beautify"
},
"npm.enableScriptExplorer": true,
"editor.tabCompletion": "on",
"prettier.singleQuote": true,
"prettier.tabWidth": 2,
"prettier.printWidth": 1000,
"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
    "tabWidth": 2,
    "wrap_attributes": "auto",
    "wrap-line-length": 1000,
  },
  "prettier": {
    "semi": true,
    "singleQuote": true
  },
  "prettyhtml": {
    "printWidth": 1000,
    "singleQuote": false,
    "wrapAttributes": false,
    "sortAttributes": false
  }
},
"vetur.format.options.useTabs": false,
"vetur.format.options.tabSize": 2,
"vetur.format.scriptInitialIndent": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 按照什么规范去格式化js, prettier/prettier-eslint 会在句末自动添加分号，但遇到then,catch等链式调用时会自动换行
// "vetur.format.defaultFormatter.js": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",   // none/prettier/prettier-eslint/vscode-typescript
"vetur.format.defaultFormatter.less": "prettier",
"css.lint.duplicateProperties": "warning",
"emmet.triggerExpansionOnTab": false,
"vetur.format.styleInitialIndent": true,
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.sass": "sass-formatter",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.ts": "prettier",
"files.associations": {
  "*.cjson": "jsonc",
  "*.wxss": "css",
  "*.wxs": "javascript",
  "*.vue": "vue",
  "*.nvue": "vue"
},
"emmet.includeLanguages": {
  "wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"vetur.validation.template": false,
"task.slowProviderWarning": [
  "typescript"
],
"[vue]": {
  "editor.defaultFormatter": "octref.vetur"
},
"[css]": {
  "editor.defaultFormatter": "HookyQR.beautify"
},
"[scss]": {
  "editor.defaultFormatter": "HookyQR.beautify"
},
"editor.rulers": [],
"terminal.integrated.automationProfile.windows": null,
"window.zoomLevel": 1,
"editor.renderWhitespace": "all",
"editor.autoIndent": "advanced",
"explorer.confirmDelete": false,
"html.format.wrapAttributes": "aligned-multiple",
"editor.semanticTokenColorCustomizations": {},
"http.proxyAuthorization": null,
"editor.detectIndentation": false,
"editor.tabSize": 2,
"[yaml]": {
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.autoIndent": "advanced"
},
"tabnine.experimentalAutoImports": true,

3. 优缺点

优点：可作用于任何项目，不要单独配置
缺点：配置较为笼统，多为常规配置，如果想要严格使用ESLint规范代码，最好还是在项目中集成 eslint 并配置 .eslintrc.js

四、其他使用技巧

1. 忽略部分ESLint校验

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

----------------------------------- 分割线 -------------------------------------
您可以使用特殊注释来禁用（忽略）某些警告。  
使用  // eslint-disable-next-line 忽略下一行的ESLint校验  
使用 /* eslint-disable */ 忽略文件中的所有ESLint校验。  

2. 打开浏览器的错误提示蒙层

方法：在vue.config.js配置eslint-loader相关。

chainWebpack: config => {
    // ESLint 强制校验，开启后如果ESLint校验不通过，则运行不起来。错误也将显示在浏览器页面上
    config.module
      .rule('eslint')
      .include.add(path.resolve(__dirname, './src')).end()
      .exclude.add(path.resolve(__dirname, './src/assets')).end()
      .exclude.add(path.resolve(__dirname, './src/styles')).end()
      .exclude.add(path.resolve(__dirname, './dist')).end()
      .use('eslint')
      .loader('eslint-loader')
      .tap(options => options);
  },

 
 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

本文标签： 代码VSCodevueeslint