# 简介
本文档用于记录代码风格校验的配置，包括编辑器配置、代码风格校验配置、代码风格格式化配置等。一般需要结合 babel、eslint、prettier 等工具（包括 npm 依赖和 vscode 插件等）一起使用。参考代码风格检查&license 声明添加。
# .editorconfig
基础的编辑器配置，可以参考 EditorConfig 官方文档 (opens new window)。
# .eslintrc
在 .eslintrc 文件中使用自定义 rules 以及现有的规则集，比如 airbnb 的npm install --save-dev babel-preset-airbnb。比如对于 vue3：npm add --dev @vue/eslint-config-typescript，结合vue-tsc使用 lint："lint:fix": "vue-tsc --noEmit --noEmitOnError --pretty && eslint --ext .ts,.vue src --fix"，如果有强制校验则需结合husky+lint-staged+commitlint等。
module.exports = {
globals: {
Nullable: true,
},
extends: ['airbnb', 'eslint:recommended', '@mine/rules/vue3'], // 单个扩展时可以省略中括号
rules: {
// Note: you must disable the base rule as it can report incorrect errors
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': 'error',
},
};
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# .prettierrc
大多数时候只需要配置几行即可，具体的配置可以参考 Prettier 官方文档 (opens new window)。在这里 (opens new window)可以在线上配置，然后复制到 .prettierrc 文件中。
{
"endOfLine": "lf",
"bracketSpacing": false,
"arrowParens": "always",
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"overrides": [
{
"files": ["*.ats", "*.cts", "*.mts", "*.ts"],
"options": {
"tabWidth": 2,
"semi": true,
"singleQuote": false,
"bracketSpacing": false,
"printWidth": 120,
"proseWrap": "always",
"quoteProps": "as-needed",
"useTabs": false,
"trailingComma": "all",
"arrowParens": "avoid",
"endOfLine": "lf"
}
},
{
"files": ["*.bash", "*.sh", "*.zsh"],
"options": {
"shellDefaultIndents": false
}
},
{
"files": ["*.cjs", "*.js"],
"options": {
"semi": true,
"singleQuote": false,
"jsxSingleQuote": false,
"trailingComma": "none",
"bracketSpacing": true,
"arrowParens": "avoid",
"printWidth": 80,
"tabWidth": 4,
"useTabs": false,
"endOfLine": "auto"
}
},
{
"files": [
"*.har",
"*.jsb2",
"*.jsb3",
"*.json",
".babelrc",
".eslintrc",
".prettierrc",
".stylelintrc",
"apple-app-site-association",
"bowerrc",
"jest.config"
],
"options": {
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": false,
"bracketSpacing": true,
"arrowParens": "avoid",
"trailingComma": "none",
"endOfLine": "lf"
}
},
{
"files": ["*.htm", "*.html", "*.ng", "*.sht", "*.shtm", "*.shtml"],
"options": {
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": false,
"bracketSpacing": true,
"arrowParens": "avoid",
"trailingComma": "none",
"endOfLine": "lf",
"overrides": [
{
"files": ["*.html"],
"options": {
"proseWrap": "always",
"quoteProps": "as-needed",
"htmlWhitespaceSensitivity": "ignore",
"overrides": [
{
"files": ["*.html"],
"options": {
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": false,
"bracketSpacing": true,
"arrowParens": "avoid",
"trailingComma": "none",
"endOfLine": "lf"
}
}
]
}
}
]
}
},
{
"files": ["*.markdown", "*.md"],
"options": {
"proseWrap": "always",
"singleQuote": false,
"semi": false,
"quoteProps": "as-needed",
"tabWidth": 2,
"arrowParens": "avoid",
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto",
"bracketSpacing": true,
"useTabs": false,
"printWidth": 120
}
}
]
}
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
basic demo：
{
"arrowParens": "always",
"bracketSameLine": false,
"objectWrap": "preserve",
"bracketSpacing": false,
"semi": true,
"experimentalOperatorPosition": "end",
"experimentalTernaries": false,
"singleQuote": true,
"jsxSingleQuote": false,
"quoteProps": "as-needed",
"trailingComma": "all",
"singleAttributePerLine": true,
"htmlWhitespaceSensitivity": "css",
"vueIndentScriptAndStyle": false,
"proseWrap": "preserve",
"insertPragma": false,
"printWidth": 120,
"requirePragma": false,
"tabWidth": 2,
"useTabs": false,
"embeddedLanguageFormatting": "auto"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# .eslintignore
忽略部分文件格式校验
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile
/src/api/diy/
/src/views/diy/
node_modules/.pnpm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# .browserslistrc
设置浏览器兼容性
> 1%
last 2 versions
not dead
1
2
3
2
3
# vue.config.js
const { getConfig } = require('vue');
const { merge } = require('webpack-merge');
const defaultConfig = getConfig({
title: '权限管理',
useEsbuild: true,
});
module.exports = merge(defaultConfig, {
outputDir: 'dist',
devServer: {
host: 'localhost',
},
configureWebpack: {
output: {
filename: 'js/[name].[contenthash:8].js',
chunkFilename: 'js/[name].[contenthash:8].js',
},
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# tailwind.config.js
const lineClampPlugin = require('@tailwindcss/line-clamp');
module.exports = {
plugins: [lineClampPlugin],
theme: {
extend: {
height: {
header: '44px',
breadcrumb: '20px',
},
},
},
corePlugins: {
preflight: false,
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"sourceMap": true,
"pretty": true,
"resolveJsonModule": true,
"allowJs": true,
"checkJs": true,
// "suppressImplicitAnyIndexErrors": true,
"strictPropertyInitialization": false,
"downlevelIteration": true,
"noUnusedLocals": false,
"noImplicitAny": false,
"noImplicitThis": true,
"removeComments": false,
"strictFunctionTypes": false,
"baseUrl": ".",
"types": [
"webpack-env"
],
"typeRoots": ["./node_modules/@types/", "./types"],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"types/**/*.d.ts",
"types/**/*.ts"
],
"exclude": [
"node_modules",
"dist"
]
}
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55