在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码

ESLint ：代码检查+代码格式化工具。

Prettier：代码格式化工具。

下面详细介绍如何配置ESLint+Prettier在VSCode中开发Vue代码：

一、安装
1、安装 eslint 以及 prettier

npm i eslint prettier -D

2、安装eslint-plugin-prettier插件

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

3、在 VSCode中插件安装中搜索 ESLint、Prettier – Code formatter、Vetur(因为Prettier不能格式化vue文件的template，所以使用Vetur)、这三个插件并安装。

二、配置

可以在工程根木下执行命令 eslint –init 生成.eslintrc.js文件，当然也可以手动创建该文件，一共有四个文件：

.eslintignore：忽略代码检查的配置文件

.eslintrc.js：代码检查规则的配置文件

.prettierignore：忽略代码格式化的配置文件

.prettierrc：代码格式化的配置文件

1、.eslintignore配置文件如下：

/dist
/src-bex/www
/src-capacitor
/src-cordova
/.quasar
/node_modules

2. .eslintrc.js配置文件如下：

module.exports = {
  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
  // This option interrupts the configuration hierarchy at this file
  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
  root: true,

  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
  },

  env: {
    browser: true,
  },

  // Rules order is important, please avoid shuffling them
  extends: [
    // Base ESLint recommended rules
    // 'eslint:recommended',

    // Uncomment any of the lines below to choose desired strictness,
    // but leave only one uncommented!
    // See https://eslint.vuejs.org/rules/#available-rules
    'plugin:vue/essential', // Priority A: Essential (Error Prevention)
    // 'plugin:vue/strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
    // 'plugin:vue/recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)

    // https://github.com/prettier/eslint-config-prettier#installation
    // usage with Prettier, provided by 'eslint-config-prettier'.
    'plugin:prettier/recommended',
    // "prettier",

    // "prettier/vue"
  ],

  plugins: [
    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
    // required to lint *.vue files
    'vue',
    'prettier',

    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
    // Prettier has not been included as plugin to avoid performance impact
    // add it as an extension for your IDE
  ],

  globals: {
    ga: true, // Google Analytics
    cordova: true,
    __statics: true,
    process: true,
    Capacitor: true,
    chrome: true,
  },

  // add your custom rules here
  rules: {
    'prefer-promise-reject-errors': 'off',
    'prettier/prettier': 'error',

    // allow debugger during development only
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
};

3. .prettierignore配置文件如下：

**/*.svg

node_modules/

package.json

lib/

es/

# dist/

_site/

coverage/

CNAME

LICENlock

netlifSE

yarn.y.toml

yarn-error.log

*.sh

*.snap

.gitignore

.npmignore

.prettierignore

.DS_Store

.editorconfig

.eslintignore

**/*.yml

components/style/color/*.less

**/assets

.gitattributes

.stylelintrc

.vcmrc

.logo

.npmrc.template

.huskyrc

4. .prettierrc配置文件如下：

{

    "singleQuote": true,
  
    "trailingComma": "all",
  
    "printWidth": 100,
  
    "proseWrap": "never",
  
    "endOfLine": "auto",
  
    "overrides": [
  
      {
  
        "files": ".prettierrc",
  
        "options": {
  
          "parser": "json"
  
        }
  
      }
  
    ]
}  

5、修改VSCode配置，文件->首选项->设置,

在设置页,点击右上角第一个按钮，打开setting.json，修改内容为：

  {
  //保存自动格式化

  "editor.formatOnSave": true,

  //.vue文件template格式化支持，并使用js-beautify-html插件

  "vetur.format.defaultFormatter.html": "js-beautify-html",

  // js-beautify-html格式化配置，属性强制换行

  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
    }
  },

  //保存时eslint自动修复错误

  "source.fixAll.eslint": true,

  //配置 ESLint 检查的文件类型

  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    // "editor.defaultFormatter": "vscode.typescript-language-features"
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}