@applint/spec
在 ICE、Rax、React 项目中更简单接入 ESLint(支持 TypeScript) / Stylelint / Prettier / Commitlint 规则,规则与阿里巴巴大淘宝前端规范保持一致。
安装
npm i --save-dev @applint/spec eslint stylelint prettier @commitlint/cli husky
注意: 你不需要安装任何其他 Lint 插件或者插件集,@applint/spec 中已包含这部分依赖。
快速迁移
运行以下命令可一键迁移到 @applint/spec
中:
tnpx @applint/projectlint codemod --transform 'lint-config-to-applint-spec' --fix
使用
ESLint
在项目根目录下创建 .eslintrc.js
文件,并加入以下配置:
// .eslintrc.js
const { getESLintConfig } = require('@applint/spec');
// getESLintConfig(rule: 'common' | 'common-ts' | 'rax' | 'rax-ts' | 'react' | 'react-ts' | 'vue' | 'vue-ts', customConfig?: Linter.Config);
module.exports = getESLintConfig('react', {
// 自定义配置
// rules: { 'no-console': 0 }
});
ESLint 规则基于 @applint/eslint-config。
然后在 package.json
中加入脚本:
{
"scripts": {
+ "eslint": "eslint --ext .js,.jsx,.ts,.tsx ./",
+ "eslint:fix": "npm run eslint -- --fix"
}
}
在终端运行 npm run eslint
查看项目有哪些 Lint 问题;运行 npm run eslint:fix
会让 ESLint 尝试修复能被自动修复的问题。
更严格的 TypeScript 配置
如果你希望对项目中的 TypeScript 代码进行更严格的约束,可以使用 'rax-ts-strict' | 'react-ts-strict' | 'common-ts-strict' (依据你的具体场景)。
// .eslintrc.js
const { getESLintConfig } = require('@applint/spec');
// getESLintConfig(rule: 'common-ts-strict' | 'rax-ts-strict' | 'react-ts-strict', customConfig?: Linter.Config);
module.exports = getESLintConfig('react-ts-strict', {
// 自定义配置
// rules: { 'no-console': 0 }
});
注意:
- 严格配置的侧重点在于 TypeScript 类型的书写,包括:一致性(如类型断言只允许使用 as、对象的类型声明只允许使用接口等),显性(函数的返回值类型、类成员的可访问性等需要显式注明),语法(使用可选链
?.
替代逻辑与&&
,使用空值合并??
替代逻辑或||
等),TS 专有能力(使用 import type 导入类型等)。 - 使用严格配置并不意味着放弃基础配置,严格配置同样包含了基础的 ESLint 规则。
- 开启前,请请确保你能够接受这一程度的强约束。
Stylelint
在项目根目录下创建 .stylelintrc.js
,并加入以下配置:
// .stylelintrc.js
const { getStylelintConfig } = require('@applint/spec');
// getStylelintConfig(rule: 'common' | 'rax' | 'react' | 'vue', customConfig?: StylelintConfig);
module.exports = getStylelintConfig('react');
Stylelint 规则基于 @applint/stylelint-config。
然后在 package.json
中加入脚本:
{
"scripts": {
+ "stylelint": "stylelint \"**/*.{css,scss,less}\"",
+ "stylelint:fix": "npm run stylelint -- --fix"
}
}
在终端运行 npm run stylelint
查看项目有哪些 Lint 问题;运行 npm run stylelint:fix
会让 Stylelint 尝试修复能被自动修复的问题。
Prettier
在项目根目录下创建 .prettierrc.js
,并加入以下配置:
// .prettierrc.js
const { getPrettierConfig } = require('@applint/spec');
// getPrettierConfig(rule: 'common' | 'rax' | 'react' | 'vue', customConfig?: PrettierConfig);
module.exports = getPrettierConfig('react');
规则基于 @applint/prettier-config。
然后在 package.json
中加入脚本:
{
"scripts": {
+ "prettier": "prettier **/* --write"
}
}
运行 npm run prettier
会使用 Prettier 对代码进行格式化。
配合 ESLint 使用
ESLint 的某些规则可能会跟 Prettier 格式化的结果有冲突,比如 @typescript-eslint/indent 规则。需要做以下的安装和配置来解决此问题:
安装
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
配置
// .eslintrc.js
const { getESLintConfig } = require('@applint/spec');
module.exports = getESLintConfig('react-ts', {
extends: ['prettier']
});
Commitlint
在项目根目录下创建 .commitlintrc.js
,并加入以下配置:
// .commitlintrc.js
const { getCommitlintConfig } = require('@applint/spec');
// getCommitlintConfig(rule: 'common' | 'rax' | 'react' | 'vue', customConfig?: CommitlintUserConfig);
module.exports = getCommitlintConfig('react');
Commitlint 规则基于 @applint/commitlint-config。
Git Hooks
推荐查看 husky 文档了解如何创建 "commit-msg
" 和 "pre-commit
" 文档。