使用Eslint+Prettier统一代码风格

一、安装Eslint和Prettier

yarn add eslint -D
yarn add prettier -D

二、配置vscode setting.json

...
// 保存时格式化
"editor.formatOnSave": true,
// 检验的文件
"eslint.validate": [
	"javascript",
	"javascriptreact",
	"typescript"
	"typescriptreact"
	"vue-html",
],
// 保存时自动修正
"editor.codeActionsOnSave": {
	"source.fixAll.eslint": true
},
// 默认所有文件使用prettier规范
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 指定typescript文件格式化规范
"[typescript]": {
	"editor.defaultFormatter": "esbenp.prettier-vscode"
},

三、配置**.eslintrc.json和.prettierrc**

参考一下官方文档

prettier官方文档

eslint官方文档

四、Prettier和Eslint一起使用

众所周知，eslint不仅能检查代码质量，也能检查代码样式。

可能和Prettier的风格有冲突。

可以使用eslint-plugin-prettier，让Eslint使用Prettier风格

安装

yarn add eslint-plugin-prettier -D

.eslintrc.json

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

如果与已存在的插件冲突怎么办

通过使用eslint-config-prettier配置，能够关闭一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次。使用的时候需要确保，这个配置在extends的最后一项。

.eslintrc.js

{
  extends: [
    'standard', //使用standard做代码规范
    "prettier",
  ]
}

同时使用上面两项配置

如果你同时使用了上述的两种配置，那么你可以通过如下方式，简化你的配置。

.eslintrc.js

{
  "extends": ["plugin:prettier/recommended"]
}

五、vue-cli项目中的完整配置，使用standard做代码规范

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    es6: true
  },
  extends: [
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard',
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    "plugin:prettier/recommended",
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    "prettier/prettier": "error",
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}