步骤：

1、安装并启用插件：editorConfig、prettier、eslint

2、安装所需依赖

3、在项目里配置vscode设置文件

4、在项目里配置editor、prettier、eslint

5、查看配置是否生效：在package.json里配置命令eslint --ext .js,.vue src --fix，然后跑一下，把整个项目自动格式化修复一遍，在编辑器终端里会有错误及警告，并且保存的时候会自动修复部分问题

npm run lint-fix

第一步：安装所需依赖，建议不熟悉eslint配置的人，先使用一下版本

"babel-eslint":
"10.0.3"
"eslint":
"^7.32.0"
"eslint-config-prettier":"^8.5.0"
"eslint-config-standard":
^14.1.1"
"eslint-friendly-formatter":
"^4.0.1"
"eslint-plugin-import":
"^2.25,4"
"eslint-plugin-node":
^11.1.0"
"eslint-plugin-prettier":
"^4,2.1"
"eslint-plugin-promise":
"^4,3.1"
"eslint-plugin-standard":
"^5.0.0"
"eslint-plugin-vue":
"^9, 6.g"

npm i -D [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] prettier

第二步VSCode 配置

注意：不要把配置文件加入到 gitignore

.vscode/settings.json

{
  // 保存时格式化
  "editor.formatOnSave": true,
  // 保存时候按eslint规则进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true, // 启用ESLint作为已验证文件的格式化程序
  "vetur.validation.script": false // 禁用vetur的校验
}

第三步：配置文件

EditorConfig 规则

.editorconfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

Prettier 规则

.prettierrc

{
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "es5",
  "endOfLine": "lf"
}

ESlint 与 Prettier 可能会冲突，故需做如下设置：

// 1. 安装依赖
npm install -D eslint-config-prettier eslint-plugin-prettier
// 2. 配置.eslintrc文件,在下面的.eslintrc.json文件中已经加入，第二条可忽略
{
  "extends": ["plugin:prettier/recommended"]
}
// 这个配置包含两个内容：
// 使用eslint-config-prettier来关掉eslint中所有与prettier冲突的配置。
// 使用eslint-plugin-prettier将prettier的rules以插件的形式加入到ESlint里面。

.prettierignore

/dist/*
/node_modules/*
/static/*
/public/*
/*-lock.json
.DS_Store

Eslint 规则

.eslintrc.json

{
  "root": true,
  // 环境：可以使用的全局变量，比如browser环境的window。可配置多个，不互斥。
  "env": {
    "browser": true,
    "commonjs": true,
    "node": true,
    "es2021": true
  },
  // 扩展风格：使用standard风格，同时适配vue推荐规则、prettier规则
  "extends": [
    "standard",
    "plugin:vue/recommended",
    "plugin:prettier/recommended"
  ],
  // 解析器：支持解析的语法
  "parserOptions": {
    // @babel/eslint-parser
    "parser": "babel-eslint",
    "sourceType": "module",
   // "ecmaVersion": "latest",
   "ecmaVersion": 2017,
   "ecmaFeatures": {  
   "legacyDecorators": true  
   }  
  },
  // 全局变量：比如jquery的$
  "globals": {},
  // 插件：比如jquery的$
  "plugins": [],
  // "off" 或 0 - 关闭规则
  // "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  // "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
  "rules": {
    "space-before-function-paren": 0,
    "camelcase": 0,
    "vue/attribute-hyphenation": 0,
    "vue/multi-word-component-names": 0
  }
}

.eslintignore

/dist/*
/node_modules/*
/static/*
/public/*
/*-lock.json
.DS_Store

关闭当前行的代码语法检测

// 1：关闭当前行的检测
some code // eslint-disable-line

// 2：针对当前行的某一具体规则禁用eslint检查
some code // eslint-disable-line no-alert

全局格式化

prettier --write .

"prettier": "prettier --write ."

行尾字符冲突解决方式

windows系统拉取格式化后的代码，可能会碰到行尾字符冲突的问题，需要做以下配置：1、git全局配置命令：git config --global core.autocrlf false2、在vscode设置里把eol设置为\n

然后再重新拉取代码，应该就没问题了。

vscode 统一格式化和eslint配置

步骤：