vue2项目 eslint prettier 及editorconfig

1、目的：vue2代码格式规范化

2、具体用途

• EditorConfig 有助于为不同编辑器上处理同一项目的多个开发人员维护一致的编码风格（结尾行、缩进风格、缩进大小等与编辑器相关的所有配置）

• prettier 自动格式化代码。具有比 eslint auto-fix 更加强大的代码规范性修复能力。（代码格式相关的一切事物应该由 Prettier 处理）

• 通过配置 .eslintrc.* 制定团队代码规范。在代码编写的过程中，出现不符合规范的代码，进行红线提示。帮助开发者及时更正不符合规范的代码。同时，提供命令行检查规范及 auto-fix 能力。（剩下的（代码质量）则由 ESLint 负责）

3、vscode安装插件

4、配置settings.json，设置启用eslint自动格式化

路径：组合键 ctrl+shift+p -> Preferences: Open User Settings -> 切换到Workspace标签 -> 鼠标点击右上角Open Settings(json)

"editor.formatOnSave": true,

5、配置 vue 的 package.json

配置eslint相关插件，并执行npm install命令

// 完整的配置项一共需要下面 7 个 ESLint 相关的插件
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/eslint-config-prettier": "^6.0.0",
"eslint": "^6.8.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.2.1"

配置eslint自动格式化命令

npm run lint

"lint": "eslint --fix --ext .js,.vue src/"

.prettierrc.js

module.exports = {
  // "endOfLine": "auto",
  "tabWidth": 2, // 缩进字节数
  "useTabs": false, // 缩进不使用tab，使用空格
  "semi": false, // 句尾添加分号
  "singleQuote": true, // 使用单引号代替双引号
  "jsxSingleQuote": true, // 使用单引号代替双引号
  "bracketSpacing": true, // 在对象，数组括号与文字之间加空格 “{ foo: bar }”
  // "arrowParens": "avoid", // 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "eslintIntegration": true, // 让prettier使用eslint的代码格式进行校验
  "trailingComma": "none" // // 在对象或数组最后一个元素后面是否加逗号
}

.prettierignore

/dist/*
/build/*
/node_modules/**

**/*.svg
**/*.sh

/public/*

.editorconfig

需要editorconfig配置，否则eslint和prettier会应为换行类型（end_of_line->warning Delete `␍` prettier/prettier）导致校验等问题

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

参考于：https://juejin.cn/post/7125207251144409124