介绍
记录常用的Vue eslint规则
# eslint的优势
- eslint可以让原本松散的JS代码 具备极强且规范的能力 让代码更加的方便阅读 并且让团队协作更规范 更简单
- 推荐搭配Vscode的配置 + eslint的规范 这样你只要
ctrl+s
就可以格式化代码 很方便 请查看这里设置Vscode的配置 - Vue有自己的eslint规范 通常我们通过Vue cli脚手架创建的项目 是Vue的eslint规范 我们就记录这些Vue的eslint规范
.eslintrc.js
通常我们在脚手架的这里 填写eslint的规则
# 自动闭合标签
- html中 标签如果没有包含内容 可以设置闭合 让代码更优雅 就比如
<div></div> // 没闭合
<div /> // 闭合标签
- Vue eslint 在这里 (opens new window)有详细的闭合介绍 它属于规则 在
rules
中进行添加
// 标签闭合
'vue/html-self-closing': ['warn', { // error
html: {
void: 'never',
normal: 'always',
component: 'always'
},
svg: 'always',
math: 'always'
}],