前端代码规范-Eslint与Prettier等常见易混淆问题解惑

前端代码规范-Eslint与Prettier等常见易混淆问题解惑

代码规范的重要性，我们这里就不多说啦，不管是从项目长期可维护性，还是从团队协作的角度来说，在实际项目开发中，引入代码规范都会非常有必要。

但是在引入代码规范的过程中，尤其新手来说，对于eslint,prettier，vscode格式化插件，以及airbnb，standard等名词很容易混淆，导致我们在项目中引入代码规范的时候，会出现不知道该配置哪些地方，或者引入之后不知道什么原因格式化无效等问题。

接下来，我们就针对这些常见易混淆的问题总结一下：

1. eslint与prettier有什么区别
2. eslint与airbnb，standard代码规范有什么区别
3. eslint与vscode eslint插件有什么区别

Eslint与Prettier的区别

ESLint 是一个 javascript 代码检测工具，它主要检测的是下面这些问题：

• 例如未使用的变量
• 未定义的引用
• 比较时使用三等
• 禁止不必要的括号
• ...等等

以上这些问题，都是我们需要去统一约定的，这就是Eslint所做的事情。

那Prettier呢，我们都知道Prettier是一款纯粹的代码格式化工具，很显然，它的作用就是：格式化，不关系代码语法等问题。 比如常见格式化问题：

• 代码缩紧
• 单引号与双引号
• ...等鞥

因此，我们可以理解Eslint和Prettier的作用都是为了让我们项目中的代码规范能够统一，只是他们的专攻的方向不一样，而在实际项目开发中，最佳实践就是将Eslint与Prettier都引入到我们的项目中。 不过要注意一点：Eslint与Prettier虽然专攻的方向不一样，但是还是有一部分重叠的规则，那如果项目中亮着都引入啦，就需要我们额外处理这些这部分冲突的规则，（具体如何解决后面会讲到）。

Eslint与airbnb，standard代码规范的区别

我们可以把Eslint理解为一个单纯的代码检测工具，那具体检测的标准是什么呢？那就需要定义一系列的规则，比如：单引号双引号问题，我们可以定义一条规则，因此，Eslint默认集成了一套自己的规则列表。

而airbnb，standard代码规范又是什么呢？其实就是各个公司把自己常使用的一些规则列表开源了出来，从而我们在自己的项目中，就可以直接引入这些开源的规则列表，就没必要我们自己去定义规则啦。

常见开源的规则标准有：

• eslint-config-airbnb
• eslint-config-standard
• eslint-config-google

当然，国内的大公司其实也开源了自己的代码规范，比如：腾讯的 eslint-config-tencent等。

eslint与vscode eslint插件有什么区别

我们常说的Eslint，其实就是一个npm包，我们可以在项目中像安装其他依赖包一样，直接安装eslint这个包，并且使用他内置的一些命令，我们也可以修改其对应的配置文件等。

npm init
npm i eslint --save-dev
npx eslint --init // 初始化eslint配置文件
npx eslint lint  // 检测
npx eslint lint --fix // 检测并修复
复制代码

也就是说，安装完之后，我们就可以手动去执行npx eslint lint命令去对我们的代码进行检测是否符合规范的，同时还可以使用--fix参数去手动修复。

但是试想一下，我们在实际代码开发的过程中，每写几行代码，就得手动执行一下这个命令，那得多麻烦呀，很显然，这不是我们的最佳实践。那到底如何做呢？答案就是在编辑器中引入eslint插件.

这里以vscode为例，如下图所示，安装eslint插件：

安装完成以后，打开我们自己的项目中，我们就可以右击使用vscode的格式化功能去直接对我们的项目中代码进行格式化啦。要注意的一点：当vscode安装eslint插件以后，就会自动优先以我们项目中引入的eslint规则去进行格式化，这样可以保证如果我们切换到其他项目，使用了不同的规则，vscode格式化的时候，依然是以当前项目的规则为准。，当然前提是我们项目需要引入eslint。

除此之外，还可以进一步优化，每次都得右击才能进行格式化是不是也很麻烦，是的，这时我们也可以修改vscode eslint插件的配置，从而实现每次我们保存代码的时候，就可以自动格式化。

具体配置如下：

因此，在实际项目开发中，如果我们想要去在vscode 等编辑器中使用eslint格式化功能，就需要保证上图中的2，3选项为true.

实战：在react项目中引入Eslint和Prettier

