@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" 文档。