LANGUAGES: 简体中文 / English
Toggle 简体中文 README
AlloyTeam ESLint 规则不仅是一套先进的适用于 React/Vue/Typescript 项目的 ESLint 配置规范，而且也是你配置个性化 ESLint 规则的最佳参考。
请根据你的项目使用的技术栈选择以下配置：
AlloyTeam ESLint 规则的先进性体现在以下三个方面：
- 始终保持最新版本的 ESLint
- 覆盖率 100% 的测试和文档
- 高度的自动化
AlloyTeam ESLint 规则始终保持最新版本的 ESLint 版本，包括解析器：
以及规则：
AlloyTeam ESLint 规则奉行「测试即文档」，每个配置不仅配有一句话注释以及对应的错误示例和正确示例，而且还更进一步，将这些示例代码作为测试代码运行，保证了报错项与配置一一匹配。
- 所有 ESLint 配置均在
test目录下 - 每一项配置存放在对应的目录下，如
test/react/jsx-key/.eslintrc.js描述了规则react/jsx-key - 每一条配置都有一句话注释说明此配置的用途
- 对于有争议的配置，在注释中通过
@reason说明了这么配置的原因 - 如果配置开启了，则必须有对应的示例，包括
bad.js和good.js - 每个示例都会在真实的 ESLint 脚本中运行，以保证每次更新都向前兼容
- 由于配置和示例在一个目录下，故编辑器中可以直接看到错误信息
- 将测试中的配置、注释和示例输出为 html，生成网站
无情的推动自动化
- 由
scripts/build.ts脚本将test目录下分散的配置生成整体的配置，并且生成网站中需要用到的site/config/rules - 运行测试脚本
test/index.ts会检查每个示例是否按照要求报错 - 运行
scripts/rulesCoverage.ts保证当前配置覆盖了最新的 ESLint 规则，即：- 不包含被标记为
deprecated的规则 - 不包含 eslint-config-prettier 的规则（样式相关的规则交给更专业的 Prettier 处理）
- 包含所有其余可用的规则
- 不包含被标记为
- 通过 Prettier 保证代码样式的一致性
- 使用 travis-ci 保证主干通过以上测试
- 使用 travis-ci 自动构建并部署网站
- 使用 greenkeeper 保证及时更新版本
我们依据以下三条原则，研读了 ESLint 所有的配置项，定制出了心目中的「完美」ESLint 配置。
- 能够帮助发现代码错误的规则，全部开启
- 配置不应该依赖于某个具体项目，而应该全局合理
- 帮助保持团队的代码风格统一，而不是限制开发体验
当然，也欢迎大家提出不同的意见。
Toggle English README
Website: click me
The AlloyTeam ESLint config is not only a progressive ESLint config for your React/Vue/TypeScript projects, but also the best reference for configuring your personalized ESLint rules.
Please choose the following configuration based on the technology stack used by your project:
The advancement of the AlloyTeam ESLint rules is reflected in the following three areas:
- Always keep the latest version of ESLint
- 100% coverage of tests and documentation
- High degree of automation
The AlloyTeam ESLint rule always maintains the latest version of the ESLint, including the parser:
And rules:
The AlloyTeam ESLint rule pursues "test as a document". Each configuration is not only equipped with a sentence comment and corresponding error examples and correct examples, but further, the sample code is run as test code, ensuring error reporting and configuration. match.
- All ESLint configurations are in the
testdirectory - Each configuration is stored in the corresponding directory, such as
test/react/jsx-key/.eslintrc.jsdescribes the rulereact/jsx-key - Each configuration has a sentence comment indicating the purpose of this configuration
- For controversial configurations, the reason for this configuration is explained in the comments by
@reason - If the configuration is enabled, there must be a corresponding example, including
bad.jsandgood.js - Each example will run in a real ESLint script to ensure that each update is forward compatible
- Since the configuration and examples are in one directory, you can see the error message directly in the editor.
- Export the configuration, comments, and examples in the test to html, build website
Ruthless push automation
- Generate a holistic configuration of the decentralized configuration in the
testdirectory by thescripts/build.tsscript and generate thesite/config/rulesneeded in the website. - Run the test script
test/index.tswill check if each example reports an error as required - Run
scripts/rulesCoverage.tsto ensure that the current configuration overrides the latest ESLint rules, namely: - Does not contain rules marked asdeprecated- Does not include rules for eslint-config-prettier (style-related rules are passed to more professional Prettier deal with) - Contains all remaining rules available - Guarantee code style consistency with Prettier
- Use travis-ci to ensure that the trunk passes the above test
- Automatically build and deploy website using travis-ci
- Use greenkeeper to ensure npm packages are the latest version
Based on the following three principles, we have studied all of ESLint's configuration items and customized the "perfect" ESLint configuration.
- Rules that can help find code errors, all open
- Configuration should not depend on a specific project, but should be globally reasonable
- Help keep the team's code style unified, rather than limit the development experience
Of course, everyone is welcome to open an issue.
npm install --save-dev eslint babel-eslint eslint-config-alloyCreate an .eslintrc.js in the root directory of your project, then copy the following content into it:
module.exports = {
extends: [
'alloy',
],
env: {
// 您的环境变量（包含多个预定义的全局变量）
// Your environments (which contains several predefined global variables)
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
globals: {
// 您的全局变量（设置为 false 表示它不允许被重新赋值）
// Your global variables (setting to false means it's not allowed to be reassigned)
//
// myGlobal: false
},
rules: {
// 自定义您的规则
// Customize your rules
}
};npm install --save-dev eslint babel-eslint eslint-plugin-react eslint-config-alloyCreate an .eslintrc.js in the root directory of your project, then copy the following content into it:
module.exports = {
extends: [
'alloy',
'alloy/react',
],
env: {
// 您的环境变量（包含多个预定义的全局变量）
// Your environments (which contains several predefined global variables)
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
globals: {
// 您的全局变量（设置为 false 表示它不允许被重新赋值）
// Your global variables (setting to false means it's not allowed to be reassigned)
//
// myGlobal: false
},
rules: {
// 自定义您的规则
// Customize your rules
}
};npm install --save-dev eslint babel-eslint vue-eslint-parser@5.0.0 eslint-plugin-vue eslint-config-alloyCreate an .eslintrc.js in the root directory of your project, then copy the following content into it:
module.exports = {
extends: [
'alloy',
'alloy/vue',
],
env: {
// 您的环境变量（包含多个预定义的全局变量）
// Your environments (which contains several predefined global variables)
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
globals: {
// 您的全局变量（设置为 false 表示它不允许被重新赋值）
// Your global variables (setting to false means it's not allowed to be reassigned)
//
// myGlobal: false
},
rules: {
// 自定义您的规则
// Customize your rules
}
};npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-alloyCreate an .eslintrc.js in the root directory of your project, then copy the following content into it:
module.exports = {
extends: [
'alloy',
'alloy/typescript',
],
env: {
// 您的环境变量（包含多个预定义的全局变量）
// Your environments (which contains several predefined global variables)
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
globals: {
// 您的全局变量（设置为 false 表示它不允许被重新赋值）
// Your global variables (setting to false means it's not allowed to be reassigned)
//
// myGlobal: false
},
rules: {
// 自定义您的规则
// Customize your rules
}
};npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-config-alloyCreate an .eslintrc.js in the root directory of your project, then copy the following content into it:
module.exports = {
extends: [
'alloy',
'alloy/react',
'alloy/typescript',
],
env: {
// 您的环境变量（包含多个预定义的全局变量）
// Your environments (which contains several predefined global variables)
//
// browser: true,
// node: true,
// mocha: true,
// jest: true,
// jquery: true
},
globals: {
// 您的全局变量（设置为 false 表示它不允许被重新赋值）
// Your global variables (setting to false means it's not allowed to be reassigned)
//
// myGlobal: false
},
rules: {
// 自定义您的规则
// Customize your rules
}
};在 VSCode 中，默认 ESLint 并不能识别 .vue、.ts 或 .tsx 文件，需要在「文件 => 首选项 => 设置」里做如下配置：
{
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"typescript",
"typescriptreact"
]
}如果需要针对 .vue、.ts 和 .tsx 文件开启 ESLint 的 autoFix，则需要配置成：
{
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
]
}AlloyTeam ESLint 规则从 v3 开始，已经不包含所有样式相关的规则了，故不需要引入 eslint-config-prettier。只需要安装 prettier 及相关 VSCode 插件即可。
下面给出一个 AlloyTeam 使用的 prettier.config.js 配置，仅供参考：
// prettier.config.js or .prettierrc.js
module.exports = {
// 一行最多 100 字符
printWidth: 100,
// 使用 4 个空格缩进
tabWidth: 4,
// 不使用缩进符，而使用空格
useTabs: false,
// 行尾需要有分号
semi: true,
// 使用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号，而使用双引号
jsxSingleQuote: false,
// 末尾不需要逗号
trailingComma: 'none',
// 大括号内的首尾需要空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 箭头函数，只有一个参数的时候，也需要括号
arrowParens: 'always',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf
endOfLine: 'lf'
};npm test# 安装依赖
npm i
# 构建 index.js react.js 等 eslintrc 配置
npm run build
# 执行测试
npm test
# 自动修复 ESLint 错误
npm run eslint:fix
# 自动修复格式错误
npm run prettier:fix
# 检查当前是否覆盖了所有的规则
npm run test:rulesCoverage
# 发布新版本
npm version <major|minor|patch>
git push --follow-tags
npm publish