沐光

记录在前端之路的点点滴滴

Vue 代码规范配置

前言

工欲善其事,必先利其器。一个好的规范能使的团队开发的效率提升一倍,因此,一个好的规范对于一个团队来说是必不可少的。此处记录我为所在团队维护的一套前端规范相关的配置。

VSCode 配置

在项目根目录下新建一个 .vscode 文件夹,然后在该文件内创建一个 settings.json 文件,粘贴以下内容即可:

注意:该部分配置需要安装两个必须的 VSCode 插件: Vetur 和 ESLint。

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
{
// 编辑器部分
"editor.tabSize": 2,
"editor.fontSize": 15,
"editor.wordWrap": "on",
"editor.formatOnSave": true,
"editor.renderWhitespace": "none",
"editor.multiCursorModifier": "ctrlCmd",
"editor.defaultFormatter": "octref.vetur",
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"files.insertFinalNewline": true,
/**
* 代码配置
*/
// eslint 部分
"eslint.run": "onSave",
"eslint.validate": [
"typescriptreact",
"typescript"
],
// vetur 部分
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.ts": "vscode-typescript",
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 75,
"singleQuote": false
}
}
}

ESlint 配置

此处配置的 ESlint 为 TS 环境下的 typescript-eslint 的配置。配置文件为:.eslintrc.js

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
module.exports = {
root: true,
env: {
browser: true,
commonjs: true,
es6: true
},
parserOptions: {
parser: '@typescript-eslint/parser',
sourceType: 'module',
},
extends: [
'plugin:vue/essential',
'@vue/standard',
'@vue/typescript',
],
rules: {
'no-var': 'error',
'arrow-parens': 'off',
"semi": "off",
"@typescript-eslint/semi": ["error"],
'eol-last': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{
vars: 'local',
args: 'none',
ignoreRestSiblings: true
}
],
'generator-star-spacing': 'off',
'camelcase': ['error', { properties: 'never' }],
'space-before-function-paren': ['error', { anonymous: 'always', named: 'never' }],
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
}
};

tsconfig.json 配置

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
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"checkJs": false,
"esModuleInterop": true,
"importHelpers": true,
"experimentalDecorators": true,
"jsx": "preserve",
"jsxFactory": "h",
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
],
"module": "esnext",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"pretty": true,
"sourceMap": true,
"strict": true,
"target": "esnext",
"types": [
"webpack-env"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules",
"public"
]
}

相关依赖(项目由非 TS -> TS):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"devDependencies": {
"@babel/core": "^7.0.0-0",
"@babel/plugin-syntax-jsx": "^7.2.0",
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-eslint": "^3.0.5",
"@vue/cli-plugin-typescript": "^3.8.1",
"@vue/cli-service": "^3.0.5",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/eslint-config-typescript": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0-0",
"typescript": "^3.4.3"
}
}

Stylelint 配置

此部分规范 css 和 less 语法,配置文件为: stylelint.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = {
extends: 'stylelint-config-standard',
ignoreFiles: [
'**/*.js',
'**/*.md',
'**/*.png',
'**/*.json'
],
rules: {
'indentation': 2,
'color-hex-case': 'lower',
'string-quotes': 'single',
'color-hex-length': 'long',
'number-leading-zero': 'never',
'rule-empty-line-before': null,
'no-descending-specificity': null,
'no-missing-end-of-source-newline': false,
'selector-pseudo-element-colon-notation': null,
'selector-list-comma-newline-after': 'always-multi-line'
}
};

相关依赖:

1
2
3
4
5
6
{
"devDependencies": {
"stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0",
}
}

规范参考