1.说明
之前说了ESLint是用来检查代码的。又安装了那么多的插件。但是官方默认的方案有时不一样符合我们的要求。我们需要自定义自己的规则。
修改规则主要是修改根目录下.eslintrc.js文件的rules字段。
2.修改规则
配置ESLint：根目录下：.eslintrc.js文件。
2.1.原代码
module.exports = {
// ...
rules: {
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'vue/custom-event-name-casing': 'off',
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^h$',
varsIgnorePattern: '^h$',
},
],
'no-unused-vars': [
'error',
{
argsIgnorePattern: '^h$',
varsIgnorePattern: '^h$',
},
],
'space-before-function-paren': 'off',
'vue/attributes-order': 'off',
'vue/one-component-per-file': 'off',
'vue/html-closing-bracket-newline': 'off',
'vue/max-attributes-per-line': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/singleline-html-element-content-newline': 'off',
'vue/attribute-hyphenation': 'off',
// 'vue/html-self-closing': 'off',
'vue/require-default-prop': 'off',
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'never',
component: 'always',
},
svg: 'always',
math: 'always',
},
],
},
};
2.2.带注解代码
module.exports = {
// ...
rules: {
// ↓禁止使用@ts-ignore来消除ESLint检查
'@typescript-eslint/ban-ts-ignore': 'off',
// ↓在函数和类方法上需要显式的返回类型
'@typescript-eslint/explicit-function-return-type': 'off',
// ↓禁止使用any类型
'@typescript-eslint/no-explicit-any': 'off',
// ↓除导入语句外，禁止使用require语句
'@typescript-eslint/no-var-requires': 'off',
// ↓禁止使用空函数
'@typescript-eslint/no-empty-function': 'off',
// ↓对自定义事件名称强制使用特定的大小写
'vue/custom-event-name-casing': 'off',
// ↓禁止定义前使用
'no-use-before-define': 'off',
// ↓在定义变量之前不允许使用变量
'@typescript-eslint/no-use-before-define': 'off',
// ↓禁止使用@ts-注解
'@typescript-eslint/ban-ts-comment': 'off',
// ↓禁止使用特定类型
'@typescript-eslint/ban-types': 'off',
// ↓禁止使用!后缀运算符进行非null断言
'@typescript-eslint/no-non-null-assertion': 'off',
// ↓在导出的函数和类的公共类方法上需要显式的返回值和参数类型
'@typescript-eslint/explicit-module-boundary-types': 'off',
// ↓禁止使用未使用的变量
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^h$',
varsIgnorePattern: '^h$',
},
],
// ↓禁止使用未使用的变量
'no-unused-vars': [
'error',
{
argsIgnorePattern: '^h$',
varsIgnorePattern: '^h$',
},
],
// ↓在函数括号前需要或不允许有空格
'space-before-function-paren': 'off',
// ↓强制属性顺序
'vue/attributes-order': 'off',
// ↓强制每个组件应位于其自己的文件中
'vue/one-component-per-file': 'off',
// ↓在标签的右括号之前要求或不允许换行
'vue/html-closing-bracket-newline': 'off',
// ↓强制每行的最大属性数
'vue/max-attributes-per-line': 'off',
// ↓在多行元素的内容之前和之后需要换行
'vue/multiline-html-element-content-newline': 'off',
// ↓在单行元素的内容之前和之后需要换行
'vue/singleline-html-element-content-newline': 'off',
// ↓在模板中的自定义组件上实施属性命名样式
'vue/attribute-hyphenation': 'off',
// ↓需要道具的默认值
'vue/require-default-prop': 'off',
// ↓实施自我封闭的风格
// 'vue/html-self-closing': 'off',
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'never',
component: 'always',
},
svg: 'always',
math: 'always',
},
],
},
};
上一章
第十章-安装eslint-plugin-prettier
下一章
第十二章-vben项目配置git忽略文件