ESLint Plugin Light
简单、易用的 ESLint 插件库。
1. 安装
首先要安装 ESLint。
pnpm i eslint -D
然后安装本插件 eslint-plugin-light
。
npm i eslint-plugin-light -D
2. 使用
在 .eslintrc
配置文件的 plugins
中增加本插件 eslint-plugin-light
,或者省略 eslint-plugin-
前缀。
{
"plugins": [
"light"
]
}
然后配置你想使用的规则。
{
"rules": {
"light/rule-name": 2
}
}
也可以使用本工具提供的扩展。
{
"extends": ["plugin:light/recommended"],
}
3. 规则
3.1. valid-vue-comp-import
禁止从 js
文件中加载 Vue
组件。
比如,
- 导入地址是
js/ts
文件
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
,会被转换为:
import SomeComp from 'src/local-component/ui/pages/user/account-manage/xxx.vue';
注意上面的xxx.vue
是从index.js
中分析得到的原始文件路径。
- 导入一个目录,但目录存在
index.js
,这时候不管存不存在index.vue
,uni-app
转换都会失败
import SomeComp from 'src/local-component/ui/pages/user/account-manage';
可转换为:
import SomeComp from 'src/local-component/ui/pages/user/account-manage/xxx.vue';
- 具名导入
import {
AComp,
BComp,
CComp,
DComp,
} from './comp';
可转换为:
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';
3.2. no-plus-turn-number
禁止在 vue
的 template
中用 +
号转换字符串为数字
比如:
<ScheduleItem
:child-id="+childId"
/>
如果加了 --fix
,会被转化成:
<ScheduleItem
:child-id="parseInt(childId, 10)"
/>
3.3. no-complex-key
不要在vue
模板中使用复杂的key
。包括:
- 字符串拼接,如:
:key="`hold` + index"`
- 模板字符串,如:
:key="`hold-${index}`"
- 将
key
提到一个函数中,如:
:key="getHoldKey(index)"
getHoldKey(index) {
return `hold${index}`
}
最佳方式其实是提前处理好数据,这样性能会更好,也避免了key
重复。
getData() {
items = items.map((item,index) => ({
...item,
key: `hold-${index}`
}))
}
uni-app
中,key
重复的话,会造成挂载在组件上面的事件参数为undefined
,从而不成功。
3.4. json-parse-try-catch
JSON.parse
应该加 try catch
。
默认配置会排除下面情况:
JSON.parse(JSON.stringify(abc));
可以配置 strict
参数为 true
,开启检查。
// .eslintrc.js
module.exports = {
plugins: [
'light',
],
rules: {
'light/json-parse-try-catch': [2, { strict: true }],
},
}
3.5. no-import-all-in-one-api
使用 src/api
子仓库时, 不应该导入全部接口,而应该按需引入。
Bad case:
// bad
import { pubg_fateClient } from 'src/api/git.a.com/itrpcprotocol/esport/esport_cgi/pubg_fate/pubg_fate.http';
Good case:
// good
import { QueryGameListHomePageClient } from 'src/api/git.a.com/itrpcprotocol/esport/esport_cgi/pubg_fate/pubg_fate/QueryGameListHomePage.http';
Usage:
// .eslintrc.js
module.exports = {
plugins: [
'light',
],
rules: {
'light/no-import-all-in-one-api': 2,
},
}
还可以配置 excludes
数组,指定排除哪些接口,不推荐使用。
// .eslintrc.js
module.exports = {
plugins: [
'light',
],
rules: {
'light/no-import-all-in-one-api': [2, {
excludes: [
'src/api/git.a.com/itrpcprotocol/esport/esport_cgi/pubg_fate/pubg_fate.http',
]
}],
},
}
下面是一个案例,根据这个规则,对一个线上项目进行改造。仅仅改动了几个文件的几行引入语句,就减少了主包 50KB
,效果立竿见影。
之前:

之后:

改动的几个文件:

3.6. no-js-file
运行时文件不允许使用 js/jsx
,只允许 ts/tsx
。子工程的 config.js
会自动排除。
Usage:
// .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'] |
3.7. valid-file-name
文件命名格式只允许使用 kebab-case。子工程的 App.vue
会自动排除。
Usage:
// .eslintrc.js
module.exports = {
plugins: [
'light',
],
rules: {
'light/valid-file-name': 2,
},
}


配置选项:
字段 | 说明 | 默认值 |
---|---|---|
include | 检查的列表,glob 模式 | ['src/**/*'] |
exclude | 排除的列表,glob 模式 | ['src/project/*/App.vue'] |
3.8. no-multiple-script
禁止 Vue 文件中存在多个 <script>
。
Usage:
// .eslintrc.js
module.exports = {
plugins: [
'light',
],
rules: {
'light/no-multiple-script': 2,
},
}

3.9. valid-spelling
校验正确的拼写,比如不能用"帐号",要使用"账号",不能使用"登陆",要使用"登录"。
Usage:
// .eslintrc.js
module.exports = {
plugins: [
'light',
],
rules: {
'light/valid-spelling': 2,
},
}
配置选项:
字段 | 说明 | 默认值 |
---|---|---|
spelling | 错误拼写和正确拼写的映射 | { 帐号: '账号', 登陆: '登录' } |
3.10. valid-shaohou
校验正确的"稍候"和"稍后",稍候后面不加词,稍后后面需要加词,比如"请稍候/请稍后再试"。
Usage:
// .eslintrc.js
module.exports = {
plugins: [
'light',
],
rules: {
'light/valid-shaohou': 2,
},
}
3.11. css-per-line
限制 Vue 中每行只有1
个CSS类名,可以配置阈值。
Usage:
// .eslintrc.js
module.exports = {
plugins: [
'light',
],
rules: {
'light/css-per-line': 2,
},
}
配置选项:
字段 | 说明 | 默认值 |
---|---|---|
counts | 检查阈值,小于阈值时,可以在一行 | 3 |