配置eslint + prettier+husky

在vue/react项目中配置eslint + prettier

前提：配置eslint

安装eslint相关编辑器插件和项目依赖

vue：

 "babel-eslint": "^10.1.0",

 "eslint": "^4.15.0",

 "eslint-config-standard": "^10.2.1",

 "eslint-friendly-formatter": "^3.0.0",

 "eslint-loader": "^1.7.1",

 "eslint-plugin-import": "^2.7.0",

 "eslint-plugin-node": "^5.2.0",

 "eslint-plugin-promise": "^3.4.0",

 "eslint-plugin-standard": "^3.0.1",

 "eslint-plugin-vue": "^4.0.0",

react:

 "babel-eslint": "^10.1.0",

 "eslint": "=6.6.0",

 "eslint-plugin-import": "^2.22.1",

 "eslint-plugin-jsx-a11y": "^6.4.1",

 "eslint-plugin-react": "^7.22.0",

 "eslint-plugin-react-hooks": "^4.2.0",

eslint依赖高版本有一个'basePath' should be an absolute path的报错，固定6.6.0版本可解决(opens new window)#

安装prettier相关依赖

npm i --save-dev prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli

安装eslint-plugin-prettier 配合eslint使用prettier

安装eslint-config-prettier 禁用一些eslint和prettier冲突的规则

安装prettier-eslint-cli 使我们可以敲命令格式化代码[#](https://jiuto.github.io/jiuto_blog/guide/else/eslint_prettier.html#eslint%E9%85%8D%E7%BD%AE%E6%9B%B4%E6%94%B9)

eslint配置更改

extends中添加"plugin:prettier/recommended"

plugins中添加"prettier"

rules中添加如下配置来添加prettier支持并规避prettier配置和编辑器prettier配置冲突报错

"prettier/prettier": [

 "error",

 {

  "singleQuote": true,

  "trailingComma": "none",

  "bracketSpacing": true,

  "jsxBracketSameLine": true

 }

]

package.json设置命令

package.json的scripts中添加：

"format": "prettier-eslint --write "src/**/*.js" "src/**/*.scss" "src/**/*.less" "src/**/*.vue""

执行

npm run format

额外配置

配合husky和lint-staged配置，可以在代码提交时自动格式化代码，减少人工操作成本
执行npm i -D husky lint-staged安装依赖
在package.json中增加以下配置，默认提交代码时自动格式化代码

{

"husky": {

 "hooks": {

 "pre-commit": "lint-staged"

 }

 },

 "lint-staged": {

 "*.{js,jsx,ts,tsx,md,html,vue,css,scss,less,json}": [

 "npm run format",

 "git add"

 ]

 }

}

附：

eslint配置，可自由添加规则(opens new window)

module.exports = {

 root: true,

 parser: "babel-eslint",

 parserOptions: {

 ecmaVersion: 11, // ECMAScript版本

 sourceType: "module",

 ecmaFeatures: { // 额外语言特性

 "jsx": true

 },

 },

 env: {

 browser: true,

 es6: true,

 },

 extends: [

 "plugin:vue/essential", // vue

 "plugin:react/recommended", // react

 "eslint:recommended",

 "plugin:prettier/recommended",

 ],

 plugins: [

 "vue", // vue

 "react", // react

 "prettier",

 ],

 globals: {

 "require": true,

 "module": true

 },

 // add your custom rules here

 rules: {

 "generator-star-spacing": "off",

 "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",

 "no-console": 0, //禁用 console

 "no-unused-vars": 1, //禁止出现未使用过的变量

 "react/prop-types": "off", // react 使用babel-eslint会导致react/prop-types报错

 "prettier/prettier": [

 "error",

 {

 "quoteProps": "preserve",

 "trailingComma": "none",

 "bracketSpacing": true,

 "jsxBracketSameLine": true,

 "endOfLine":"auto" //不同系统换行符不一致

 }

 ],

 }

}