在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" //不同系统换行符不一致
}
],
}
}
