Vscode unified formatting and eslint configuration

step:

1. Install and enable plugins: editorConfig, prettier, eslint

2. Installation required dependencies

3. Configure the vscode settings file in the project

4. Configure editor, prettier, eslint in the project

5. Check whether the configuration is effective: configure the command eslint --ext .js,.vue src --fix in package.json, and then run it to automatically format and repair the entire project. There will be errors and errors in the editor terminal Warning, and some problems will be automatically fixed when saving

npm run lint-fix

---

Step 1: Install the required dependencies. It is recommended that those who are not familiar with eslint configuration use the version first

"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

---

The second step VSCode configuration

Note: Do not add configuration files to gitignore

.vscode/settings.json

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

---

Step 3: Configuration file

EditorConfig rules

.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 rules

.prettierrc

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

ESlint and Prettier may conflict, so the following settings are required:

// 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 rules

.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

Turn off code syntax checking for the current line

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

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

global formatting

prettier --write .

"prettier": "prettier --write ."

---

End-of-line character conflict resolution

The windows system pulls the formatted code, and may encounter the problem of end-of-line character conflicts. The following configurations need to be done: 1. Git global configuration command: git config --global core.autocrlf false 2. Set eol in vscode settings for\n

Then pull the code again and it should be fine.