Appearance
prettier&stylelint
bash
"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html}\""
1
2
2
prettier
Prettier 是一个 “有主见” 的代码格式化工具，通过这些规范的校验，就会帮助你避免 lint 过程中，因为代码格式出现的报错。
json
{
"trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号
"tabWidth": 4,// 缩进字节数
"semi": false,// 禁止多余的冒号
"singleQuote": true, // 使用单引号代替双引号
"endOfLine": "lf", // 结尾是 \n \r \n\r auto
"printWidth": 120, // 超过最大值换行
"bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"arrowParens": "always" // 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
通过配置 vscode+prettier 插件
你将可以在保存的代码的时候，自动格式化。
stylelint
一个强大的现代 linter，可帮助您避免错误并在您的样式中强制执行约定。主要是针对 css 代码中的格式校验，例如排序层次等等。
"stylelint": "~14.9.1",
"stylelint-config-html": "~1.1.0",
"stylelint-config-prettier": "~9.0.3",
"stylelint-config-recommended": "~8.0.0",
"stylelint-config-recommended-vue": "~1.4.0",
"stylelint-config-standard": "~26.0.0",
"stylelint-order": "~5.0.0",
1
2
3
4
5
6
7
2
3
4
5
6
7
stylelint.config.js
module.exports = {
root: true,
plugins: ['stylelint-order'],
customSyntax: 'postcss-html',
extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
rules: {
'function-no-unknown': null,
'selector-class-pattern': null,
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['global'],
},
],
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep'],
},
],
'at-rule-no-unknown': [
true,
{
ignoreAtRules: [
'tailwind',
'apply',
'variants',
'responsive',
'screen',
'function',
'if',
'each',
'include',
'mixin',
],
},
],
'no-empty-source': null,
'string-quotes': null,
'named-grid-areas-no-invalid': null,
'unicode-bom': 'never',
'no-descending-specificity': null,
'font-family-no-missing-generic-family-keyword': null,
'declaration-colon-space-after': 'always-single-line',
'declaration-colon-space-before': 'never',
// 'declaration-block-trailing-semicolon': 'always',
'rule-empty-line-before': [
'always',
{
ignore: ['after-comment', 'first-nested'],
},
],
'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
'order/order': [
[
'dollar-variables',
'custom-properties',
'at-rules',
'declarations',
{
type: 'at-rule',
name: 'supports',
},
{
type: 'at-rule',
name: 'media',
},
'rules',
],
{ severity: 'warning' },
],
},
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
overrides: [
{
files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
extends: ['stylelint-config-recommended', 'stylelint-config-html'],
rules: {
'keyframes-name-pattern': null,
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['deep', 'global'],
},
],
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'],
},
],
},
},
{
files: ['*.less', '**/*.less'],
customSyntax: 'postcss-less',
extends: ['stylelint-config-standard', 'stylelint-config-recommended-vue'],
},
],
};
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
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
checker
一个 Vite 插件，可以在 worker 线程中运行 TypeScript, VLS, vue-tsc, ESLint。
在使用 vite 的过程中，你会发现为什么不会校验呢？明明在打包的时候会进行校验，为什么编写代码的时候不会，那是因为需要多安装一个插件
"vite-plugin-checker": "~0.4.9",
1
在 vite.config.ts 配置开启，你就可以在编写代码的过程中，也可以有不规范的提示了。
typescript
import checker from 'vite-plugin-checker';
checker({
typescript: true,
vueTsc: true,
eslint: {
lintCommand: 'eslint "./src/**/*.{.vue,ts,tsx}"', // for example, lint .ts & .tsx
},
})
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9