目录

.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 IDDescription 描述
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 IDDescriptionfix
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-declarationdata不允许使用对象声明，只能是方法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 IDDescriptionfix
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-propprops 需要默认值
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 IDDescriptionfix
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 IDDescriptionfix
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 IDDescriptionfix
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-propprops需要默认值
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 IDDescriptionfix
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 IDDescriptionfix
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-defaultdisallow 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-blocksr设置或不允许块之间的填充线🔧
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 IDDescriptionfix
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-patterndisallow empty destructuring patterns
vue/no-extra-parensdisallow 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要求或不允许在模板字符串的嵌入表达式周围设置间距 ｜ 🔧
# vue.js # visual studio code
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue