各位前端同僚，晚上好！我是你们的老朋友，今天咱们不聊虚的，直接开门见山，聊聊前端工程化里三个老朋友：Linting (ESLint), Formatting (Prettier), Transpilation (Babel)。
开场白：前端工程化，到底是个啥？
在座的各位肯定都听过“前端工程化”这个词，感觉很高大上，但说白了，就是把前端开发从“小作坊”模式变成“工业化”生产。以前咱们写代码，一个人说了算，代码风格随意，错误也难发现，上线了bug满天飞。现在不行了，团队大了，代码量大了，必须得有一套规矩，保证代码质量、可维护性，以及团队协作效率。而Linting、Formatting、Transpilation，就是这套规矩里的重要组成部分。
第一部分：Linting (ESLint) – 代码质量的“警察叔叔”
想象一下，你写了一堆代码，里面可能有拼写错误、语法错误、未使用的变量、不规范的写法等等。如果靠人眼去检查，那得累死，而且容易出错。这时候，ESLint就派上用场了。
1. ESLint 是干嘛的？
ESLint本质上是一个代码静态分析工具。它会扫描你的代码，根据你预先设定的规则，找出潜在的问题，并给出警告或者错误提示。你可以把它想象成代码质量的“警察叔叔”，时刻监督着你的代码，防止你犯错。
2. ESLint 的核心功能
- 语法检查: 检查代码是否符合JavaScript语法规范，例如是否缺少分号、括号是否匹配等等。
- 代码风格检查: 检查代码风格是否符合团队规范，例如缩进、命名规范、空格等等。
- 潜在错误检查: 检查代码中可能存在的潜在错误，例如未使用的变量、重复定义的变量、访问未定义的属性等等。
- 最佳实践检查: 检查代码是否符合最佳实践，例如是否使用了
===代替==、是否使用了const和let代替var等等。
3. ESLint 的配置
ESLint的配置主要通过.eslintrc.js或者.eslintrc.json文件进行。这个文件定义了ESLint的规则和插件。
一个简单的.eslintrc.js配置：
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'prettier' // 放在最后，覆盖前面的配置
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: [
'@typescript-eslint'
],
rules: {
'no-unused-vars': 'warn', // 未使用的变量警告
'no-console': 'warn', // 禁止使用console.log警告
'@typescript-eslint/explicit-function-return-type': 'off' // 关闭TS的函数返回类型检查
}
};配置项解释:
env: 定义了代码运行的环境，例如浏览器、Node.js等。extends: 继承了其他配置，例如eslint:recommended是ESLint官方推荐的规则，plugin:@typescript-eslint/recommended是TypeScript ESLint插件推荐的规则。prettier放最后是为了覆盖前面配置的格式化规则，让 Prettier 来接管格式化。parser: 指定了代码解析器，例如@typescript-eslint/parser是TypeScript ESLint插件提供的解析器。parserOptions: 指定了解析器的选项，例如ecmaVersion指定了ECMAScript版本，sourceType指定了模块类型。plugins: 指定了使用的插件，例如@typescript-eslint是TypeScript ESLint插件。rules: 定义了具体的规则，例如'no-unused-vars': 'warn'表示未使用的变量会发出警告。
4. ESLint 的使用
安装：
npm install eslint --save-dev
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
npm install eslint-config-prettier eslint-plugin-prettier --save-dev运行：
npx eslint . // 检查当前目录下所有文件
npx eslint src // 检查src目录下的所有文件
npx eslint src/index.js // 检查单个文件通常，我们会把ESLint集成到构建流程中，例如使用Webpack或者Rollup的插件，在每次构建时都进行代码检查。也可以配置IDE插件，在编写代码时实时检查。
5. ESLint 的自定义规则
有时候，团队会有一些特殊的代码规范，ESLint自带的规则无法满足需求。这时候，我们可以自定义ESLint规则。
例如，我们想要禁止使用alert()函数：
// 自定义规则：no-alert.js
module.exports = {
meta: {
type: 'problem',
docs: {
description: '禁止使用alert()函数',
category: 'Best Practices',
recommended: 'warn'
},
fixable: null, // 是否可以自动修复
schema: [] // 规则的选项
},
create: function (context) {
return {
CallExpression: function (node) {
if (node.callee.name === 'alert') {
context.report({
node: node,
message: '禁止使用alert()函数'
});
}
}
};
}
};然后在.eslintrc.js中配置：
module.exports = {
// ...
rules: {
'no-alert': 'error' // 使用自定义规则，并设置为error级别
},
plugins: [
// ...
],
rulesDirectory: [
'./eslint-rules' // 自定义规则的目录
]
};6. ESLint 的总结
ESLint就像一个严格的“代码警察”，帮助我们检查代码质量，统一代码风格，减少潜在的错误。虽然刚开始配置和使用可能会觉得麻烦，但长期来看，它能大大提高代码质量和团队协作效率。
第二部分：Formatting (Prettier) – 代码美化的“Tony老师”
有了ESLint这个“警察叔叔”，代码质量有了保障，但代码风格可能还是五花八门。比如，有些人喜欢用两个空格缩进，有些人喜欢用四个空格缩进，有些人喜欢在行尾加分号，有些人不喜欢加分号。这时候，Prettier就派上用场了。
1. Prettier 是干嘛的？
Prettier是一个代码格式化工具。它会自动格式化你的代码，使其符合统一的风格。你可以把它想象成代码美化的“Tony老师”，帮你把代码打理得整整齐齐，漂漂亮亮。
2. Prettier 的核心功能
- 代码格式化: 自动格式化代码，例如缩进、空格、换行、分号等等。
- 支持多种语言: 支持JavaScript、TypeScript、CSS、HTML、JSON等多种语言。
- 可配置性: 可以通过配置文件自定义格式化规则。
- 与ESLint集成: 可以与ESLint集成，实现代码检查和格式化一体化。
3. Prettier 的配置
Prettier的配置主要通过.prettierrc.js或者.prettierrc.json文件进行。这个文件定义了Prettier的格式化规则。
一个简单的.prettierrc.js配置：
module.exports = {
semi: false, // 是否加分号
singleQuote: true, // 是否使用单引号
trailingComma: 'es5', // 尾随逗号
tabWidth: 2, // tab宽度
useTabs: false, // 是否使用tab缩进
printWidth: 80, // 超过多少字符换行
};配置项解释:
semi: 是否在语句末尾添加分号。singleQuote: 是否使用单引号代替双引号。trailingComma: 是否在对象或数组的最后一个元素后添加逗号。tabWidth: tab的宽度。useTabs: 是否使用tab进行缩进。printWidth: 每行代码的最大长度，超过这个长度会自动换行。
4. Prettier 的使用
安装：
npm install prettier --save-dev运行：
npx prettier --write . // 格式化当前目录下所有文件
npx prettier --write src // 格式化src目录下的所有文件
npx prettier --write src/index.js // 格式化单个文件通常，我们会把Prettier集成到构建流程中，例如使用Webpack或者Rollup的插件，在每次构建时都进行代码格式化。也可以配置IDE插件，在保存文件时自动格式化。
5. Prettier 与 ESLint 的集成
Prettier只负责代码格式化，不负责代码检查。而ESLint既可以进行代码检查，也可以进行代码格式化。但是，ESLint的格式化能力不如Prettier强大。因此，我们通常会将Prettier与ESLint集成，让Prettier负责代码格式化，ESLint负责代码检查。
集成的步骤如下：
- 安装相关依赖：
npm install eslint-config-prettier eslint-plugin-prettier --save-dev- 修改
.eslintrc.js配置文件：
module.exports = {
// ...
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'prettier' // 放在最后，覆盖前面的配置
],
plugins: [
'prettier'
],
rules: {
'prettier/prettier': 'error', // 开启prettier规则，并设置为error级别
'arrow-body-style': 'off',
'prefer-arrow-callback': 'off',
}
};- 在
.prettierignore文件中添加需要忽略的文件或目录：
node_modules
dist这样，ESLint就会使用Prettier的格式化规则进行代码检查，如果代码不符合Prettier的规则，ESLint就会报错。
6. Prettier 的总结
Prettier就像一个专业的“Tony老师”，帮助我们格式化代码，使其符合统一的风格。它可以大大提高代码的可读性，减少代码审查的时间，提高团队协作效率。
第三部分：Transpilation (Babel) – 代码兼容性的“万能翻译官”
现在，我们的代码质量有了保障，代码风格也统一了。但是，新的问题又来了。现在浏览器和Node.js的版本更新很快，ES6、ES7、ES8、ESNext等新特性层出不穷。但是，并不是所有的浏览器都支持最新的JavaScript语法。这时候，Babel就派上用场了。
1. Babel 是干嘛的？
Babel是一个JavaScript编译器。它可以将ES6+的代码转换为ES5的代码，使其可以在旧版本的浏览器中运行。你可以把它想象成代码兼容性的“万能翻译官”，帮你把最新的JavaScript代码翻译成旧版本的JavaScript代码，让你的代码可以在任何浏览器中运行。
2. Babel 的核心功能
- 语法转换: 将ES6+的语法转换为ES5的语法，例如箭头函数、class、promise等等。
- polyfill: 提供ES6+的新API的polyfill，例如
Array.from()、Promise等等。 - 代码转换: 可以进行代码转换，例如将JSX转换为JavaScript代码。
- 插件机制: 提供了丰富的插件，可以扩展Babel的功能。
3. Babel 的配置
Babel的配置主要通过babel.config.js或者.babelrc.json文件进行。这个文件定义了Babel的转换规则和插件。
一个简单的babel.config.js配置：
module.exports = {
presets: [
['@babel/preset-env', { targets: { node: 'current' } }],
'@babel/preset-typescript',
],
plugins: [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }],
],
};配置项解释:
presets: 预设，是一组插件的集合，例如@babel/preset-env包含了ES6+的语法转换插件，@babel/preset-typescript包含了TypeScript的语法转换插件。@babel/preset-env：可以根据目标环境自动选择需要的转换插件。targets: { node: 'current' }表示目标环境是当前Node.js版本。 如果要兼容浏览器，可以配置targets: { browsers: ['> 1%', 'last 2 versions', 'not dead'] }。
plugins: 插件，可以扩展Babel的功能，例如@babel/plugin-proposal-decorators包含了对装饰器的支持，@babel/plugin-proposal-class-properties包含了对类属性的支持。
4. Babel 的使用
安装：
npm install @babel/core @babel/cli --save-dev
npm install @babel/preset-env @babel/preset-typescript --save-dev
npm install @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties --save-dev运行：
npx babel src --out-dir dist // 将src目录下的所有文件转换为ES5代码，并输出到dist目录
npx babel src/index.js --out-file dist/index.js // 将单个文件转换为ES5代码，并输出到dist/index.js通常，我们会把Babel集成到构建流程中，例如使用Webpack或者Rollup的插件，在每次构建时都进行代码转换。
5. Babel 的 Polyfill
Babel只负责语法转换，不负责polyfill。也就是说，Babel只能将ES6+的语法转换为ES5的语法，但不能提供ES6+的新API的polyfill。例如，如果你的代码使用了Array.from()方法，Babel只能将Array.from()转换为ES5的语法，但不能提供Array.from()的polyfill。
要提供ES6+的新API的polyfill，需要使用@babel/polyfill或者core-js。
安装：
npm install @babel/polyfill --save或者
npm install core-js --save然后在入口文件中引入：
import '@babel/polyfill'; // 或者 import 'core-js/stable';或者在 webpack.config.js 中配置：
module.exports = {
entry: ['@babel/polyfill', './src/index.js'], // 或者 entry: ['core-js/stable', './src/index.js'],
// ...
};6. Babel 的总结
Babel就像一个“万能翻译官”，帮助我们将最新的JavaScript代码转换为旧版本的JavaScript代码，让我们的代码可以在任何浏览器中运行。它可以大大提高代码的兼容性，减少兼容性问题，提高开发效率。
总结：三剑客的完美配合
好了，今天咱们就聊到这里。总结一下，ESLint、Prettier、Babel这三个工具，就像前端工程化的“三剑客”，它们各司其职，又相互配合，共同保障代码质量、统一代码风格、提高代码兼容性。
| 工具 | 作用 | 形象比喻 | 核心价值 |
|---|---|---|---|
| ESLint | 代码质量检查，发现潜在错误 | 代码警察 | 提高代码质量，减少bug |
| Prettier | 代码格式化，统一代码风格 | Tony老师 | 提高代码可读性，减少code review时间 |
| Babel | 代码转换，将ES6+代码转换为ES5代码 | 万能翻译官 | 提高代码兼容性，让代码在旧浏览器中运行 |
希望今天的分享能对大家有所帮助。记住，前端工程化不是一蹴而就的，需要不断学习和实践。让我们一起努力，打造更健壮、更易维护的前端应用！下次再见！