Skip to content
On this page

代码规范

准备

代码规范主要基于 ESLint 和 stylelint 运行,所以为保证代码风格统一,请统一使用 VS Code 做为开发工具,并安装以下扩展:

安装完后在 settings.json 中增加如下配置:

json
"editor.codeActionsOnSave": {
	"source.fixAll.eslint": true,
	"source.fixAll.stylelint": true
}

完成以上配置,并确保项目已安装好依赖,便可查看最终效果:在保存代码时,会自动对当前文件进行代码格式化操作。

配置

配置文件主要有 3 处,分别为 IDE 配置(.editorconfig)、ESLint 配置(.eslintrc.js.eslintignore)、StyleLint 配置(.stylelintrc.stylelintignore)。

以代码缩进举例,框架默认是以 4 空格进行缩进,如果要调整为 2 空格,则需要在 .editorconfig 里修改:

indent_size = 2

.eslintrc.js 里修改:

'indent': [2, 2, {
    'SwitchCase': 1
}],

...

'vue/html-indent': [2, 2],

...

'vue/script-indent': [2, 2, {
    'switchCase': 1
}]

.stylelintrc 里修改:

"indentation": 2

修改完毕后,再分别执行下面两句命令:

sh
yarn run lint
yarn run stylelint

该操作会将代码进行一次格式校验,如果规则支持自动修复,则会将不符合规则的代码自动进行格式化。以上面的例子,当缩进规则调整后,我们无需手动去每个文件调整,通过命令可以自动应用新的缩进规则。