并不是说新建的项目中没有eslint检测，只是希望可以实现较为合理的配置，以及可以修改。
在原始的项目中的package.json中可以看到
// package.json
{
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
}
配置
因为eslint在项目中已经安装，所以我们不需要再重复安装，只需要修改配置
.eslintrc.js
在最外层目录下新建.eslintrc.js文件，用来保存和配置rules。但是我未来可以把所以的规则发布到npm上，以后的项目就可以通过extends来实现熟悉的eslint配置了，所以我先创建了一个eslint-config的目录。先看下最基本的配置吧
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
},
extends: [
"./eslint-config"
],
plugins: [
],
rules: {
},
};
.eslintignore
这个不必多说了
# 需要忽略的文件(夹)放在这里
build/
node_modules/*
eslint-config
这个目录下存放了项目中所有的规则，同时根据规则的应用场景分为了以下几个方面
模块规则
主要是对文件模块进行约束，比如
- 只允许使用es6 module,禁用cjs
- 禁止重复导入
- 可以引用package.json中dev环境包
相关文档
命名规则
主要是对命名方式和类型的一个约束，比如：
- 必须先定义、后使用
- 构造函数中必须调用super()
- 禁止多次生命同一个变量
- 禁止使用var
- 不允许初始化变量为undefined
相关文档
React规则
主要是对React的jsx的一些写法约束,比如：
- 不可以使用array的下标作为key
- 必须解构state和props
- 禁止在setState中访问this.state
- props的值是true时，不允许传true
- jsx写法必须在tsx文件中
相关文档
代码风格
主要是涉及一些代码风格，编码风格的约束，比如：
- 文件末尾需要存在一个空行
- 一个文件中只能有一个class
- 单个文件最多400行
- 单行最大长度140
- 禁止出现空语句块
- 禁止出现未使用的变量
相关文档
注释规则
主要是对一些必须注释的代码的约束，比如：
- 箭头函数不需要注释
- class类必须要注释
- interface和type的声明需要注释
另外：
这里涉及到一些高级设置，也就是eslint提供的selectors,对一些特定的写法过滤，不需要写注释，比如interface定义的以Props或者State结尾的就不需要注释
{
// ...
rules: {
"jsdoc/require-jsdoc": ["warn", {
contexts:[
// 检测ts中的type。除去Props和State结尾的
{ context: "TSTypeAliasDeclaration:not([id.name=/.*(Props|State)$/])", inlineCommentBlock:true },
// 检测ts中的interface。除去Props和State结尾的
{ context: "TSInterfaceDeclaration:not([id.name=/.*(Props|State)$/])", inlineCommentBlock:true },
],
}]
}
}
如上，type AppState = {}和interface AppProps {}都不需要注释。
相关文档
传送门
强烈建议
因为在做这方面工作的时候，从原来的tslint规范那里做了一部分的参考工作。所以会涉及到tslint迁移到eslint的情况，很多的内容都在那个部分体现
git
TODO 待发布在npm上
