@uxd.wenge/eslint-config-wg
v0.0.4
Published
wenge前端编码规范文档
Downloads
4
Maintainers
Readme
eslint-config-wg
此规则适用于 JavaScript/Vue 项目的 ESLint 配置规范。
目前已支持 Vue 3.0,需要指定 extends 配置vue3
安装依赖
- eslint: JavaScript 和 JSX 检查工具
- @babel/eslint-parser: 使 eslint 支持有效的 babel 代码
- vue-eslint-parser: .vue文件的 ESLint 自定义解析器
- eslint-plugin-vue: 使用 ESLint 检查 .vue文件 的 template 和 script
- @uxd.wenge/eslint-config-wg: 内部的 ESLint 配置规范
- eslint-plugin-prettier: 基于 prettier 代码风格的 eslint 规则
- eslint-config-prettier: 禁用所有与格式相关的 eslint 规则,解决 prettier 与 eslint 规则冲突,确保将其放在 extends 队列最后,这样它将覆盖其他配置
依赖版本
eslint ^7.32.0
@babel/eslint-parser ^7.15.0
vue-eslint-parser ^7.10.0
eslint-plugin-vue ^7.16.0
eslint-plugin-prettier ^3.4.1
eslint-config-prettier ^8.3.0
使用方法
Vue
npm install --save-dev eslint @babel/eslint-parser vue-eslint-parser eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier @uxd.wenge/eslint-config-wg@latest
在你的项目的根目录下创建一个 .eslintrc.js
文件,并将以下内容复制进去:
module.exports = {
extends: [
'@uxd.wenge/wg',
// 这里是针对 vue2 的配置
'@uxd.wenge/wg/vue',
// 如果是 vue3 的项目工程,则推荐下面配置
// '@uxd.wenge/wg/vue3',
],
env: {
// 你的环境变量(包含多个预定义的全局变量)
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
globals: {
// 你的全局变量(设置为 false 表示它不允许被重新赋值)
//
// myGlobal: false
},
rules: {
// 自定义你的规则
}
};
- 项目目录下的
package.json
添加检测指令,举个例子
{
...
"scripts": {
+ "lint:es": "eslint \"src/**/*.{vue,js,jsx}\" --fix",
}
...
}
Vue3 新增规则
| rule | 规则描述 | | ------------------------------------------------------------ | ---------------------------------------------------- | | vue/custom-event-name-casing | 自定义事件名必须用 kebab-case 风格 | | vue/no-arrow-functions-in-watch | watch 中禁止使用箭头函数 | | vue/no-custom-modifiers-on-v-model | 禁止自定义的 v-modal 修饰语 | | vue/no-deprecated-data-object-declaration | 禁止在 data 中使用已废弃的对象定义 | | vue/no-deprecated-destroyed-lifecycle | 禁止使用已废弃的 destroyed 和 beforeDestroy 生命周期 | | vue/no-deprecated-dollar-listeners-api | 禁止使用已废弃的 $listeners | | vue/no-deprecated-dollar-scopedslots-api | 禁止使用已废弃的 $scopedSlots | | vue/no-deprecated-events-api | 禁止使用已废弃的 events 接口 | | vue/no-deprecated-filter | 禁止使用已废弃的 filters 语法 | | vue/no-deprecated-functional-template | 禁止使用已废弃的 functional 模版 | | vue/no-deprecated-html-element-is | 禁止使用已废弃的 is 属性 | | vue/no-deprecated-inline-template | 禁止使用已废弃的 inline-template 属性 | | vue/no-deprecated-props-default-this | 禁止使用已废弃的 this | | vue/no-deprecated-v-bind-sync | 禁止在 v-bind 指令中使用已废弃的 .sync 修饰符 | | vue/no-deprecated-v-on-native-modifier | 禁止使用已废弃的 .native 修饰符 | | vue/no-deprecated-v-on-number-modifiers | 禁止使用已废弃的数字修饰符 | | vue/no-deprecated-vue-config-keycodes | 禁止使用已废弃的 Vue.config.keyCodes | | vue/no-dupe-v-else-if | 禁止在 v-if 和 v-else-if 中出现重复的测试表达式 | | vue/no-duplicate-attr-inheritance | 使用 v-bind="$attrs" 时 inheritAttrs 必须是 false | | vue/no-empty-component-block | 禁止 为空 | | vue/no-invalid-model-keys | 禁止 model 中出现错误的属性 | | vue/no-lifecycle-after-await | 禁止异步注册生命周期 | | vue/no-lone-template | 禁止出现没必要的 | | vue/no-multiple-objects-in-class | 禁止 class 中出现复数的对象 | | vue/no-multiple-slot-args | 禁止给 scoped slots 传递多个参数 | | vue/no-multiple-template-root | 禁止模版中有多个根节点 | | vue/no-mutating-props | 禁止修改组件的 props | | vue/no-ref-as-operand | 禁止直接使用由 ref 生成的变量,必须使用它的 value | | vue/no-setup-props-destructure | 禁止对 setup 中的 props 解构 | | vue/no-sparse-arrays | 禁止在数组中出现连续的逗号 | | vue/no-useless-concat | 禁止没必要的字符拼接 | | vue/no-useless-mustaches | 禁止出现无用的 mustache 字符串 | | vue/no-useless-v-bind | 禁止出现无用的 v-bind | | vue/no-v-for-template-key | 禁止 template 有 v-for 属性时又有 key 属性 | | vue/no-v-for-template-key-on-child | 禁止 template v-for 属性的子节点有 key 属性 | | vue/no-watch-after-await | 禁止在 await 之后调用 watch | | vue/one-component-per-file | 一个文件必须仅包含一个组件 | | vue/order-in-components | 组件的属性必须为一定的顺序 | | vue/require-explicit-emits | emits 属性必须包含 $emit() 中的值 | | vue/require-slots-as-functions | this.$slots.default 必须被当作方法使用 | | vue/require-toggle-inside-transition | transition 内部必须有条件指令 | | vue/return-in-emits-validator | emits 中的方法必须有返回值 | | vue/v-on-event-hyphenation | 禁止在 v-on 的事件名使用横杠 | | vue/valid-v-is | v-is 指令必须合法 |
参考
开发维护
- 以测试开发驱动,config/rules/*.json 文件都是根据 test/ 文件夹对应的生成的