各位观众老爷，大家好！欢迎来到今天的代码风格整容院！今天咱们来好好聊聊 JavaScript 世界里的两位大神：ESLint 和 Prettier。别怕，不是什么高深的魔法，就是俩能帮你把代码收拾得漂漂亮亮，还能顺便揪出点小毛病的好工具。
开场白：代码风格的重要性
想象一下，你接手了一个项目，代码风格五花八门，缩进一会儿四个空格，一会儿两个空格，一会儿又用 Tab，简直就像进了迷宫。你想改个 bug，结果光是读懂代码就花了一天。这种痛苦，相信大家都懂。所以，统一的代码风格至关重要，它能提高代码可读性、减少错误、提高团队协作效率，甚至还能让你心情愉悦！
第一位大神：ESLint – 代码质量的守护者
ESLint，顾名思义，就是用来 Linting JavaScript 代码的。Linting 是什么？简单来说，就是静态代码分析，它会在你运行代码之前，检查代码中是否存在潜在的问题，比如：
- 语法错误: 比如少了分号、括号不匹配等等。
- 代码风格问题: 比如变量命名不规范、缩进不一致等等。
- 潜在的 bug: 比如使用了未定义的变量、比较时使用了
==而不是===等等。 - 最佳实践: 比如推荐使用
const或let声明变量，而不是var。
ESLint 的强大之处在于它的可配置性。你可以根据自己的喜好和项目需求，定制一套适合自己的规则。
1. ESLint 的安装和配置
首先，我们需要安装 ESLint：
npm install eslint --save-dev
# 或者
yarn add eslint --dev安装完成后，我们需要初始化 ESLint 的配置文件。在项目根目录下运行：
npx eslint --init
# 或者
yarn eslint --init这个命令会引导你选择 ESLint 的配置方式。你可以选择：
- 使用流行的风格指南： 比如 Airbnb, Standard, Google 等等。这些风格指南已经预定义了一套规则，你可以直接使用。
- 自定义配置： 你可以根据自己的需求，手动配置 ESLint 的规则。
一般来说，推荐使用流行的风格指南，可以省去很多配置的麻烦。
假设我们选择了 Airbnb 风格指南，那么 ESLint 会自动生成一个 .eslintrc.js 文件，内容大概如下：
module.exports = {
'env': {
'browser': true,
'es2021': true,
'node': true,
},
'extends': [
'eslint:recommended',
'airbnb-base',
],
'parserOptions': {
'ecmaVersion': 'latest',
'sourceType': 'module',
},
'rules': {
},
};这个文件定义了 ESLint 的配置。其中：
env：定义了代码运行的环境，比如浏览器、Node.js 等。extends：继承了其他的配置，比如eslint:recommended和airbnb-base。eslint:recommended是 ESLint 官方推荐的规则，airbnb-base是 Airbnb 风格指南的基本规则。parserOptions：定义了 JavaScript 的语法版本和模块类型。rules：定义了自定义的规则。这里可以覆盖或者添加新的规则。
2. ESLint 的基本使用
配置完成后，我们就可以使用 ESLint 来检查代码了。在命令行中运行：
npx eslint your_file.js
# 或者
yarn eslint your_file.jsESLint 会输出代码中存在的问题，包括错误类型、位置等等。
例如，如果你的代码中使用了 console.log，而 Airbnb 风格指南禁止在生产环境中使用 console.log，那么 ESLint 就会报错：
your_file.js
1:1 error Unexpected console statement no-console
✖ 1 problem (1 error, 0 warnings)3. 自定义 ESLint 规则
如果你觉得 Airbnb 风格指南的规则太严格，或者不够满足你的需求，你可以自定义 ESLint 的规则。
在 .eslintrc.js 文件中，你可以在 rules 字段中添加或者覆盖规则。例如，如果你想允许在代码中使用 console.log，你可以这样配置：
module.exports = {
'env': {
'browser': true,
'es2021': true,
'node': true,
},
'extends': [
'eslint:recommended',
'airbnb-base',
],
'parserOptions': {
'ecmaVersion': 'latest',
'sourceType': 'module',
},
'rules': {
'no-console': 'off', // 关闭 no-console 规则
},
};其中，'no-console': 'off' 表示关闭 no-console 规则。
你也可以设置规则的级别，比如：
'off'或0：关闭规则。'warn'或1：开启规则，但是只给出警告。'error'或2：开启规则，并报错。
例如，如果你想在代码中使用 console.log，但是希望 ESLint 给出警告，你可以这样配置：
module.exports = {
'env': {
'browser': true,
'es2021': true,
'node': true,
},
'extends': [
'eslint:recommended',
'airbnb-base',
],
'parserOptions': {
'ecmaVersion': 'latest',
'sourceType': 'module',
},
'rules': {
'no-console': 'warn', // 给出警告
},
};ESLint 提供了大量的规则，你可以根据自己的需求进行配置。具体的规则列表可以参考 ESLint 的官方文档。
4. ESLint 与编辑器集成
为了更方便地使用 ESLint，我们可以将它与编辑器集成。这样，ESLint 就可以在编辑器中实时地检查代码，并在发现问题时给出提示。
主流的编辑器都提供了 ESLint 插件，比如 VS Code 的 ESLint 插件、Sublime Text 的 SublimeLinter-eslint 插件等等。安装插件后，你需要配置插件，让它使用你的项目的 ESLint 配置文件。
配置完成后，当你编辑代码时，ESLint 就会自动检查代码，并在发现问题时给出提示。这可以帮助你及时发现并解决问题，避免在代码提交后才发现错误。
第二位大神：Prettier – 代码格式化的专家
Prettier 是一个代码格式化工具。它会自动格式化你的代码，让你的代码风格保持一致。与 ESLint 不同的是，Prettier 主要关注的是代码的格式，比如缩进、换行、空格等等。
1. Prettier 的安装和配置
首先，我们需要安装 Prettier：
npm install prettier --save-dev
# 或者
yarn add prettier --dev安装完成后，我们可以在项目根目录下创建一个 .prettierrc.js 文件，用于配置 Prettier 的规则。
例如，如果你想使用 2 个空格作为缩进，你可以这样配置：
module.exports = {
'tabWidth': 2,
'semi': true, // 添加分号
'singleQuote': true, // 使用单引号
'trailingComma': 'es5', // 在 ES5 中添加尾随逗号
};这个文件定义了 Prettier 的配置。其中：
tabWidth：定义了缩进的空格数。semi：定义了是否添加分号。singleQuote：定义了是否使用单引号。trailingComma：定义了是否添加尾随逗号。
Prettier 提供了大量的配置选项，你可以根据自己的需求进行配置。具体的配置列表可以参考 Prettier 的官方文档。
2. Prettier 的基本使用
配置完成后，我们就可以使用 Prettier 来格式化代码了。在命令行中运行：
npx prettier --write your_file.js
# 或者
yarn prettier --write your_file.jsPrettier 会自动格式化你的代码，并将格式化后的代码写入到文件中。
3. Prettier 与 ESLint 集成
Prettier 和 ESLint 可以一起使用，让你的代码既符合代码风格规范，又保持一致的格式。
为了将 Prettier 和 ESLint 集成，我们需要安装一些额外的插件：
npm install eslint-config-prettier eslint-plugin-prettier --save-dev
# 或者
yarn add eslint-config-prettier eslint-plugin-prettier --dev其中：
eslint-config-prettier：关闭 ESLint 中与 Prettier 冲突的规则。eslint-plugin-prettier：让 ESLint 使用 Prettier 来格式化代码。
安装完成后，我们需要修改 .eslintrc.js 文件，添加以下配置：
module.exports = {
'env': {
'browser': true,
'es2021': true,
'node': true,
},
'extends': [
'eslint:recommended',
'airbnb-base',
'plugin:prettier/recommended', // 添加 plugin:prettier/recommended
],
'parserOptions': {
'ecmaVersion': 'latest',
'sourceType': 'module',
},
'rules': {
},
};在 extends 字段中添加 plugin:prettier/recommended，表示使用 Prettier 来格式化代码。
配置完成后，当你运行 ESLint 时，ESLint 就会自动使用 Prettier 来格式化代码，并在发现格式问题时给出提示。
4. Prettier 与编辑器集成
与 ESLint 类似，我们也可以将 Prettier 与编辑器集成。这样，Prettier 就可以在编辑器中自动格式化代码，让你无需手动运行 Prettier 命令。
主流的编辑器都提供了 Prettier 插件，比如 VS Code 的 Prettier 插件、Sublime Text 的 Pretty JSON 插件等等。安装插件后，你需要配置插件，让它使用你的项目的 Prettier 配置文件。
配置完成后，当你保存代码时，Prettier 就会自动格式化代码。
代码示例：展示 ESLint 和 Prettier 的效果
假设我们有以下代码：
function add(a,b){
return a + b;
}
console.log(add(1, 2));这段代码存在以下问题：
- 函数名和括号之间有空格。
return语句和表达式之间有空格。- 缺少分号。
- 使用了
console.log。
使用 ESLint 和 Prettier 格式化后，代码会变成这样：
function add(a, b) {
return a + b;
}
// console.log(add(1, 2));可以看到，ESLint 和 Prettier 自动解决了代码中的问题，让代码更加规范和易读。
最佳实践：如何更好地使用 ESLint 和 Prettier
- 选择合适的风格指南： 根据自己的喜好和项目需求，选择一个合适的风格指南。
- 自定义规则： 根据自己的需求，自定义 ESLint 和 Prettier 的规则。
- 与编辑器集成： 将 ESLint 和 Prettier 与编辑器集成，可以提高开发效率。
- 在 CI/CD 流程中集成： 在 CI/CD 流程中集成 ESLint 和 Prettier，可以保证代码质量。
- 团队协作： 团队成员应该统一使用 ESLint 和 Prettier，保持代码风格一致。
- 定期更新： 定期更新 ESLint 和 Prettier，可以获得最新的功能和修复 bug。
总结：ESLint 和 Prettier 的优势
| 特性 | ESLint | Prettier |
|---|---|---|
| 主要功能 | 代码质量检查，发现潜在问题，执行代码风格规范 | 代码格式化，自动调整代码风格 |
| 关注点 | 代码逻辑、错误检测、风格规范 | 代码格式、缩进、换行、空格等 |
| 可配置性 | 非常灵活，可以自定义大量的规则 | 相对固定，可配置选项较少 |
| 自动化程度 | 可以自动修复部分问题，但需要手动修复大部分问题 | 高度自动化，可以自动格式化整个代码库 |
| 与编辑器集成 | 良好，可以实时检查代码 | 良好，可以自动格式化代码 |
| 适用场景 | 需要保证代码质量和执行代码风格规范的项目 | 需要统一代码风格，提高代码可读性的项目 |
| 合作方式 | 通常与 Prettier 配合使用，ESLint 负责代码质量检查，Prettier 负责代码格式化 | 通常与 ESLint 配合使用，ESLint 负责代码质量检查，Prettier 负责代码格式化 |
结尾：代码的整洁是程序员的浪漫
ESLint 和 Prettier 是 JavaScript 开发中不可或缺的工具。它们可以帮助你提高代码质量、统一代码风格、提高开发效率。记住，代码的整洁是程序员的浪漫，让我们一起用 ESLint 和 Prettier，让我们的代码更加优雅、易读、易维护！
今天的讲座就到这里，谢谢大家！希望大家以后写代码的时候，都像给自己的代码做了一次精细的整容，漂漂亮亮的，自己看着舒服，别人看着也赏心悦目！