Skip to content

ESLint 配置规则

配置规则

官方规则参考

https://eslint.nodejs.cn/docs/latest/rules/

配置文件中的 extends 字段主要是用来继承其他的规范,例如 standardairbnb 等。当然你也可以通过 rules 属性在这些继承的规范基础上进行修改,它会覆盖掉原有的规则。

注意

当你使用 extends 继承主流的规范时,请记得要安装对应的模块,否则不会生效。

常用规则

以下是博主比较常用的规则,在 Vue3.0 + TypeScript 项目中使用,仅供参考。

json
{
    /**
     * 规则继承,顺序不可进行调整
     */
    "extends": ["standard", "plugin:vue/vue3-recommended", "plugin:vue/vue3-essential", "@vue/typescript/recommended"],
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "rules": {
        /**
         * 类型定义符号后面需要统一空格
         */
        "@typescript-eslint/type-annotation-spacing": [
            "error",
            {
                "before": false,
                "after": true
            }
        ],

        /**
         * vue 文件名称为多个单词,不校验
         */
        "vue/multi-word-component-names": ["error", { "ignores": ["index"] }],

        /**
         * vue 代码缩进 4 个空格
         */
        "vue/html-indent": ["error", 4],

        /**
         * vue 单行属性数量
         */
        "vue/max-attributes-per-line": [
            "error",
            {
                "singleline": 10
            }
        ],

        /**
         * vue 单个节点不换行
         */
        "vue/singleline-html-element-content-newline": ["off"],

        /**
         * vue 组件调用命名,小写横杆
         */
        "vue/component-name-in-template-casing": [
            "error",
            "kebab-case",
            {
                "registeredComponentsOnly": false,
                "ignores": []
            }
        ],

        /**
         * vue 不允许使用静态 style
         */
        "vue/no-static-inline-styles": [
            "error",
            {
                "allowBinding": true
            }
        ],

        /**
         * vue 不允许使用未定义的组件,全局组件除外
         */
        "vue/no-undef-components": [
            "error",
            {
                "ignorePatterns": ["el(\\-\\w+)+", "app(\\-\\w+)+", "router-view"]
            }
        ],

        /**
         * vue <template> <script> <style> 之间要有换行
         */
        "vue/padding-line-between-blocks": ["error", "always"],

        /**
         * vue 多个子标签之间要有换行
         */
        "vue/padding-line-between-tags": ["error", [{ "blankLine": "always", "prev": "*", "next": "*" }]],

        /**
         * vue 使用宏 define 定义的变量命名必须遵循规范
         */
        "vue/require-macro-variable-name": [
            "error",
            {
                "defineProps": "props",
                "defineEmits": "emit",
                "defineSlots": "slots",
                "useSlots": "slots",
                "useAttrs": "attrs"
            }
        ],

        /**
         * 缩进空格
         */
        "indent": ["error", 4],

        /**
         * 最高代码行数
         */
        "max-lines": ["error", { "max": 500 }],

        /**
         * 导入排序
         */
        "sort-imports": [
            "error",
            {
                "ignoreCase": false,
                "ignoreDeclarationSort": true,
                "ignoreMemberSort": false,
                "memberSyntaxSortOrder": ["all", "single", "multiple", "none"],
                "allowSeparatedGroups": false
            }
        ],

        /**
         * 注释间隔
         */
        "spaced-comment": ["error", "always", { "markers": ["/"] }],

        /**
         * 注释换行
         */
        "lines-around-comment": [
            "error",
            {
                "beforeBlockComment": true,
                "beforeLineComment": true
            }
        ],

        /**
         * 不允许块内有多余的换行,关闭校验
         */
        "padded-blocks": ["off"],

        /**
         * 不可对函数参数进行原数据修改
         */
        "no-param-reassign": ["error", { "props": true }]
    }
}
{
    /**
     * 规则继承,顺序不可进行调整
     */
    "extends": ["standard", "plugin:vue/vue3-recommended", "plugin:vue/vue3-essential", "@vue/typescript/recommended"],
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "rules": {
        /**
         * 类型定义符号后面需要统一空格
         */
        "@typescript-eslint/type-annotation-spacing": [
            "error",
            {
                "before": false,
                "after": true
            }
        ],

        /**
         * vue 文件名称为多个单词,不校验
         */
        "vue/multi-word-component-names": ["error", { "ignores": ["index"] }],

        /**
         * vue 代码缩进 4 个空格
         */
        "vue/html-indent": ["error", 4],

        /**
         * vue 单行属性数量
         */
        "vue/max-attributes-per-line": [
            "error",
            {
                "singleline": 10
            }
        ],

        /**
         * vue 单个节点不换行
         */
        "vue/singleline-html-element-content-newline": ["off"],

        /**
         * vue 组件调用命名,小写横杆
         */
        "vue/component-name-in-template-casing": [
            "error",
            "kebab-case",
            {
                "registeredComponentsOnly": false,
                "ignores": []
            }
        ],

        /**
         * vue 不允许使用静态 style
         */
        "vue/no-static-inline-styles": [
            "error",
            {
                "allowBinding": true
            }
        ],

        /**
         * vue 不允许使用未定义的组件,全局组件除外
         */
        "vue/no-undef-components": [
            "error",
            {
                "ignorePatterns": ["el(\\-\\w+)+", "app(\\-\\w+)+", "router-view"]
            }
        ],

        /**
         * vue <template> <script> <style> 之间要有换行
         */
        "vue/padding-line-between-blocks": ["error", "always"],

        /**
         * vue 多个子标签之间要有换行
         */
        "vue/padding-line-between-tags": ["error", [{ "blankLine": "always", "prev": "*", "next": "*" }]],

        /**
         * vue 使用宏 define 定义的变量命名必须遵循规范
         */
        "vue/require-macro-variable-name": [
            "error",
            {
                "defineProps": "props",
                "defineEmits": "emit",
                "defineSlots": "slots",
                "useSlots": "slots",
                "useAttrs": "attrs"
            }
        ],

        /**
         * 缩进空格
         */
        "indent": ["error", 4],

        /**
         * 最高代码行数
         */
        "max-lines": ["error", { "max": 500 }],

        /**
         * 导入排序
         */
        "sort-imports": [
            "error",
            {
                "ignoreCase": false,
                "ignoreDeclarationSort": true,
                "ignoreMemberSort": false,
                "memberSyntaxSortOrder": ["all", "single", "multiple", "none"],
                "allowSeparatedGroups": false
            }
        ],

        /**
         * 注释间隔
         */
        "spaced-comment": ["error", "always", { "markers": ["/"] }],

        /**
         * 注释换行
         */
        "lines-around-comment": [
            "error",
            {
                "beforeBlockComment": true,
                "beforeLineComment": true
            }
        ],

        /**
         * 不允许块内有多余的换行,关闭校验
         */
        "padded-blocks": ["off"],

        /**
         * 不可对函数参数进行原数据修改
         */
        "no-param-reassign": ["error", { "props": true }]
    }
}