eslint-plugin-vue 的使用

💿 安装
通过vue-cli（推荐）：

vue add @vue/cli-plugin-eslint

通过npm安装 :

npm install --save-dev eslint eslint-plugin-vue

通过yarn安装：

yarn add -D eslint eslint-plugin-vue

环境要求：
ESLint v6.2.0 及以上
Node.js v12.22.x、v14.17.x、v16.x 及以上

📖用法

配置

在项目根目录创建.eslintrc.js
示例.eslintrc.js：

module.exports = {
  root: true,
  env: {
    node: true
  },

  extends: [
    'plugin:vue/strongly-recommended',
    '@vue/standard',
    '@vue/typescript/recommended'
  ],

  parserOptions: {
    ecmaVersion: 2020
  },

  rules: {
    'no-console': 'off', // 是否禁止使用 console.log()
    'no-debugger': 'off', // 是否禁止使用 debugger
    // 该规则强制在Vue模板的自定义组件上使用 连字符 列如：v-on  属性名称。
    'vue/attribute-hyphenation': 'warn',
    '@typescript-eslint/no-unused-vars': ['error',
      {
        // 该vars选项有两个设置：
        // all检查所有变量的使用情况，包括全局范围内的变量。这是默认设置。
        // local 只检查使用本地声明的变量，但将允许全局变量未被使用。
        vars: 'local',
        varsIgnorePattern: '^_'
      }
    ],
    // 强制属性的顺序
    'vue/attributes-order': 'off',
    // 该规则禁止在块元素的lang属性中使用应用程序中可用的语言以外的其他语言。
    'vue/block-lang': ['error',
      {
        script: {
          lang: ['ts', 'js']
        },
        style: {
          lang: ['less', 'sass', 'css']
        }
      }
    ],
    // 在打开块级标记之后和关闭块级标记之前强制换行
    'vue/block-tag-newline': ['error',
      {
        // 单行块的配置
        // consistent 每对标记使用一致的换行符。如果其中一个标签内部有换行符，而另一个标签没有换行符，则会报告错误。
        // always 要求在打开块标记之后和结束块标记之前有一个换行符。
        // never 禁止在开始块标记之后和结束块标记之前换行
        singleline: 'consistent',
        // 多行块的配置
        // consistent 要求对每对标记使用一致的换行符。如果其中一个标签内部有换行符，而另一个标签没有换行符，则会报告错误
        // always (默认值)要求在开始块标记之后和结束块标记之前有一个换行符。
        // never 禁止在开始块标记之后和结束块标记之前换行。
        multiline: 'consistent',
        // 指定允许的最大空行数。默认值0
        maxEmptyLines: 0,
        // 为每个块名称指定
        blocks: {
          template: {
            //  | "never" | "consistent" | "ignore",
            singleline: 'consistent',
            multiline: 'consistent',
            maxEmptyLines: 2
          },
          script: {
            singleline: 'consistent',
            multiline: 'consistent',
            maxEmptyLines: 2
          }
        }
      }
    ],
    // 该规则的唯一目的是在<template>和块级别提供eslint-disable功能。它支持使用以下注释:
    /// eslint-disable 禁用
    /// eslint-enable 开启 eslint-disable-line 禁用 eslint-disable-next-line 禁用
    'vue/comment-directive': ['error',
      {
        // eslint-disable HTML注释,没有开启该禁用的规则则报错
        reportUnusedDisableDirectives: true
      }
    ],
    // 该规则旨在使用于定义项目中Vue组件的API样式保持一致。
    'vue/component-api-style': ['error',
      [
        // 允许 《script setup>
        'script-setup',
        // 允许 组合式api https://vuejs.org/api/#composition-api
        'composition'
      ] // "script-setup", "composition", "composition-vue2", or "options"
    ],
    // 为组件定义名称大小写定义样式，以保持一致性。
    'vue/component-definition-name-casing': 'error',
    'vue/component-name-in-template-casing': 'warn',
    'vue/component-options-name-casing': 'warn',
    'vue/component-tags-order': 'warn',
    'vue/custom-event-name-casing': 'warn',
    'vue/experimental-script-setup-vars': 'error',
    'vue/first-attribute-linebreak': 'warn',
    'vue/html-button-has-type': 'warn',
    'vue/html-closing-bracket-newline': 'warn',
    'vue/html-closing-bracket-spacing': 'warn',
    'vue/html-comment-content-newline': 'warn',
    'vue/html-comment-content-spacing': 'warn',
    'vue/html-comment-indent': 'warn',
    'vue/html-end-tags': 'warn',
    'vue/html-indent': 'warn',
    'vue/html-quotes': 'warn',
    'vue/html-self-closing': 'warn',
    'vue/jsx-uses-vars': 'error',
    'vue/match-component-file-name': 'warn',
    'vue/max-attributes-per-line': 'warn',
    // 强制.vue文件中的最大行长度 默认是80
    'vue/max-len': ['error',
      {
        code: 85, // 强制最大行长度。默认80
        template: 100, // 强制<template>的最大行长度。默认值为code
        tabWidth: 2, // 指定制表符的字符宽度。默认值2
        comments: 100, // 强制注释的最大行长度。默认值为code
        ignorePattern: '', // 忽略匹配正则表达式的行。可以只匹配一行，需要双转义时写在YAML或JSON
        ignoreComments: false, // 如果为true，则忽略所有尾随的注释和该行上的注释。默认的false
        ignoreTrailingComments: false, //  如果为true，则只忽略后面的注释。默认的false
        ignoreUrls: false, // 如果为true，则忽略包含URL的行。默认的false
        ignoreStrings: true, // 忽略包含双引号或单引号字符串的行。默认的false
        ignoreTemplateLiterals: true, // 如果为true，则忽略包含<template>的行。默认：false
        ignoreRegExpLiterals: true, // 如果为true，则忽略包含RegExp<正则表达式>的行。默认：false
        ignoreHTMLAttributeValues: false, // 如果为true，则忽略包含HTML属性值的行。默认：false
        ignoreHTMLTextContents: true // 如果为true，忽略包含HTML文本内容的行。默认：false
      }
    ],
    'vue/multi-word-component-names': 'warn',
    'vue/multiline-html-element-content-newline': 'warn',
    'vue/mustache-interpolation-spacing': 'warn',
    'vue/name-property-casing': 'warn',
    'vue/new-line-between-multi-line-property': 'warn',
    'vue/next-tick-style': 'warn',
    'vue/no-arrow-functions-in-watch': 'error',
    'vue/no-async-in-computed-properties': 'error',
    // error  禁止在<template>中使用空字符串 已经关闭 对象中的配置不生效 用来参考设置为error的配置
    'vue/no-bare-strings-in-template': ['off',
      {
        // 允许的字符串
        allowlist: [
          '(', ')', ',', '.', '&', '+', '-', '=', '*', '/', '#', '%', '!', '?', ':', '[', ']', '{', '}', '<', '>', '\u00b7', '\u2022', '\u2010', '\u2013', '\u2014', '\u2212', '|'
        ],
        // 键是标记名称或模式的对象，值是用于检查标记名称的属性数组
        attributes: {
          '/.+/': ['title', 'aria-label', 'aria-placeholder', 'aria-roledescription', 'aria-valuetext'],
          input: ['placeholder'],
          img: ['alt']
        },
        // 用于检查字面值的指令名。
        directives: ['v-text']
      }
    ],
    'vue/no-boolean-default': 'error',
    'vue/no-child-content': 'error',
    'vue/no-computed-properties-in-data': 'error',
    'vue/no-confusing-v-for-v-if': 'error',
    'vue/no-custom-modifiers-on-v-model': 'warn',
    'vue/no-deprecated-data-object-declaration': 'error',
    'vue/no-deprecated-destroyed-lifecycle': 'error',
    'vue/no-deprecated-dollar-listeners-api': 'error',
    'vue/no-deprecated-dollar-scopedslots-api': 'error',
    'vue/no-deprecated-events-api': 'error',
    'vue/no-deprecated-filter': 'error',
    'vue/no-deprecated-functional-template': 'error',
    'vue/no-deprecated-html-element-is': 'error',
    'vue/no-deprecated-inline-template': 'error',
    'vue/no-deprecated-props-default-this': 'error',
    'vue/no-deprecated-router-link-tag-prop': 'error',
    'vue/no-deprecated-scope-attribute': 'error',
    'vue/no-deprecated-slot-attribute': 'error',
    'vue/no-deprecated-slot-scope-attribute': 'error',
    'vue/no-deprecated-v-bind-sync': 'error',
    'vue/no-deprecated-v-is': 'error',
    'vue/no-deprecated-v-on-native-modifier': 'error',
    'vue/no-deprecated-v-on-number-modifiers': 'error',
    'vue/no-deprecated-vue-config-keycodes': 'error',
    'vue/no-dupe-keys': 'error',
    'vue/no-dupe-v-else-if': 'error',
    'vue/no-duplicate-attr-inheritance': 'error',
    'vue/no-duplicate-attributes': 'error',
    // 禁止<template> <script> <style>块为空
    'vue/no-empty-component-block': 'off',
    // 不允许在<script setup> 导出
    'vue/no-export-in-script-setup': 'error',
    'vue/no-expose-after-await': 'error',
    'vue/no-invalid-model-keys': 'error',
    'vue/no-irregular-whitespace': 'error',
    'vue/no-lifecycle-after-await': 'error',
    'vue/no-lone-template': 'error',
    'vue/no-multi-spaces': 'error',
    'vue/no-multiple-objects-in-class': 'error',
    'vue/no-multiple-slot-args': 'error',
    // 不允许在模板中添加多个根节点
    'vue/no-multiple-template-root': 'off',
    'vue/no-mutating-props': 'error',
    'vue/no-parsing-error': 'error',
    'vue/no-potential-component-option-typo': 'error',
    'vue/no-ref-as-operand': 'error',
    'vue/no-reserved-component-names': 'error',
    'vue/no-reserved-keys': 'error',
    'vue/no-reserved-props': 'error',
    'vue/no-restricted-block': 'error',
    'vue/no-restricted-call-after-await': 'error',
    'vue/no-restricted-class': 'error',
    'vue/no-restricted-component-options': 'error',
    'vue/no-restricted-custom-event': 'error',
    'vue/no-restricted-html-elements': 'error',
    'vue/no-restricted-props': 'error',
    'vue/no-restricted-static-attribute': 'error',
    'vue/no-restricted-v-bind': 'error',
    'vue/no-setup-props-destructure': 'error',
    'vue/no-shared-component-data': 'error',
    'vue/no-side-effects-in-computed-properties': 'error',
    'vue/no-spaces-around-equal-signs-in-attribute': 'error',
    'vue/no-static-inline-styles': 'error',
    'vue/no-template-key': 'error',
    'vue/no-template-shadow': 'error',
    // 不允许target=“_blank”属性不带rel=“noopener noreferrer”
    'vue/no-template-target-blank': ['error',
      {
        allowReferrer: true, // 如果为true，则不需要noreferrer。默认false
        // never | always; 如果always，如果href是一个动态链接则强制执行该规则。缺省总是
        enforceDynamicLinks: 'always'
      }
    ],
    'vue/no-textarea-mustache': 'error',
    'vue/no-this-in-before-route-enter': 'error',
    // 组件已被使用，但尚未定义
    'vue/no-undef-components': 'off',
    'vue/no-undef-properties': 'error',
    // 禁止在模板中使用未注册的组件
    'vue/no-unregistered-components': ['error',
      {
        // 如果组件名称匹配一个或多个模式，则抑制所有错误。
        ignorePatterns: []
      }
    ],
    'vue/no-unsupported-features': 'error',
    'vue/no-unused-components': 'error',
    'vue/no-unused-properties': 'error',
    'vue/no-unused-refs': 'error',
    // 禁止v-for指令或作用域属性中未使用的变量定义
    // TODO 好像这个设置不生效 不行设置这个 @typescript-eslint/no-unused-vars
    'vue/no-unused-vars': ['error',
      {
        // 当v-for指令或范围属性的定义与你的ignorePattern正则表达式匹配时，
        // 禁用报告。默认为空，将忽略任何内容
        ignorePattern: '^_'
      }
    ],
    'vue/no-use-computed-property-like-method': 'error',
    'vue/no-use-v-if-with-v-for': 'error',
    'vue/no-useless-mustaches': 'error',
    'vue/no-useless-template-attributes': 'error',
    'vue/no-useless-v-bind': 'error',
    'vue/no-v-for-template-key-on-child': 'error',
    'vue/no-v-for-template-key': 'error',
    'vue/no-v-html': 'error',
    'vue/no-v-model-argument': 'error',
    'vue/no-v-text-v-html-on-component': 'error',
    'vue/no-v-text': 'error',
    'vue/no-watch-after-await': 'error',
    'vue/one-component-per-file': 'error',
    'vue/order-in-components': 'error',
    'vue/padding-line-between-blocks': 'error',
    'vue/prefer-import-from-vue': 'error',
    'vue/prefer-prop-type-boolean-first': 'error',
    'vue/prefer-separate-static-class': 'error',
    'vue/prefer-true-attribute-shorthand': 'error',
    'vue/prop-name-casing': 'error',
    'vue/require-component-is': 'error',
    'vue/require-default-prop': 'error',
    // 要求直接导出组件
    'vue/require-direct-export': ['off', {
      //  如果为true，则不允许Vue 3.x中使用组合函数。默认 false
      disallowFunctionalComponentFunction: false
    }],
    'vue/require-emit-validator': 'error',
    'vue/require-explicit-emits': 'error',
    'vue/require-expose': 'error',
    'vue/require-name-property': 'error',
    'vue/require-prop-type-constructor': 'error',
    'vue/require-prop-types': 'error',
    'vue/require-render-return': 'error',
    'vue/require-slots-as-functions': 'error',
    'vue/require-toggle-inside-transition': 'error',
    'vue/require-v-for-key': 'error',
    'vue/require-valid-default-prop': 'error',
    'vue/return-in-computed-property': 'error',
    'vue/return-in-emits-validator': 'error',
    'vue/script-indent': 'error',
    'vue/script-setup-uses-vars': 'error',
    'vue/singleline-html-element-content-newline': 'error',
    'vue/sort-keys': 'off',
    'vue/static-class-names-order': 'error',
    'vue/this-in-template': 'error',
    'vue/use-v-on-exact': 'error',
    'vue/v-bind-style': 'warn',
    'vue/v-for-delimiter-style': 'warn',
    'vue/v-on-event-hyphenation': 'warn',
    'vue/v-on-function-call': 'error',
    'vue/v-on-style': 'error',
    'vue/v-slot-style': 'error',
    'vue/valid-define-emits': 'error',
    'vue/valid-define-props': 'error',
    'vue/valid-next-tick': 'error',
    'vue/valid-template-root': 'error',
    'vue/valid-v-bind-sync': 'error',
    'vue/valid-v-bind': 'error',
    'vue/valid-v-cloak': 'error',
    'vue/valid-v-else-if': 'warn',
    'vue/valid-v-else': 'warn',
    'vue/valid-v-for': 'error',
    'vue/valid-v-html': 'error',
    'vue/valid-v-if': 'error',
    'vue/valid-v-is': 'error',
    'vue/valid-v-memo': 'error',
    'vue/valid-v-model': 'error',
    'vue/valid-v-on': 'error',
    'vue/valid-v-once': 'error',
    'vue/valid-v-pre': 'warn',
    'vue/valid-v-show': 'warn',
    'vue/valid-v-slot': 'warn',
    'vue/valid-v-text': 'warn'
  }
}