@winner-fed/eslint-config-win

winner-fed 前端编码规范文档

Usage no npm install needed!

<script type="module">
  import winnerFedEslintConfigWin from 'https://cdn.skypack.dev/@winner-fed/eslint-config-win';
</script>

README

eslint-config-win

此规则适用于 JavaScript/Vue 项目的 ESLint 配置规范。

目前已支持 Vue 3.0,需要指定 extends 配置vue3

安装

yarn add @winner-fed/eslint-config-win -D

依赖版本

eslint ^7.32.0
babel-eslint ^10.1.0
vue-eslint-parser ^7.11.0
eslint-plugin-vue ^7.20.0

Tips:如果项目中没有安装此依赖包或者版本不一致,请安装或者升级。

用法

  • 在你的项目的根目录下创建一个 .eslintrc.js 文件,并将以下内容复制进去:
module.exports = {
    extends: [
        '@winner-fed/win',
    ],
    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",
 }
 ...
}

Vue

npm install --save-dev eslint babel-eslint vue-eslint-parser eslint-plugin-vue @winner-fed/eslint-config-win

在你的项目的根目录下创建一个 .eslintrc.js 文件,并将以下内容复制进去:

module.exports = {
    extends: [
        '@winner-fed/win',
        // 这里是针对 vue2 的配置
        '@winner-fed/win/vue', 
        // 如果是 vue3 的项目工程,则推荐下面配置
        // '@winner-fed/win/vue3',
    ],
    env: {
        // 你的环境变量(包含多个预定义的全局变量)
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // 你的全局变量(设置为 false 表示它不允许被重新赋值)
        //
        // myGlobal: false
    },
    rules: {
        // 自定义你的规则
    }
};

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 禁止 <template> <script> <style> 为空
vue/no-invalid-model-keys 禁止 model 中出现错误的属性
vue/no-lifecycle-after-await 禁止异步注册生命周期
vue/no-lone-template 禁止出现没必要的 <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/ 文件夹对应的生成的