前端代码格式化工具Eslint和Prettier

前端代码格式化工具

为什么使用前端代码格式化工具？

在多人开发的项目中，每个人都有自己的开发习惯，到最后的结果就是代码不易维护，由此最开始大家会制定一套开发规则，但是很耗人力，后来为了开发简单方面，有了自动化工具Eslint和Prettier

两个概念

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

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

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

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

ESLint

一、什么是 ESLint ？

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

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

二、为什么使用 ESLint ？

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

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

三、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 中直观地看到代码问题了。

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 插件

2、使用 Prettier 格式化代码

        在文档中右键选择格式化方式
        选择使用 Prettier 格式化

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

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

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

ESLint 和 Prettier 一起使用

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

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

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

安装 eslint-config-prettier ：

npm install --save-dev eslint-config-prettier
1
修改配置文件 .eslintrc.* ：

{

        "extends": [

                "some-other-config-you-use",

                "prettier"

        ]

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