在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"
  }
}

 vue2使用脚手架配置prettier报错：‘prettier/prettier‘: context.getPhysicalFilename is not a function

一，原因
出现这个错误大概率是由于相关联的依赖之间的版本不互相兼容导致的。比如我用的是 vue 官方默认的 vue2 脚手架创建的项目，在此基础上我又在项目中自己配置了 .eslintrc.js 和 .prettierrc，自己又装了一些格式化插件，如 @vue/eslint-config-prettie、prettier，结果项目就运行不起来了。包括我之后在安装 sass和sass-loader运行不起来也是因为版本问题导致。

二，解决办法
# 移除以下依赖，项目中不存在的就不用移除
npm rm @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/eslint-config-prettier eslint eslint-plugin-prettier eslint-plugin-vue prettier

然后安装指定版本的依赖后重新打开vscode：

# 这些依赖都是开发环境才需要用到，加上 -D
npm i -D @vue/cli-plugin-babel@4.4.6 @vue/cli-plugin-eslint@4.4.6 @vue/eslint-config-prettier@7.0.0 esli