Plugin Light

Appearance

ESLint Plugin Light ​

简单、易用的 ESLint 插件库。

1. 作者 ​

novlan1

2. 安装 ​

首先要安装 ESLint。

sh
pnpm i eslint -D

然后安装本插件 eslint-plugin-light。

sh
npm i eslint-plugin-light -D

3. 使用 ​

在 .eslintrc 配置文件的 plugins 中增加本插件 eslint-plugin-light，或者省略 eslint-plugin- 前缀。

json
{
    "plugins": [
        "light"
    ]
}

然后配置你想使用的规则。

json
{
    "rules": {
        "light/rule-name": 2
    }
}

也可以使用本工具提供的扩展。

json
{
  "extends": ["plugin:light/recommended"],
}

4. 规则 ​

4.1. valid-vue-comp-import ​

禁止从 js 文件中加载 Vue 组件。

比如，

  1. 导入地址是js/ts文件
js
import SomeComp from 'src/local-component/ui/pages/user/account-manage/index.js';

// 或者省略了js/ts文件后缀
import SomeComp from 'src/local-component/ui/pages/user/account-manage/index';

如果加了 --fix，会被转换为：

js
import SomeComp from 'src/local-component/ui/pages/user/account-manage/xxx.vue';

注意上面的xxx.vue是从index.js中分析得到的原始文件路径。

  1. 导入一个目录，但目录存在index.js，这时候不管存不存在index.vue，uni-app转换都会失败
js
import SomeComp from 'src/local-component/ui/pages/user/account-manage';

可转换为：

js
import SomeComp from 'src/local-component/ui/pages/user/account-manage/xxx.vue';
  1. 具名导入
js
import {
  AComp,
  BComp,
  CComp,
  DComp,
} from './comp';

可转换为：

js
import AComp from 'src/local-component/module/tip-match/tip-match-schedule-tree-new/comp/a.vue';
import BComp from 'src/local-component/module/tip-match/tip-match-schedule-tree-new/comp/b.vue';
import CComp from 'src/local-component/module/tip-match/tip-match-schedule-tree-new/comp/c.vue';
import DComp from 'src/local-component/module/tip-match/tip-match-schedule-tree-new/comp/d.vue';

4.2. no-plus-turn-number ​

禁止在 vue 的 template 中用 + 号转换字符串为数字

比如：

html
<ScheduleItem
  :child-id="+childId"
/>

如果加了 --fix，会被转化成：

html
<ScheduleItem
  :child-id="parseInt(childId, 10)"
/>

4.3. no-complex-key ​

不要在vue模板中使用复杂的key。包括：

  1. 字符串拼接，如：
