在vue项目中配置eslint+prettier

在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版本可解决

安装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 使我们可以敲命令格式化代码

eslint配置更改

extends中添加"plugin:prettier/recommended"

plugins中添加"prettier"

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

"prettier/prettier": [
 "error",
 {
  "singleQuote": true,
  "trailingComma": "none",