Vue的ESLint-stylelint-prettier联合配置

.eslintrc.js 配置

module.exports = {
  // 环境
  env: {
    browser: true,
    // es2021: true,
    es6: true,
    commonjs: true,
    node: true,
  },
  // 配置解析器
  parserOptions: {
    ecmaVersion: 12,
    parser: 'babel-eslint',
  },
   // 配置扩展
 extends: [
    // eslint推荐规则
    'eslint:recommended',
    // 标准js规则
    'standard',
    // vue eslint 基本规则
    'plugin:vue/base',
    // Vue eslint A级推荐规则预设
    'plugin:vue/essential',
    // Vue eslint B级推荐规则预设
    'plugin:vue/strongly-recommended',
    // Vue eslint C级推荐规则预设
    'plugin:vue/recommended',
  ],
  // 允许的全局变量预设
  globals: {
    // 如 lodash
    _: true,
  },
  // 这里可以设置规则：
  // "off" or 0 - 关闭规则
  // "warn" or 1 - 将规则作为警告打开（不影响退出代码）
  // "error" or 2 - 将规则作为错误打开（退出代码为1）
  rules: {
    'vue/max-attributes-per-line': [
      'error',
      {
        singleline: 3,
        multiline: {
          max: 1,
          allowFirstLine: false,
        },
      },
    ],
  }
 }

.stylelintrc.js 配置

注意选择stylelint @13.13.1，14版本需要postcss 等依赖，以下配置无法直接生效

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-standard-scss',
    'stylelint-config-idiomatic-order',
  ],
  plugins: ['stylelint-order'],
  rules: {
    indentation: 2,
    'unit-case': null,
    'no-empty-source': null,
    // 如果是小程序允许rpx
    // 'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
    // 'selector-type-no-unknown': [true, { ignoreTypes: ['page'] }],
    'property-no-vendor-prefix': [
      true,
      { ignoreProperties: ['background-clip'] },
    ],
    'number-leading-zero': 'never',
  },
}

.prettierrc 配置

module.exports = {
  printWidth: 80, // 超过最大值换行
  tabWidth: 2, // 缩进字节数
  useTabs: false, // 缩进不使用tab，使用空格
  semi: false, // 句尾添加分号
  singleQuote: true, // 使用单引号代替双引号
  proseWrap: 'preserve', // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  arrowParens: 'avoid', //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  endOfLine: 'auto', // 结尾是 \n \r \n\r auto
  htmlWhitespaceSensitivity: 'ignore',
  ignorePath: '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行
  jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
  requireConfig: false, // Require a 'prettierconfig' to format prettier
  trailingComma: 'all', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
}

settings.json 配置

