ESlint Vue Plugin Rules

{
        /**
         * 支持在模版中使用 eslint-disable-next-line 等注釋
         * @category Enabling Correct ESLint Parsing
         */
        'vue/comment-directive': 'error',


        /**
         * 定義了的 jsx element 必須使用
         * @category Enabling Correct ESLint Parsing
         */
        'vue/jsx-uses-vars': 'error',


        /**
         * 計算屬性禁止包含異步方法
         * @category Error Prevention
         */
        'vue/no-async-in-computed-properties': 'error',


        /**
         * 禁止重復的二級鍵名
         * @category Error Prevention
         */
        'vue/no-dupe-keys': 'error',


        /**
         * 禁止出現重復的屬性
         * @category Error Prevention
         */
        'vue/no-duplicate-attributes': 'error',


        /**
         * 禁止出現語法錯誤
         * @category Error Prevention
         */
        'vue/no-parsing-error': 'error',


        /**
         * 禁止覆蓋保留字
         * @category Error Prevention
         */
        'vue/no-reserved-keys': 'error',


        /**
         * 組件的 data 屬性的值必須是一個函數
         * @category Error Prevention
         */
        'vue/no-shared-component-data': 'error',


        /**
         * 禁止在計算屬性中對屬性修改
         * @category Error Prevention
         * @reason 太嚴格了
         */
        'vue/no-side-effects-in-computed-properties': 'error',


        /**
         * 禁止 <template> 使用 key 屬性
         * @category Error Prevention
         * @reason 太嚴格了
         */
        'vue/no-template-key': 'error',


        /**
         * 禁止在 <textarea> 中出現 {{message}}
         * @category Error Prevention
         */
        'vue/no-textarea-mustache': 'error',


        /**
         * 禁止定義在 components 中的組件未使用
         * @category Error Prevention
         */
        'vue/no-unused-components': 'error',


        /**
         * 禁止模版中定義的變量未使用
         * @category Error Prevention
         */
        'vue/no-unused-vars': 'error',


        /**
         * 禁止在同一個元素上使用 v-if 和 v-for 指令
         * @category Error Prevention
         */
        'vue/no-use-v-if-with-v-for': 'error',


        /**
         * <component> 必須有 v-bind:is
         * @category Error Prevention
         */
        'vue/require-component-is': 'error',


        /**
         * props 的取值必須是構造函數
         * @category Error Prevention
         * @fixable
         */
        'vue/require-prop-type-constructor': 'error',


        /**
         * render 函數必須有返回值
         * @category Error Prevention
         */
        'vue/require-render-return': 'error',


        /**
         * v-for 指令的元素必須有 v-bind:key
         * @category Error Prevention
         */
        'vue/require-v-for-key': 'error',


        /**
         * prop 的默認值必須匹配它的類型
         * @category Error Prevention
         * @reason 太嚴格了
         */
        'vue/require-valid-default-prop': 'error',


        /**
         * 計算屬性必須有返回值
         * @category Error Prevention
         */
        'vue/return-in-computed-property': 'error',


        /**
         * 當一個節點上出現兩個 v-on:click 時,其中一個必須為 exact
         * @category Error Prevention
         */
        'vue/use-v-on-exact': 'error',


        /**
         * template 的根節點必須合法
         * @category Error Prevention
         */
        'vue/valid-template-root': 'error',


        /**
         * v-bind 指令必須合法
         * @category Error Prevention
         */
        'vue/valid-v-bind': 'error',


        /**
         * v-cloak 指令必須合法
         * @category Error Prevention
         */
        'vue/valid-v-cloak': 'error',


        /**
         * v-else 指令必須合法
         * @category Error Prevention
         */
        'vue/valid-v-else': 'error',


        /**
         * v-else-if 指令必須合法
         * @category Error Prevention
         */
        'vue/valid-v-else-if': 'error',


        /**
         * v-for 指令必須合法
         * @category Error Prevention
         */
        'vue/valid-v-for': 'error',


        /**
         * v-html 指令必須合法
         * @category Error Prevention
         */
        'vue/valid-v-html': 'error',


        /**
         * v-if 指令必須合法
         * @category Error Prevention
         */
        'vue/valid-v-if': 'error',


        /**
         * v-model 指令必須合法
         * @category Error Prevention
         */
        'vue/valid-v-model': 'error',


        /**
         * v-on 指令必須合法
         * @category Error Prevention
         */
        'vue/valid-v-on': 'error',


        /**
         * v-once 指令必須合法
         * @category Error Prevention
         */
        'vue/valid-v-once': 'error',


        /**
         * v-pre 指令必須合法
         * @category Error Prevention
         */
        'vue/valid-v-pre': 'error',


        /**
         * v-show 指令必須合法
         * @category Error Prevention
         */
        'vue/valid-v-show': 'error',


        /**
         * v-text 指令必須合法
         * @category Error Prevention
         */
        'vue/valid-v-text': 'error',


        /**
         * 限制自定義組件的屬性風格
         * @category Improving Readability
         * @reason 沒必要限制
         * @fixable
         */
        'vue/attribute-hyphenation': 'off',


        /**
         * 模版中開始標簽的反尖括號必須換行
         * @category Improving Readability
         * @fixable
         */
        'vue/html-closing-bracket-newline': 'error',


        /**
         * 模版中開始標簽的反尖括號前禁止有空格,自閉和標簽前必須有空格
         * @category Improving Readability
         * @fixable
         */
        'vue/html-closing-bracket-spacing': 'error',


        /**
         * html 的結束標簽必須符合規定
         * @category Improving Readability
         * @reason 有的標簽不必嚴格符合規定,如 <br> 或 <br/> 都應該是合法的
         * @fixable
         */
        'vue/html-end-tags': 'error',


        /**
         * 模版中使用 4 個空格縮進
         * @category Improving Readability
         * @fixable
         */
        'vue/html-indent': ['error', 4],


        /**
         * html 屬性值必須用雙引號括起來
         * @category Improving Readability
         */
        'vue/html-quotes': 'error',


        /**
         * 沒有內容時,組件必須自閉和
         * @category Improving Readability
         * @fixable
         */
        'vue/html-self-closing': 'error',


        /**
         * 限制每行允許的最多屬性數量
         * @category Improving Readability
         */
        'vue/max-attributes-per-line': ["error", {
            "singleline": 1,
            "multiline": {
                "max": 1,
                "allowFirstLine": false
            }
        }],


        /**
         * 多行內容或多行標簽時,內容前必須換行
         * @category Improving Readability
         * @fixable
         */
        'vue/multiline-html-element-content-newline': 'error',


        /**
         * 模版內 mustache 大括號內前后禁止有空格
         * @category Improving Readability
         * @fixable
         */
        'vue/mustache-interpolation-spacing': ['error', 'never'],


        /**
         * 限制組件的 name 屬性的值的風格
         * @category Improving Readability
         * @reason 沒必要限制
         * @fixable
         */
        'vue/name-property-casing': ["error", "PascalCase"],


        /**
         * 禁止出現連續空格
         * @category Improving Readability
         * @fixable
         */
        'vue/no-multi-spaces': 'error',


        /**
         * 屬性的等號前后禁止有空格
         * @category Improving Readability
         * @fixable
         */
        'vue/no-spaces-around-equal-signs-in-attribute': 'error',


        /**
         * 模版中的變量名禁止與前一個作用域重名
         * @category Improving Readability
         */
        'vue/no-template-shadow': 'off',


        /**
         * props 必須用駝峰式
         * @category Improving Readability
         * @fixable
         */
        'vue/prop-name-casing': 'off',


        /**
         * props 如果不是 required 的字段,必須有默認值
         * @category Improving Readability
         */
        'vue/require-default-prop': 'error',


        /**
         * prop 必須有類型限制
         * @category Improving Readability
         */
        'vue/require-prop-types': 'error',


        /**
         * 單行標簽內容必須換行
         * @category Improving Readability
         * @fixable
         */
        'vue/singleline-html-element-content-newline': 'error',


        /**
         * 限制 v-bind 的風格
         * @category Improving Readability
         * @fixable
         */
        'vue/v-bind-style': 'error',


        /**
         * 限制 v-on 的風格
         * @category Improving Readability
         * @fixable
         */
        'vue/v-on-style': 'error',


        /**
         * 標簽屬性必須按規則排序
         * @category Minimizing Arbitrary Choices and Cognitive Overhead
         * @fixable
         */
        'vue/attributes-order': 'error',


        /**
         * 禁用 v-html
         * @category Minimizing Arbitrary Choices and Cognitive Overhead
         */
        'vue/no-v-html': 'error',


        /**
         * 組件的屬性必須為一定的順序
         * @category Minimizing Arbitrary Choices and Cognitive Overhead
         */
        'vue/order-in-components': 'error',


        /**
         * 禁止在模版中用 this
         * @category Minimizing Arbitrary Choices and Cognitive Overhead
         */
        'vue/this-in-template': 'error',


        /**
         * 數組的括號內的前后禁止有空格
         * @category Uncategorized
         * @fixable
         */
        'vue/array-bracket-spacing': ['error', 'never'],


        /**
         * 箭頭函數的箭頭前后必須有空格
         * @category Uncategorized
         * @fixable
         */
        'vue/arrow-spacing': [
            'error',
            {
                before: true,
                after: true
            }
        ],


        /**
         * 代碼塊如果在一行內,那么大括號內的首尾必須有空格
         * @category Uncategorized
         * @fixable
         */
        'vue/block-spacing': ['error', 'always'],


        /**
         * if 與 else 的大括號風格必須一致
         * @category Uncategorized
         * @reason else 代碼塊可能前面需要有一行注釋
         * @fixable
         */
        'vue/brace-style': 'off',


        /**
         * 變量名必須是 camelcase 風格的
         * @category Uncategorized
         * @reason 很多 api 或文件名都不是 camelcase
         */
        'vue/camelcase': 'off',


        /**
         * 對象的最后一個屬性末尾必須有逗號
         * @category Uncategorized
         * @fixable
         */
        'vue/comma-dangle': 'off',


        /**
         * 約束自定義標簽的命名規則
         * @category Uncategorized
         * @fixable
         */
        'vue/component-name-in-template-casing': 'off',


        /**
         * 必須使用 === 或 !==,禁止使用 == 或 !=,與 null 比較時除外
         * @category Uncategorized
         * @fixable
         */
        'vue/eqeqeq': [
            'error',
            'always',
            {
                null: 'ignore'
            }
        ],


        /**
         * 對象字面量中冒號前面禁止有空格,后面必須有空格
         * @category Uncategorized
         * @fixable
         */
        'vue/key-spacing': [
            'error',
            {
                beforeColon: false,
                afterColon: true,
                mode: 'strict'
            }
        ],


        /**
         * 組件名稱必須和文件名一致
         * @category Uncategorized
         */
        'vue/match-component-file-name': 'off',


        /**
         * 禁止給布爾值 props 添加默認值
         * @category Uncategorized
         * @fixable
         */
        'vue/no-boolean-default': 'off',


        /**
         * 禁止使用特定的語法
         * @category Uncategorized
         * @reason 它用于限制某個具體的語法不能使用
         */
        'vue/no-restricted-syntax': 'off',


        /**
         * 對象字面量只有一行時,大括號內的首尾必須有空格
         * @category Uncategorized
         * @fixable
         */
        'vue/object-curly-spacing': [
            'error',
            'always',
            {
                arraysInObjects: true,
                objectsInObjects: false
            }
        ],


        /**
         * 禁止手動 export default
         * @category Uncategorized
         */
        'vue/require-direct-export': 'error',


        /**
         * 一個縮進必須用四個空格替代
         * @category Uncategorized
         */
        'vue/script-indent': [
            'error',
            4,
            {
                switchCase: 1
            }
        ],


        /**
         * 操作符左右必須有空格
         * @category Uncategorized
         * @fixable
         */
        'vue/space-infix-ops': 'error',


        /**
         * new, typeof 等后面必須有空格,++, -- 等禁止有空格
         * @category Uncategorized
         * @fixable
         */
        'vue/space-unary-ops': [
            'error',
            {
                words: true,
                nonwords: false
            }
        ],


        /**
         * 禁止在 v-on 的值中調用函數
         * @category Uncategorized
         * @fixable
         */
        'vue/v-on-function-call': 'error'
    }
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容