规范依据
我们肯定要尽可能的遵守官方出的vue 风格指南来编写代码，在此基础上做一些我司定制化编规范码要求。
所以我们使用现有的 Vue 官方的 ESLint 插件eslint-plugin-vue即可，它正是对vue风格指南的具体 eslint 的实现。
接下来我把项目中用的 eslint 规则详细列出。
module.exports = {
rules: {
// --集成prettier 统一输出到eslint--
'prettier/prettier': 'error',
// ---js---
'no-var': 'error', // 禁止使用var
// ---ts---
'@typescript-eslint/ban-ts-comment': 'off', // 关闭‘禁止使用@ts-’，默认开启
'@typescript-eslint/no-empty-function': 'off', // 关闭‘禁止空方法’，默认为开启
'@typescript-eslint/no-var-requires': 'warn', // 允许使用require，但是警告(默认不允许)
'@typescript-eslint/explicit-module-boundary-types': 'off', // 关闭'函数必须定义参数类型和返回类型'，默认即开启
// ---vue---
'vue/no-v-html': 'off', // 关闭v-html使用警告
'vue/require-default-prop': 'off', // 不检查默认属性
'vue/multi-word-component-names': 'off', // 组件名字必须多词
'vue/attributes-order': 'warn', // 对组件属性进行排序
'vue/attribute-hyphenation': ['error', 'always'], // 模板定义属性使用中划线
'vue/name-property-casing': ['error', 'PascalCase'], // 组件定义命名规范（新版已经抛弃）
'vue/component-definition-name-casing': ['error', 'PascalCase'], // 组件定义命名规范
'vue/component-name-in-template-casing': ['error', 'kebab-case', {
registeredComponentsOnly: false
}], // 模板中引入组件名规范
'vue/html-self-closing': ['error', {
html: { void: 'always' }
}] // 自闭合标签
},
overrides: [
{
files: ['*.vue'],
rules: {
indent: 'off'
}
}
]
};
注意
截至目前，出于技术和实际需求，我们并不需要自己开发elint插件，只需用好别人的插件或熟练 eslint 内置规则即可。
indent
来源：eslint 默认规则
使用
{
'indent': ['error', 2] // 缩进2个空格
}
效果
const add = (x, y) => {
// error-start
const res = x + y;
return res;
// error-end
};
const add = (x, y) => {
// sucess-start
const res = x + y;
return res;
// sucess-end
};
no-var
来源：eslint 默认规则
使用
{
'no-var': 'error' // 禁止使用var
}
效果
// error-next
var str = "hello";
// sucess-next
let str = "hello";
@typescript-eslint/ban-ts-comment
使用
{
'@typescript-eslint/ban-ts-comment': 'off' // 关闭‘禁止使用@ts-’，默认开启
}
// sucess-next
// @ts-nocheck
@typescript-eslint/no-empty-function
使用
{
'@typescript-eslint/no-empty-function': 'off' // 关闭‘禁止使用@ts-’，默认开启
}
// sucess-next
const reduce = () => {};
@typescript-eslint/no-var-requires
使用
{
'@typescript-eslint/no-var-requires': 'warn' // 警告‘禁止允许使用require’，默认开启
}
// warn-next
const foo = require("foo");
@typescript-eslint/explicit-module-boundary-types
使用
{
'@typescript-eslint/explicit-module-boundary-types': 'off' // 关闭'函数必须定义参数类型和返回类型'，默认即开启
}
// sucess-start
export const test = () => {
return;
};
// sucess-end
vue/attributes-order
来源：eslint-plugin-vue 规则
依据：vue 风格指南
使用
{
'vue/attributes-order': 'warn' // 对组件属性进行排序
}
效果
<div <!-- error-start -->
ref="header" v-for="item in items" v-once id="uniqueID" v-model="headerData"
my-prop="prop" v-if="!visible" is="header"
<!-- error-end -->
@click="functionCall" v-text="textContent">
</div>
<div <!-- sucess-start -->
is="header" v-for="item in items" v-if="!visible" v-once id="uniqueID"
ref="header" v-model="headerData" my-prop="prop"
<!-- sucess-end -->
@click="functionCall" v-text="textContent">
</div>
vue/attribute-hyphenation
来源：eslint-plugin-vue 规则
依据：vue 风格指南
使用
{
'vue/attribute-hyphenation': ['error', 'always'] // 模板定义属性使用中划线
}
效果
<!-- error-next -->
<div myProp="prop" />
<!-- sucess-next -->
<div my-prop="prop" />
注意
声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
vue/component-definition-name-casing
来源：eslint-plugin-vue 规则
依据：vue 风格指南
使用
{
'vue/component-definition-name-casing': ['error', 'PascalCase'] // js中定义组件名使用大驼峰
}
效果
<script>
// error-start
import myComponent from "./MyComponent.vue"; // 导入组件
export default { name: "my-component" }; // 局部组件定义
Vue.component("my-component", {}); // 全局组件定义
// error-end
</script>
<script>
// sucess-start
import MyComponent from "./MyComponent.vue";
export default { name: "MyComponent" };
Vue.component("MyComponent", {});
// sucess-end
</script>
vue/component-name-in-template-casing
来源：eslint-plugin-vue 规则
依据：vue 风格指南
使用
{
'vue/component-name-in-template-casing': [ 'error', 'kebab-case', {
registeredComponentsOnly: false
}], // 模板中引入组件名 要求使用中划线
}
效果
<script>
// error-next
<MyComponent />;
</script>
<script>
// sucess-next
<my-component />;
</script>
注意
registeredComponentsOnly 如果 true，则仅检查已注册的组件，否则检查所有，默认 true。在 vue3 中需要将此关闭
vue/html-self-closing
来源：eslint-plugin-vue 规则
依据：vue 风格指南
使用
{
'vue/html-self-closing': [ 'error', {
html: { void: 'always' }
}
] // 自闭合标签
}
效果
<script>
// error-next
<my-component></my-component>;
</script>
<script>
// sucess-next
<my-component />;
</script>
vue/max-attributes-per-line
来源：eslint-plugin-vue 规则
依据：vue 风格指南
使用
{
'vue/max-attributes-per-line': ["error", {
"singleline": 1, // 单行时，允许有1个属性
"multiline": 1 // 多行时，每行允许有一个属性
}] // 多属性换行 默认为警告，我们要求必须强制
}
效果
<script>
// error-next
<hello-world user-msg="Hello" user-name="张三" />;
</script>
<script>
// sucess-start
<hello-world user-msg="Hello" user-name="张三" />;
// sucess-end
</script>
其它
首个属性换行配置
vue/html-closing-bracket-newline
使用
'vue/html-closing-bracket-newline': ['error', {
'singleline': 'never',
'multiline': 'never'
}] // 闭合标签是否需要单其一行，默认需要
效果
<script>
<hello-world
user-msg="Hello"
// error-start
user-name="张三"
/>;
// error-end
</script>
<script>
<hello-world
user-msg="Hello"
// sucess-next
user-name="张三"
/>;
</script>
vue/html-closing-bracket-spacing
使用
{
'vue/html-closing-bracket-spacing': ['error', {
startTag: 'never',
endTag: 'never',
selfClosingTag: 'never'
}] // 闭合标签是否需一个空格
}
效果
<script>
<hello-world
user-msg="Hello"
// error-next
user-name="张三"
/>;
</script>
<script>
<hello-world
user-msg="Hello"
// sucess-next
user-name="张三"
/>;
</script>
vue/script-indent
使用
{
'vue/script-indent': ['error', 2] // vue中的js缩进
}
效果
<script setup lang="ts">
// error-start
import { ref } from "vue";
defineProps<{ userMsg: string; userName: string }>();
const count = ref(0);
// error-end
</script>
<script setup lang="ts">
// sucess-start
import { ref } from "vue";
defineProps<{ userMsg: string; userName: string }>();
const count = ref(0);
// sucess-end
</script>
提示
这个属性会跟 eslint 的默认 indent 属性冲突，所以需要设置如下属性即可
"overrides": [
{
"files": ["*.vue"],
"rules": {
"indent": "off"
}
}
]
vue/multi-word-component-names
使用
{
'vue/multi-word-component-names': 'warn' // vue组件名称必须多词
}
效果
<script lang="ts">
export default {
// warn-next
name: "Todo",
};
</script>
<script lang="ts">
export default {
// sucess-next
name: "TodoItem",
};
</script>
提示
在项目中，我们关闭了此限制。
vue/html-closing-bracket-spacing
这里无需再项目配置。不修改此规则，默认即是如下配置
使用
'vue/html-closing-bracket-spacing': ['error', {
startTag: 'never',
endTag: 'never',
selfClosingTag: 'always'
}], // 闭合标签是否需一个空格 需要
效果
// error-start
<div>
测试 < /div>
<div />
// error-end
</div>
// sucess-start
<div>测试</div>
<div />
// sucess-end
风格化的规则
主要用于假设 prettier 不存在的场景。虽然说 eslint 不擅长这个，但是如果不用 prettier 也只能硬上
行尾分号：https://eslint.bootcss.com/docs/rules/semi
大括号之间的空格：https://eslint.bootcss.com/docs/rules/object-curly-spacing
禁止多个的空行：https://eslint.bootcss.com/docs/rules/no-multiple-empty-lines
禁止多个空格：https://eslint.bootcss.com/docs/rules/no-multi-spaces
'semi': ['error', 'always'], // 行尾分号（替代prettier）
'object-curly-spacing': ['error', 'always'], // 对象两侧空格（替代prettier）
'no-multiple-empty-lines': 'error', // 移除多余空行，默认最多空两行（替代prettier）
'no-multi-spaces': 'error', // 移除多余空格（替代prettier）