{
  "editor.tabSize": 2,
  // 自动修复所有文件
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // 格式化工具
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 文件关联
  "files.associations": {
    "*.cjson": "jsonc"
  },

eslint-plugin-vue 可用规则

Base Rules

（启用正确的ESLint解析）

执行此类别中的所有规则，以及所有更高优先级的规则，使用以下扩展：

{
  "extends": "plugin:vue/base"
}

Rule ID	Description 描述
vue/comment-directive	支持< template >中的注释指令
vue/experimental-script-setup-vars	防止在< script setup >中定义的变量被标记为未定义
vue/jsx-uses-vars	防止JSX中使用的变量被标记为未使用

Priority A: Essential (Vue3.x)

（错误预防）for Vue.js 3.x

执行此类别中的所有规则，以及所有更高优先级的规则，使用以下扩展：

{
  "extends": "plugin:vue/vue3-essential"
}

Rule ID	Description	fix
vue/custom-event-name-casing	强制自定义事件名称始终使用kebab-case(短横线命名) 在JavaScript中，事件名永远不会用作变量或属性名，因此没有理由使用camelCase或PascalCase。此外，DOM模板中的v-on事件侦听器将自动转换为小写（由于HTML的大小写不敏感）
vue/custom-event-name-casing	不允许使用箭头函数定义观察者
vue/no-async-in-computed-properties	在计算属性中不允许异步操作
vue/no-deprecated-data-object-declaration	data不允许使用对象声明，只能是方法data(){return {foo:null}}（Vue.js版3.0.0+）	🔧
vue/no-deprecated-destroyed-lifecycle	不允许使用已弃用的 destroyed 和 beforeDestroy 生命周期挂钩（Vue.js版3.0.0+）
vue/no-deprecated-dollar-listeners-api	不允许使用已弃用的 $listeners（Vue.js版3.0.0+）
vue/no-deprecated-dollar-scopedslots-api	不允许使用不推荐使用的 $scopedSlots（Vue.js版3.0.0+）	🔧
vue/no-deprecated-events-api	不允许使用已弃用的事件api（Vue.js版3.0.0+）
vue/no-deprecated-filter	不允许使用已弃用的筛选器语法（Vue.js版3.0.0+）
vue/no-deprecated-functional-template	不允许使用不推荐使用的 functional 模板（中Vue.js版3.0.0+）
vue/no-deprecated-html-element-is	不允许在HTML元素（中）上使用已弃用的 is 属性(Vue.js版3.0.0+）
vue/no-deprecated-inline-template	不允许使用不推荐使用的内联模板 inline-template 属性（Vue.js版3.0.0+）
vue/no-deprecated-props-default-this	不允许在 props default 中使用 this
vue/no-deprecated-scope-attribute	不允许使用已弃用的 scope 属性（中Vue.js版2.5.0+）	🔧
vue/no-deprecated-slot-attribute	不允许不推荐使用的 slot 属性（在Vue.js版2.6.0+）	🔧
vue/no-deprecated-slot-scope-attribute	不允许不推荐使用的 slot-scope 属性（在Vue.js版2.6.0+）	🔧
vue/no-deprecated-v-bind-sync	不允许在 v-bind 指令上使用已弃用的*.sync* 修饰符(Vue.js版3.0.0+）	🔧
vue/no-deprecated-v-on-native-modifier	不允许使用已弃用的 .native 修饰符（Vue.js版3.0.0+）
vue/no-deprecated-v-on-number-modifiers	不允许使用不推荐使用的数字（keycode）修饰符（Vue.js版3.0.0+）	🔧
vue/no-deprecated-vue-config-keycodes	不允许使用已弃用Vue.config.keyCodes（Vue.js版3.0.0+）
vue/no-dupe-keys	不允许重复字段名
vue/no-dupe-v-else-if	在 v-if/v-else-if 链中不允许重复条件
vue/no-duplicate-attributes	不允许重复属性
vue/no-lifecycle-after-await	不允许异步注册的生命周期钩子
vue/no-mutating-props	不允许直接修改组件 props 的值
vue/no-parsing-error	不允许在 < template > 中出现解析错误
vue/no-ref-as-operand	不允许使用ref()(复合API)包装的值作为操作数
vue/no-reserved-keys	不允许覆盖保留键
vue/no-setup-props-destructure	不允许破坏传递给设置的道具
vue/no-shared-component-data	将组件的数据属性强制为函数	🔧
vue/no-side-effects-in-computed-properties	不允许在计算属性中出现副作用
vue/no-template-key	在 < template > 上禁用键属性
vue/no-textarea-mustache	在 < textarea > 中不允许存在标签内容
vue/no-unused-components	不允许注册模板中未使用的组件
vue/no-unused-vars	不允许v-for指令或范围属性的未使用变量定义
vue/no-use-v-if-with-v-for	不允许在与v-for相同的元素上使用v-if
vue/no-v-for-template-key-on-child	不允许在子元素上放置 < template v-for > 的键
vue/no-watch-after-await	不允许异步注册的监视
vue/require-component-is	< component > is 属性只能动态绑定=> v-bind:is
vue/require-prop-type-constructor	需要prop类型为构造函数	🔧
vue/require-render-return	强制 render 函数始终返回值
vue/require-slots-as-functions	强制将$slot的属性作为函数使用
vue/require-toggle-inside-transition	需要控制< transition >内内容的显示
vue/require-v-for-key	需要v-bind:键与v-for指令
vue/require-valid-default-prop	强制props默认值是有效的
vue/return-in-computed-property	强制return语句出现在computed属性中
vue/return-in-emits-validator	强制在发出验证器中存在一个返回语句
vue/use-v-on-exact	在v-on上强制使用exact修饰符
vue/valid-template-root	强制有效的root模板
vue/valid-v-bind	执行有效的v-bind指令
vue/valid-v-cloak	执行有效的v-cloak指令
vue/valid-v-else-if	执行有效的v-else-if指令
vue/valid-v-else	执行有效的v-else指令
vue/valid-v-for	执行有效的v-cloak指令
vue/valid-v-html	执行有效的v-cloak指令
vue/valid-v-if	执行有效的v-if指令指令
vue/valid-v-is	执行有效的v-is指令
vue/valid-v-model	执行有效的v-mode指令
vue/valid-v-on	执行有效的v-on指令
vue/valid-v-once	执行有效的v-once指令
vue/valid-v-pre	执行有效的v-pre指令
vue/valid-v-show	执行有效的v-show指令
vue/valid-v-slot	执行有效的v-slot指令
vue/valid-v-text	执行有效的v-text指令

Priority B: Strongly Recommended (Vue3.x)

（提高可读性）for Vue.js 3.x

执行此类别中的所有规则，以及所有更高优先级的规则，使用以下扩展：

{
  "extends": "plugin:vue/vue3-strongly-recommended"
} 

Rule ID	Description	fix
vue/attribute-hyphenation	在模板中的自定义组件上执行属性命名样式	🔧
vue/component-definition-name-casing	为组件定义名称执行特定的name	🔧
vue/html-closing-bracket-newline	要求或不允许在标记的结束括号之前有换行符	🔧
vue/html-closing-bracket-spacing	要求或不允许在标签的右括号前加空格	🔧
vue/html-end-tags	加强结束标签样式	🔧
vue/html-indent	在< template >中执行一致的缩进	🔧
vue/html-quotes	强制HTML属性的引号样式	🔧
vue/html-self-closing	执行自闭的风格	🔧
vue/max-attributes-per-line	强制执行每行的最大属性数	🔧
vue/multiline-html-element-content-newline	在多行元素的内容之前和之后需要换行	🔧
vue/mustache-interpolation-spacing	在{{ value }}插值中加强统一的间距	🔧
vue/no-multi-spaces	不允许多个空格	🔧
vue/no-spaces-around-equal-signs-in-attribute	不允许在属性的等号周围有空格	🔧
vue/no-template-shadow	不允许对在外部范围中声明的变量进行隐藏
vue/one-component-per-file	强制每个组件都应该在单独的文件中
vue/prop-name-casing	强制在Vue组件中props使用camelCase命名规则。
vue/require-default-prop	props 需要默认值
vue/require-explicit-emits	由$emit()触发的事件名称需要定义在emits:[]选项中
vue/require-prop-types	需要在props中定义类型
vue/singleline-html-element-content-newline	强制在单行元素的内容之前和之后使用换行符	🔧
vue/v-bind-style	规定v-bind的写法（简写:key=“value”）	🔧
vue/v-on-style	规定v-on的写法（简写@click=“event”）	🔧
vue/v-slot-style	规定v-slot的写法	🔧

Priority C: Recommended (Vue3.x)

（尽量减少任意选择和认知开销）for Vue.js 3.x

执行此类别中的所有规则，以及所有更高优先级的规则，使用以下扩展：

{
  "extends": "plugin:vue/vue3-recommended"
} 

Rule ID	Description	fix
vue/attributes-order	强制属性的顺序	🔧
vue/component-tags-order	强制组件顶层元素的顺序
vue/no-lone-template	禁止不必要的< template >
vue/no-multiple-slot-args	不允许向范围限定的槽传递多个参数
vue/no-v-html	不允许使用v-html来防止跨站攻击XSS
vue/order-in-components	强制组件中的属性顺序	🔧
vue/this-in-template	不允许在模板中使用this

Priority A: Essential (Vue2.x)

（错误预防）for Vue.js 2.x

执行此类别中的所有规则，以及所有更高优先级的规则，使用以下扩展：

{
  "extends": "plugin:vue/essential"
}

Rule ID	Description	fix
vue/custom-event-name-casing	执行自定义事件名称时始终使用 “kebab-case” 的命名方式
vue/no-arrow-functions-in-watch	不允许使用箭头函数来定义观察者
vue/no-async-in-computed-properties	在计算属性中不允许异步操作
vue/no-custom-modifiers-on-v-model	不允许在组件上使用v-model上的自定义修饰符
vue/no-dupe-keys	不允许重复字段名
vue/no-dupe-v-else-if	不允许在v-if / v-else-if链中出现重复条件
vue/no-duplicate-attributes	不允许重复属性
vue/no-multiple-template-root	不允许向模板添加多个根节点
vue/no-mutating-props	不允许组件props的突变
vue/no-parsing-error	不允许在< template >中出现解析错误
vue/no-reserved-keys	不允许覆盖保留键
vue/no-shared-component-data	将组件的数据属性强制为函数 🔧
vue/no-side-effects-in-computed-properties	不允许在计算属性中出现副作用
vue/no-template-key	在< template >上禁用键属性
vue/no-textarea-mustache	在< textarea >中不允许有inner
vue/no-unused-components	不允许注册模板中未使用的组件
vue/no-unused-vars	不允许v-for指令或范围属性的未使用变量定义
vue/no-use-v-if-with-v-for	不允许在与v-for相同的元素上使用v-if
vue/no-v-for-template-key	在< template v-for >上禁用键属性
vue/no-v-model-argument	不允许向自定义组件中使用的 v-model 添加参数
vue/require-component-is	需要v-bind:is 是< component >元素的
vue/require-prop-type-constructor	需要prop类型为构造函数🔧
vue/require-render-return	强制呈现函数始终返回值
vue/require-v-for-key	需要v-bind:key与v-for指令
vue/require-valid-default-prop	强制props默认值是有效的
vue/return-in-computed-property	强制return语句出现在computed属性中
vue/use-v-on-exact	在v-on上强制使用精确修饰符
vue/valid-template-root	强制有效的模板根
vue/valid-v-bind-sync	在v-bind指令上执行有效的.sync修饰符
vue/valid-v-bind	执行有效的v-bind指令
vue/valid-v-cloak	执行有效的v-cloak指令
vue/valid-v-else-if	执行有效的v-else-if指令
vue/valid-v-else	强制有效的v-else指令
vue/valid-v-for	执行有效的v-for指令
vue/valid-v-html	执行有效的v-html指令
vue/valid-v-if	执行有效的 v-if 指令
vue/valid-v-model	执行有效的 v-model 指令
vue/valid-v-on	执行有效的 v-on 指令
vue/valid-v-once	执行有效的 v-once 指令
vue/valid-v-pre	执行有效的 v-pre 指令
vue/valid-v-show	执行有效的 v-show 指令
vue/valid-v-slot	执行有效的 v-slot 指令
vue/valid-v-text	执行有效的 v-text 指令

Priority B: Strongly Recommended (Vue2.x)

（提高可读性）for Vue.js 2.x

执行此类别中的所有规则，以及所有更高优先级的规则，使用以下扩展：

{
  "extends": "plugin:vue/strongly-recommended"
} 

Rule ID	Description	fix
vue/attribute-hyphenation	在模板中的自定义组件上执行属性命名样式	🔧
vue/component-definition-name-casing	为组件定义名称执行特定的name	🔧
vue/html-closing-bracket-newline	要求或不允许在标记的结束括号之前有换行符	🔧
vue/html-closing-bracket-spacing	要求或不允许在标签的右括号前加空格	🔧
vue/html-end-tags	加强结束标签样式	🔧
vue/html-indent	在< template >中执行一致的缩进	🔧
vue/html-quotes	强制HTML属性的引号样式	🔧
vue/html-self-closing	执行自闭的风格	🔧
vue/max-attributes-per-line	强制执行每行的最大属性数	🔧
vue/multiline-html-element-content-newline	在多行元素的内容之前和之后需要换行	🔧
vue/mustache-interpolation-spacing	在inner插值中加强统一的间距	🔧
vue/no-multi-spaces	不允许多个空格	🔧
vue/no-spaces-around-equal-signs-in-attribute	不允许在属性的等号周围有空格	🔧
vue/no-template-shadow	不允许对在外部范围中声明的变量进行隐藏
vue/one-component-per-file	强制每个组件都应该在自己的文件中
vue/prop-name-casing	在Vue组件中为道具名称执行特定的name
vue/require-default-prop	props需要默认值
vue/require-prop-types	需要在props中定义类型
vue/singleline-html-element-content-newline	在单行元素的内容之前和之后需要换行	🔧
vue/v-bind-style	执行v-bind指令样式	🔧
vue/v-on-style	执行v-on指令样式	🔧
vue/v-slot-style	强制v-槽指令样式	🔧

Priority C: Recommended (Vue2.x)

（尽量减少任意选择和认知开销）for Vue.js 2.x

执行此类别中的所有规则，以及所有更高优先级的规则，使用以下扩展：

{
  "extends": "plugin:vue/recommended"
} 

Rule ID	Description	fix
vue/attributes-order	强制属性的顺序	🔧
vue/component-tags-order	强制组件顶层元素的顺序
vue/no-lone-template	不允许不必要的< template >
vue/no-multiple-slot-args	不允许向范围限定的槽传递多个参数
vue/no-v-html	不允许使用v-html来防止跨站攻击
vue/order-in-components	强制组件中的属性顺序强制组件中的属性顺序	🔧
vue/this-in-template	不允许在模板中使用this

Uncategorized

没有预设可启用此类别中的规则。如果你想，请启用每个规则。

For example:：

{
  "rules": {
    "vue/block-tag-newline": "error"
  }
}

Rule ID	Description	fix
vue/block-tag-newline	在打开块级标记之后和关闭块级标记之前强制换行	🔧
vue/component-name-in-template-casing	在模板中为组件命名样式执行特定的name	🔧
vue/html-comment-content-newline	在HTML注释中执行统一的行注释	🔧
vue/html-comment-content-spacing	在HTML注释中执行统一的间距	🔧
vue/html-comment-indent	在HTML注释中执行一致的缩进	🔧
vue/match-component-file-name	要求组件名称属性匹配其文件名
vue/no-bare-strings-in-template	不允许在< template >中使用裸字符串
vue/no-boolean-default	disallow boolean defaults	🔧
vue/no-duplicate-attr-inheritance	当使用v-bind="$attrs"时，强制将inheritAttrs设置为false
vue/no-empty-component-block	不允许< template > < script > < style >块为空
vue/no-multiple-objects-in-class	不允许将多个对象传入数组到类
vue/no-potential-component-option-typo	不允许组件属性中可能出现的输入错误
vue/no-reserved-component-names	不允许在组件定义中使用保留名称
vue/no-restricted-component-options	不允许特定组件选项
vue/no-restricted-static-attribute	不允许特定属性
vue/no-restricted-v-bind	在v-bind中不允许特定的参数
vue/no-static-inline-styles	不允许静态内联样式属性
vue/no-template-target-blank	不允许目标="_blank"属性没有rel=“noopener noreferrer”
vue/no-unregistered-components	不允许使用未在模板中注册的组件
vue/no-unsupported-features	不允许指定版本上不支持的Vuei .js语法	🔧
vue/no-unused-properties	不允许未使用的属性
vue/no-useless-mustaches	不允许不必要的 inner 插入	🔧
vue/no-useless-v-bind	不允许不必要的v-bind指令	🔧
vue/padding-line-between-blocks	r设置或不允许块之间的填充线	🔧
vue/require-direct-export	要求直接导出组件
vue/require-name-property	在Vue组件中需要名称属性
vue/script-indent	在< script >中执行一致的缩进	🔧
vue/sort-keys	以与组件内订单兼容的方式强制执行排序键
vue/static-class-names-order	执行静态类名顺序	🔧
vue/v-for-delimiter-style	强制v-for指令的分隔符样式	🔧
vue/v-on-function-call	在v-on指令中，在没有参数的方法调用后强制或禁止括号	🔧

Extension Rules

下面的扩展规则为ESLint本身提供的规则，并将它们应用于 < template >.

Rule ID	Description	fix
vue/array-bracket-newline	在开始和结束数组方括号之前强制执行换行符 ｜ 🔧
vue/array-bracket-spacing	在数组括号内强制执行一致的间距 ｜ 🔧
vue/arrow-spacing	在箭头函数中，在箭头之前和之后执行一致的间距 ｜ 🔧
vue/block-spacing	在打开块之后和关闭块之前，不允许或强制执行块内部的空格 ｜ 🔧
vue/brace-style	为块执行一致的大括号样式 ｜ 🔧
vue/camelcase	执行camelcase命名约定
vue/comma-dangle	要求或不允许尾部逗号 ｜ 🔧
vue/comma-spacing	在逗号之前和之后执行一致的间隔 ｜ 🔧
vue/comma-style	加强一致的逗号样式 ｜ 🔧
vue/dot-location	在点之前和之后执行一致的换行 ｜ 🔧
vue/dot-notation	尽可能执行点表示法 ｜ 🔧
vue/eqeqeq	需要使用=和! ｜ 🔧
vue/func-call-spacing	要求或不允许函数标识符与其调用之间存在间隔 ｜ 🔧
vue/key-spacing	在对象文字属性中强制键和值之间保持一致的间距 ｜ 🔧
vue/keyword-spacing	在关键字之前和之后执行一致的间距 ｜ 🔧
vue/max-len	强制执行最大行长度
vue/no-empty-pattern	disallow empty destructuring patterns
vue/no-extra-parens	disallow unnecessary parentheses ｜ 🔧
vue/no-irregular-whitespace	不允许不规则的空白
vue/no-restricted-syntax	不允许指定的语法
vue/no-sparse-arrays	不允许稀疏阵列
vue/no-useless-concat	不允许不必要的文字或模板文字的连接
vue/object-curly-newline	在大括号内强制执行一致的换行符 ｜ 🔧
vue/object-curly-spacing	在大括号内加强一致的间距 ｜ 🔧
vue/object-property-newline	强制将对象属性放置在单独的行上 ｜ 🔧
vue/operator-linebreak	为操作符强制一致的换行样式 ｜ 🔧
vue/prefer-template	需要模板文字，而不是字符串连接 ｜ 🔧
vue/space-in-parens	强制括号内的间隔一致 ｜ 🔧
vue/space-infix-ops	需要在中缀操作符周围设置空格 ｜ 🔧
vue/space-unary-ops	在一元运算符之前或之后执行一致的间距 ｜ 🔧
vue/template-curly-spacing	要求或不允许在模板字符串的嵌入表达式周围设置间距 ｜ 🔧