vue
:key="`hold` + index"`
  1. 模板字符串，如：
vue
:key="`hold-${index}`"
  1. 将key提到一个函数中，如：
vue
:key="getHoldKey(index)"

getHoldKey(index) {
  return `hold${index}`
}

最佳方式其实是提前处理好数据，这样性能会更好，也避免了key重复。

ts
getData() {
  items = items.map((item,index) => ({
    ...item,
    key: `hold-${index}`
  }))
}

uni-app中，key重复的话，会造成挂载在组件上面的事件参数为undefined，从而不成功。

4.4. json-parse-try-catch ​

JSON.parse 应该加 try catch。

默认配置会排除下面情况：

ts
JSON.parse(JSON.stringify(abc));

可以配置 strict 参数为 true，开启检查。

js
// .eslintrc.js

module.exports = {
  plugins: [
    'light',
  ],
  rules: {
    'light/json-parse-try-catch': [2, { strict: true }],
  },
}

4.5. no-import-all-in-one-api ​

使用 src/api 子仓库时， 不应该导入全部接口，而应该按需引入。

Bad case:

js
// bad
import { pubg_fateClient } from 'src/api/git.aow.com/itrpcprotocol/esport/esport_cgi/pubg_fate/pubg_fate.http';

Good case:

js
// good
import { QueryGameListHomePageClient } from 'src/api/git.aow.com/itrpcprotocol/esport/esport_cgi/pubg_fate/pubg_fate/QueryGameListHomePage.http';

Usage:

js
// .eslintrc.js

module.exports = {
  plugins: [
    'light',
  ],
  rules: {
    'light/no-import-all-in-one-api': 2,
  },
}

还可以配置 excludes 数组，指定排除哪些接口，不推荐使用。

js
// .eslintrc.js

module.exports = {
  plugins: [
    'light',
  ],
  rules: {
    'light/no-import-all-in-one-api': [2, {
      excludes: [
        'src/api/git.aow.com/itrpcprotocol/esport/esport_cgi/pubg_fate/pubg_fate.http',
      ]
    }],
  },
}

下面是一个案例，根据这个规则，对一个线上项目进行改造。仅仅改动了几个文件的几行引入语句，就减少了主包 50KB，效果立竿见影。

之前：

之后：

改动的几个文件：

4.6. no-js-file ​

运行时文件不允许使用 js/jsx，只允许 ts/tsx。子工程的 config.js 会自动排除。

Usage:

js
// .eslintrc.js

module.exports = {
  plugins: [
    'light',
  ],
  rules: {
    'light/no-js-file': 2,
  },
}

配置选项：

字段说明默认值
include检查的列表，glob 模式['src/{project,local-component,local-logic}/**/*.{js,jsx}']
exclude排除的列表，glob 模式['src/project/*/config.js']

4.7. valid-file-name ​

文件命名格式只允许使用 kebab-case。子工程的 App.vue 会自动排除。

Usage:

js
// .eslintrc.js

module.exports = {
  plugins: [
    'light',
  ],
  rules: {
    'light/valid-file-name': 2,
  },
}

配置选项：

字段说明默认值
include检查的列表，glob 模式['src/**/*']
exclude排除的列表，glob 模式['src/project/*/App.vue']

4.8. no-multiple-script ​

禁止 Vue 文件中存在多个 <script>。

Usage:

js
// .eslintrc.js

module.exports = {
  plugins: [
    'light',
  ],
  rules: {
    'light/no-multiple-script': 2,
  },
}

4.9. valid-spelling ​

校验正确的拼写，比如不能用"帐号"，要使用"账号"，不能使用"登陆",要使用"登录"。

Usage:

js
// .eslintrc.js

module.exports = {
  plugins: [
    'light',
  ],
  rules: {
    'light/valid-spelling': 2,
  },
}

配置选项：

字段说明默认值
spelling错误拼写和正确拼写的映射{ 帐号: '账号', 登陆: '登录' }

4.10. valid-shaohou ​

校验正确的"稍候"和"稍后"，稍候后面不加词，稍后后面需要加词，比如"请稍候/请稍后再试"。

Usage:

js
// .eslintrc.js

module.exports = {
  plugins: [
    'light',
  ],
  rules: {
    'light/valid-shaohou': 2,
  },
}

4.11. classname-per-line ​

限制 Vue 中每行只有1个CSS类名，可以配置阈值。

Usage:

js
// .eslintrc.js

module.exports = {
  plugins: [
    'light',
  ],
  rules: {
    'light/classname-per-line': 2,
  },
}

配置选项：

字段说明默认值
counts检查阈值，小于阈值时，可以在一行3

4.12. img-v-lazy ​

强制 img 标签使用 v-lazy 而不是 :src，可用于 Vue 项目中。

Usage:

js
// .eslintrc.js

module.exports = {
  plugins: [
    'light',
  ],
  rules: {
    'light/img-v-lazy': 2,
  },
}

4.13. no-direct-img-src ​

在 jsx/tsx 中禁止直接使用 img src，必须使用封装的 CdnImage 组件，可用于 React 项目中。

与 img-v-lazy 规则 类似，都是为了防止直接使用 COS 图片，而不是 CDN 图片。

Usage:

js
// .eslintrc.js

module.exports = {
  plugins: [
    'light',
  ],
  rules: {
    'light/no-direct-img-src': 2,

    // 传入参数
    'light/no-direct-img-src': [2, {
      componentName: 'MyCdnImage',
    }],
  },
}

配置选项：

字段说明默认值
componentName提示词中的自定义组件名CdnImage

4.14. no-todo-comment ​

不允许存在 TODO。可防止调试代码被意外带到线上。

Usage:

js
// .eslintrc.js

module.exports = {
  plugins: [
    'light',
  ],
  rules: {
    'light/no-todo-comment': 2,
  },
}

配置选项：

字段说明默认值
keyword检查关键词TODO:

4.15. no-decimal-in-brackets ​

禁止在方括号类名中使用小数点。背景：

小程序中不能使用 pr-[.28rem] 这种，可以使用 pr-1.12，同时在tailwind.config.js 中配置下 theme.extend.padding = {1.12: '.28rem'}。

原因是uni-app会把class中的[.解析成\[\放到wxss中，导致编译错误。

Usage:

js
// .eslintrc.js

module.exports = {
  plugins: [
    'light',
  ],
  rules: {
    'light/no-decimal-in-brackets': 2,
  },
}

配置选项：

字段说明默认值
regexp匹配正则/\[[^\](]*\.\d+[a-zA-Z]+[^\]]*\]/

5. 更新日志 ​

点此查看