相信，通过前面的介绍，大家对这些概念有了一个初步的认识与区分，着下来，我们通过在react项目中引入eslint和prettier实际感受一下：

1. 初始化react项目

npx create-react-app react-demo
cd react-demo
npm start
复制代码

生成的初始目录结构如下图所示：

此时，项目中没有安装eslint和prettier，也没有任何相关配置文件，此时代码中，如果有缩紧问题等都不会有任何提示，例如：第二行

很显然，这样直接继续开发是不行的，尤其是多人协作的时候更是埋下大坑，因此，我们必须在项目中引入代码校验工具，以及代码格式化工具，这就是我们要说的Eslint与Prettier。

2. 配置Eslint

首先，是安装eslint命令，并且生成eslint配置文件。

npm i eslint --save-dev //安装eslint
npx eslint --init // 初始化eslint配置文件
复制代码

执行 npx eslint --init 会让你命令行交互选项，你可以手动去选择：

这里就不具体说每一项该选什么啦，大家结合实际情况和自己的习惯选择即可。如上所示，我们选择好啦。选择好以后，最后一行会提示我们是否要立即安装相关的依赖，我们选择yes即可。

安装完成以后，我们就会发现App.js有自动提示啦，这是因为我们eslint已经生效啦。

我们手动保存一下App.js，发现部分警告会消失，缩紧这些也正常啦（这是因为我们vscode中已经引入了eslint插件，并且配置了保存时自动进行格式化），这正是我们想要的效果。

注意：在顶部要手动引入React，否则会提示：'React' must be in scope when using JSXeslint[react/react-in-jsx-scope]。

还有一点要注意：保存文件以后自动进行格式化，是需要vscode事先安装了eslint插件，并且配置了保存时自动进行格式化。当然，我们也可以配置script命令，去手动校验代码是否符合规范，以及手动去修复部分问题。

// package.json
{
  ...
  scripts: {
    "lint": "eslint lint",
    "lint:fix": "eslint lint --fix"
  }
}
复制代码

这样，我们就可以使用npm run lint以及nom run lint:fix去手动校验代码啦，注意：实际开发中，scripts命令要配置，但更多是依靠vscode eslint插件去进行格式化代码操作，否则每次都手动执行scripts命令太麻烦啦

至此，Eslint配置就基本完成啦。此时通过Eslint就可以解决大部分的规范问题啦，但是还不够，比如：我们在App.js的jsx修改一下缩紧，然后保存，这时eslint没有对jsx完成格式化，这时就是因为我们还需要安装prettier。它是专门用于各种文件的代码格式化的，加上它才是最佳实践。

3. 配置prettier

由于eslint和prettier有部分规则是冲突的，但是在实际项目中，两者又都需要，那如何解决冲突的这部分问题呢？eslint因此推出了eslint-plugin-prettier 插件，也就是说把prettier做成eslint的一个插件，然后引入到eslint中，会用prettier把eslint冲突的那部分覆盖掉。但是我们整体的代码格式化使用的是eslint。

1. 安装依赖

npm i  prettier eslint-config-prettier eslint-plugin-prettier --save-dev 
复制代码

• prettier
• eslint-config-prettier
• eslint-plugin-prettier

2. 创建 .prettierrc.js 配置文件

echo > .prettierrc.js  
复制代码

// .prettierrc.js  
module.exports = {
  ... //规则
};
复制代码

3. 修改 eslint配置

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "plugin:react/recommended",
    "standard",
    "plugin:prettier/recommended", //关键点
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 13,
    sourceType: "module",
  },
  plugins: ["react"],
  rules: {},
};
​
复制代码

至此，我们再打开App.js，保存代码时候，我们会发现jsx也可以进行格式化啦，我们就把eslint和prettier全部引入到项目中。

总结

在实际项目开发中，很可能出现一些格式化无效等各种问题，遇到这些问题，我们可以从以下几方面去思考：

1. 首先要保证我们的项目中引入eslint与prettier，并且有eslint配置文件，确认以后，我们可以通过执行eslint lint与eslint lint --fix命令去检测是否生效，如果正常运行，并且提示我们哪个文件，哪一行代码格式有问题，就说我们项目中的配置基本是没有问题啦。
2. 接下来就是要保证vscode eslint插件是否安装，并且要检测其settings.json是否开启了eslint校验，以及保存时自动格式化等配置。

当然，在实际项目，很有可能因为引入的规则不一样等问题，带来不一样的效果，如果遇到问题，随时可以留言，我们一起讨论。