eslint+prettier前端代码规范配置
前端代码规范配置
参考来源：https://blog.csdn.net/u013361179/article/details/108885859
前言
-
eslint的作用：eslint作用是按照一定规则，检测代码质量；
-
prettier的作用：prettier起到的作用是按照统一风格去美化代码
目前支持的格式：
- javascript、jsx、ts、tsx
- flow
- json
- css、less、scss
- graphql
- markdown
- yaml
ESlint虽然可以检测代码质量问题并给出提示，但是格式化的能力有限，只能格式化js，不支持css,html等语言。而Prettier具有更强大的功能，能够支持包括 js、ts、各种 css、vue 和 md 等前端绝大部分的语言和文件格式。因此，我们可以通过ESlint和Prettier组合使用，用Eslint进行代码校验，用Prettier统一代码风格。
eslint规则
规则配置：https://blog.51cto.com/itcjf/2995936#types–complex
prettier规则
官网：https://www.prettier.cn/
settings.json文件
setting 配置（ctrl+shift+P打开）
setting.json文件分为工作区和用户区，
- 工作区：如果只是想改变该项目的配置，就在工作区；
- 用户区：如果是想所有项目都用改配置就在用户区添加，用户区添加以后其他电脑登录对应用户也会同步更新的；
vetur
注意：在 vscode 中其实 Vetur 也有一套 Format 规则，因此会和 prettier 冲突。打开 setting-扩展-Vetur 将 Vetur 的规则改成 Prettier 就好了。如果有需要忽略的文件可以在 .eslintignore 文件中进行配置（可以忽略）
配置流程
一、vscode插件商城安装插件
首先安装的代码格式化插件：vetur、ESLint
二、安装依赖
-
npm i -D eslint babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint
npm i -D eslint babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint --legacy-peer-deps
eslint: ESLint 的核心代码
babel-eslint: eslint 与 babel 整合包
eslint-plugin-vue @vue/cli-plugin-eslint: eslint 与 vue 整合包
-
npm i -D prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli
npm i -D prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli --legacy-peer-depsprettier：prettier 插件的核心代码
eslint-plugin-prettier：这个插件的主要作用就是将prettier作为ESLint的规则来使用，相当于代码不符合Prettier的标准时，会报一个ESLint错误
eslint-config-prettier：解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效，本质上这个工具其实就是禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则。
prettier-eslint-cli:prettier-eslint-cli 允许多个文件用 prettier-eslint 进行格式化
三、配置eslint（.eslintrc.js）
ESlint配置中各项值的含义：
https://eslint.bootcss.com/docs/user-guide/configuring
-
parserOptions
解析器选项。指定你想支持的语言，默认支持es5。指定啥语言，eslint就按照啥语法检查。
-
parser
指定要使用的解析器。（parser和parserOptions要同时使用）
-
processor
指定插件的处理器。（需要和 plugins 字段配合使用）处理器可以从另一种文件中提取 JavaScript 代码，然后让 ESLint 检测 JavaScript 代码。或者处理器可以在预处理中转换 JavaScript 代码。
-
environments
指定代码运行环境。
-
globals
定义全局变量。告知 eslint，不必报 no-undef 错误。
-
rules
手动自定义代码规范。
off 或 0：表示不验证规则。warn 或 1：表示验证规则，当不满足时，给警告。error或 2：表示验证规则，不满足时报错。
-
extends
用于继承某些基础配置。值可以是字符串/数组。值为数组时，每个配置继承它前面的配置。(说白了，就是别人提前写好了一套 rules，你直接拿过来用就行。不用自己一个一个一个的，写 rules 规则。)
ESlint配置
在项目的根目录下，新建.eslintrc.js 或者一键生成npm init @eslint/config文件，将定义的eslint规则拷贝进去
module.exports = {
// 指定代码的运行环境
env: {
browser: true,
node: true,
es6: true,
},
extends: [
//继承 vue 的标准特性
'eslint:recommended',
'plugin:vue/essential'],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly'
},
parserOptions: {
// 定义ESLint的解析器
parser: "babel-eslint",
sourceType: "module",
},
plugins: ['vue'],
rules: {
indent: [
2,
2, // 缩进两个
{
SwitchCase: 1, // switch case缩进缩进2格（2x1）
VariableDeclarator: 'first' // const let var 对齐缩进
}
],
eqeqeq: 2, // 要求使用 === 和 !==
'lines-around-comment': [
2,
{
beforeBlockComment: true, // 块注释之前空行
beforeLineComment: false, // 行注释之前空行
allowBlockStart: true, // 允许注释出现在块语句的开始位置
allowObjectStart: true, // 允许注释出现在对象字面量的开始位置
allowArrayStart: true, // 允许注释出现在数组字面量的开始位置
allowClassStart: true, // 允许注释出现在类的开始位置
ignorePattern: '#'
}
],
'spaced-comment': 2, // 注释上的空格，//xxx => // xxx
'no-whitespace-before-property': 2, // 禁止点调用有空格 a. b => a.b
'no-multiple-empty-lines': [
2,
{
max: 1, // 连续最大空行数
maxEOF: 0 // 文件末尾空行数
}
],
'block-spacing': [2, 'always'], // 代码块空格{return} => { return }
'arrow-spacing': 2, // 要求箭头函数的箭头部分前后的空格
quotes: [
2,
'single',
{
// 允许字符串使用单引号或者双引号，只要字符串中包含了一个其他引号，否则需要转义
avoidEscape: true,
// 允许字符串使用反勾号
allowTemplateLiterals: true
}
],
'brace-style': 2, // else 与它的大括号同行。
curly: 2, // if 语句如果包含多个语句则使用大括号。
'operator-linebreak': 2, // 三元表达式如果是多行，则 ? 和 : 放在各自的行上。
// 对属性名强制使用驼峰
camelcase: [2, {
properties: "always"
}],
"no-console": 2,//禁止使用console
'comma-dangle': 2, // 无多余逗号。
'no-underscore-dangle': 2// 此规则不允许在标识符中使用悬空下划线。
}
};
四、配置prettier （.prettierrc.js）（可选）
可配置也可不配置：若不配置在setting.json文件中加入"vetur.format.defaultFormatter.js": "none",即可
//一键格式化
npx prettier --write .
在项目的根目录下，创建.prettierrc.js 文件，定义的prettier规则拷贝进去
module.exports = {
// 最大长度80个字符
printWidth: 80,
// 行末分号
semi: true,
// 单引号
singleQuote: true,
// JSX双引号
jsxSingleQuote: false,
// 尽可能使用尾随逗号（包括函数参数）
trailingComma: 'none',
// 在对象文字中打印括号之间的空格。
bracketSpacing: true,
// > 标签放在最后一行的末尾，而不是单独放在下一行
jsxBracketSameLine: false,
// 缩进
tabWidth: 2,
// 使用tab还是空格
useTabs: false,
// 行尾换行格式
endOfLine: 'auto',
//空格敏感
HTMLWhitespaceSensitivity: 'ignore',
extends: [
//继承 vue 的标准特性
'plugin:vue/essential',
'eslint:recommended',
//避免冲突
'plugin:prettier/recommended'
]
};
五、配置setting.json文件
ctrl+shift+P打开，将配置拷贝进去以后，保存关闭
//设置vetur默认html代码格式化风格
"vetur.format.defaultFormatter.html": "prettier",
// 为ESLint启用“保存时自动修复”，并且仍然具有格式和快速修复功能
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true
},
"eslint.enable": true,
"eslint.options": {
"extensions": [
".js",
".vue",
".ts",
".tsx"
]
},
//保存的时候格式化代码
"editor.formatOnSave": true,
"eslint.validate": [
"vue",
"html",
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
],
六、配置eslintignore文件（.eslintignore）
需要忽略格式化的文件就放入该文件
node_modules
.vscode
.idea
/public
.eslintrc.js
.DS_Store
/dist
七、最后
上述步骤完成以后，记得一定要重启VSCode才会生效
转换思路：
eslint规则+eslint插件：代码规则不符合eslint配置报红色错误提示；
eslint规则：代码不符合eslint规则，编译的时候报错；
prettier规则：让和eslint冲突的规则统一,自动保存的时候；
自动保存是分为两步的：
第一步是eslint自动修复js代码；
第二步是prettier格式化html+css代码和部分js代码，而在这个时候prettier格式化js代码会和eslint规则有冲突，这个时候eslint-config-prettier依赖会让以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效；
问题：
-
已经有eslint规则，为什么还要单独去写prettier规则？
因为eslint规则只是针对于js代码，prettier规则是对于大部分代码格式化都有用的，vetur插件中自带prettier规范，对于prettier如果不想配置，直接在setting.json文件中加入："vetur.format.defaultFormatter.js": "none"即可（主要是使vetur对js代码格式化失效） -
哪些代码是可以自动修复的？
空格，双引号这些格式的代码是可以自动修复的，代码规范报错会提示到具体代码，手动修改、
参考来源：https://blog.csdn.net/u013361179/article/details/108885859