文/ 天机阁首席规范师
（云台之上，灰袍道人手持拂尘，面前悬浮着无数代码规则）
"今日传授尔等ESLint规范大法。须知团队修行，如同构建大阵，需众人遵循同一法则，方能凝聚力量。且看这规范之阵——"
第一章：ESLint的境界
凝气期（基础规范）
// 基础规则：禁止未使用的变量
module.exports = {
rules: {
'no-unused-vars': 'error'
}
};
筑基期（风格规范）
// 风格规则：统一缩进和引号
module.exports = {
rules: {
indent: ['error', 2],
quotes: ['error', 'single']
}
};
元婴期（最佳实践）
// 最佳实践：强制使用严格模式
module.exports = {
rules: {
strict: ['error', 'global']
}
};
第二章：规范七式
第一式：开宗立派（项目初始化）
mkdir eslint-config-team
cd eslint-config-team
npm init -y
npm install eslint --save-dev
第二式：刻录道纹（基础配置）
// eslint-config-team/index.js
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'eslint:recommended'
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module'
}
};
第三式：注入灵力（自定义规则）
module.exports = {
rules: {
'no-console': 'warn', // 禁止console
'no-alert': 'error', // 禁止alert
'max-len': ['error', { code: 80 }] // 限制行长度
}
};
第四式：时空穿梭（环境配置）
module.exports = {
env: {
node: true, // Node.js环境
jest: true // Jest测试环境
},
overrides: [
{
files: ['*.test.js'],
rules: {
'no-unused-expressions': 'off' // 测试文件允许未使用表达式
}
}
]
};
第五式：天眼通（自动修复）
# 添加自动修复脚本
npx eslint --fix .
第六式：自定义道纹（插件开发）
// eslint-plugin-team-rules/index.js
module.exports = {
rules: {
'no-var': {
create(context) {
return {
VariableDeclaration(node) {
if (node.kind === 'var') {
context.report({
node,
message: '禁止使用var，请使用let或const'
});
}
}
};
}
}
}
};
第七式：渡劫飞升（持续优化）
# 使用最新工具链
npm install eslint-plugin-import eslint-plugin-react --save-dev
# 配置高级规则
module.exports = {
plugins: ['import', 'react'],
rules: {
'import/no-unresolved': 'error',
'react/jsx-uses-vars': 'error'
}
};
第三章：规范心法
"规范五要：
1️⃣ 统一风格（缩进、命名）
2️⃣ 最佳实践（避免常见错误）
3️⃣ 环境区分（开发/生产）
4️⃣ 自动修复（提高效率）
5️⃣ 持续更新（跟随标准）"
第四章：实战演练
基础规范
// 正确示例
const arr = [1, 2, 3];
const double = arr.map(x => x * 2);
// 错误示例
var oldVar = '魔道规范'; // 禁止使用var
高级规范
// 强制使用箭头函数
module.exports = {
rules: {
'prefer-arrow-callback': 'error'
}
};
第五章：规范禁忌
魔道案例
// 错误：过于严格
module.exports = {
rules: {
'no-underscore-dangle': 'error', // 禁止下划线
'no-param-reassign': 'error' // 禁止参数重新赋值
}
};
正道解法
// 正确：适度宽松
module.exports = {
rules: {
'no-underscore-dangle': ['error', { allowAfterThis: true }],
'no-param-reassign': ['error', { props: false }]
}
};
（突然，规范之阵剧烈波动，代码规则纷纷破碎）
弟子："师尊！我的规范出错了！"
道人："痴儿！定是规则冲突了。且看这招——"
道人挥动拂尘，虚空中浮现代码：
// 解决规则冲突
module.exports = {
rules: {
'no-unused-vars': 'off', // 关闭冲突规则
'@typescript-eslint/no-unused-vars': 'error' // 使用替代规则
}
};
飞升天象：
当ESLint修炼至大乘期，可：
- 自定义规则插件
- 自动修复代码
- 集成IDE实时检查
- 生成规范文档
（道人化作万千拂尘，虚空中浮现最后箴言）
"记住，规范之道在于'适度灵活'。如同阵法不会一成不变，而是通过规则让代码自然规范......"
（云台绽放金光，飘落一片玉简：《ESLint进阶秘法——从入门到飞升》）
<玉简飘转，化作代码流光> <第二元神显化：关注天机阁，解锁更多前端修仙秘法>
