# eslint + prettier + vscode 支持代码检查、风格一致
Eslint 是一款语法检测工具。
Prettier是一个代码格式化插件。
# 背景
# 支持风格一致的收益
- 在运行代码之前发现并修复代码的语法错误，减少调试耗时和潜在bu g。
- 确保项目的编码风格一致，提高项目的可维护性。
- 促进团队成员在编码时遵守约定的最佳实践，提升代码的质量
# 代码常见不规范的问题
格式问题：单行代码长度、tab长度、空格、逗号表达式……
质量问题：未使用变量、三等号、全局变量声明……
# 方案
在团队中实现javascript 代码规范的统一的方案。该方案包括：
- ESlint规则配置
- 代码集成交付检查
# 配置代码检查
一、安装 npm 依赖
- eslint
- prettier
- babel-eslint
- @vue/cli-plugin-eslint
- @vue/eslint-config-prettier
- eslint-plugin-prettier
- eslint-plugin-vue
npm i --save-dev eslint prettier babel-eslint @vue/cli-plugin-eslint @vue/eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue
1
示例项目：package.json
{
"name": "vue-simple-demo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.4.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
二、vs code 配置
1、编辑器安装插件扩展包
- eslint
- Vetur
- Prettier - Code formatter
2、添加vs code项目工作区配置
在项目根目录下创建 .vscode 文件夹，新增 setting.json 文件
{
"editor.detectIndentation": false,
"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
三、添加项目配置文件：
1、.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
parserOptions: {
parser: 'babel-eslint',
},
rules: {
'prettier/prettier': 1,
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
semi: 'off',
singleQuote: 'off',
'no-unused-vars': 1,
'space-before-function-paren': 0,
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)',
],
env: {
jest: true,
},
},
],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2、.eslintignore
public/**
dist/
node_modules/
build
coverage
1
2
3
4
5
2
3
4
5
3、.prettierrc.js
// prettier 代码风格规则
module.exports = {
eslintIntegration: true,
semi: false,
singleQuote: true,
trailingComma: 'es5',
arrowParens: 'always',
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
4、.prettierignore
# Ignore artifacts:
public/**
dist/
node_modules/
build
coverage
1
2
3
4
5
6
7
2
3
4
5
6
7
5、.editorconfig
root = true
[*]
charset = utf-8
indent_style = space
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_size = 2
[*.md]
trim_trailing_whitespace = false
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12