前端代码格式化工具

前端代码格式化工具

前言

在多人合作开发项目的过程中，由于每个程序员的编程习惯不同，经常会出现代码风格不一致的情况。

由此引发出了一个问题 ---- 代码提交时，会出现大量的格式修改。

于是，我们制定了统一的开发标准来规范代码风格。

但是，程序员需要花费大量时间去熟悉开发标准，才能开发出风格统一的代码。

于是，为了让程序员的开发工作更方便，我们使用了代码格式化工具，让它自动对代码进行格式化。

目前，比较流行的代码格式化工具有 ESLint 和 Prettier 。

接下来，我们就一起来了解一下它们的功能和使用方法。

两个概念

代码格式化工具制定的规则分为两种：

1. 代码风格规则：max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style...

   这类规则关注的是代码的格式是否好看。

2. 代码质量规则：no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors...

   这类规则关注的是代码是否会出错。

ESLint

1. 什么是 ESLint ？

   ESLint 是一个用于识别 ECMAScript / JavaScript 并且按照规则给出报告的工具。

   它既关注代码质量问题，也关注一部分代码风格问题。

2. 为什么使用 ESLint ？

   ESLint 可以检测出 JS 代码中的问题，并报告出来。

   我们可以自己修复这些问题，也可以用 ESLint ，通过格式化代码来修复这些问题。

3. ESLint 的使用方式

   1. 安装 ESLint

      npm install eslint --save-dev
      

   2. 创建配置文件

      npm init @eslint/config
      

   3. 检测指定文件中的代码问题

      npx eslint yourfile.js
      

   4. 使用 ESLint 格式化文件

      npx eslint --fix yourfile.js
      

   为了更直观地定位 ESLint 检测到的代码问题，并且更方便的修复它们，我们需要在 VSCode 中安装 ESLint 插件。

   5. 安装 ESLint 插件

      这样就可以在 VSCode 中直观地看到代码问题了。

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uZBbO7Rl-1646983139098)(./images/vscode-eslint-2.jpg)]

   6. 在 VSCode 配置文件中加入代码：

      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
      

      这样在保存的时候， ESLint 就会自动格式化代码了。

Prettier

1. 什么是 Prettier ？

   Prettier 是一个“固执己见的”代码格式化工具。

   它只关注代码风格问题，完全不关注代码质量问题。

   所谓“固执己见”就是指，Prettier 对代码风格进行了明确的设置，而且不支持改动。

   如果你使用 Prettier ，那你就要完全接受它制定的代码风格规则。

2. 为什么使用 Prettier ？

   Prettier 可以自动帮我们把代码格式化成统一的风格。

   虽然， Prettier 制定的代码风格规则不一定 100% 符合我们希望的方式。

   但是，使用了 Prettier ，我们就可以搁置关于代码风格的争论，把精力投入到开发工作中。

3. Prettier 的使用方式

   我们可以在项目中安装 Prettier 来使用：

   1. 安装 Prettier

      npm install --save-dev --save-exact prettier
      

   2. 创建配置文件

      echo {}> .prettierrc.json
      

   3. 格式化所有文件

      npx prettier --write .
      

   也可以在 VSCode 中安装 Prettier 插件来使用：

   1. 安装 Prettier 插件

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2jyi1RQz-1646983139126)(./images/prettier-vscode.jpg)]

   2. 使用 Prettier 格式化代码

      • 在文档中右键选择格式化方式

      • 选择使用 Prettier 格式化

   如果项目中安装了 Prettier ，那么插件会优先使用项目中安装的 Prettier 版本，格式化代码。

   如果项目中没有安装 Prettier ，那么插件会使用自带的 Prettier 版本，格式化代码。

   也就是说，无论项目中是否安装了 Prettier ，VSCode 的 Prettier 插件都可以正常工作。

ESLint 和 Prettier 一起使用

我们了解到 Prettier 制定的是代码风格规则，ESLint 既有代码风格规则也有代码质量规则。

那么就出现了一个问题，Prettier 和 ESLint 的代码风格规则有一部分是有冲突的。

我们需要安装 eslint-config-prettier 来关闭掉 ESLint 中与 Prettier 有冲突的规则，让 Prettier 来完全掌控代码风格。

1. 安装 eslint-config-prettier ：

   npm install --save-dev eslint-config-prettier
   

2. 修改配置文件 .eslintrc.* ：

   {
     "extends": [
       "some-other-config-you-use",
       "prettier"
     ]
   }
   

这样我们就可以同时使用 ESLint 和 Prettier 了。