[

Andrew Baisden

6月16日

6分钟阅读

[

保存

](medium.com/m/signin?ac…)

如何使用ESLint和Prettier进行代码分析和格式化

ESLint和Prettier是两个最流行的工具，当它涉及到在开发人员的代码库中进行代码分析和格式化时。它们的工作非常出色，这就是为什么它们往往是项目设置中的一个重要部分。

两者之间的区别是，ESLint通常负责寻找和报告ECMAScript/JavaScript代码中的不同模式。ESLint被设计成只针对JavaScript文件，在确保代码库的一致性和没有明显的bug方面，它是非常成功的。

另一方面，Prettier是一个有意见的代码格式化器。与ESLint不同，它支持各种语言，如JavaScript、HTML、CSS、GraphQL、Markdown和其他许多语言。这两个工具在开发者社区都得到了相当好的支持，而且在大多数代码编辑器或IDE中都有它们的扩展，例如Visual Studio Code。

Visual Studio Code Marketplace
ESLint
Prettier

网站
prettier.io/
eslint.org/

为什么你应该使用林特和代码格式化器

Linting是一种在你的应用程序准备投入生产之前，在开发模式下修复你的代码中的问题的方法。很多这样的修正可以自动完成，而且你可以定制整个过程以适应你的团队需要。当使用Prettier时，你可以让你的文件中的代码自动格式化，这为你节省了大量的时间和精力。

这也是你在代码审查中需要担心的一件事，因为它保证对每个人都是一样的。它在整个团队中执行相同的风格和代码质量，所以不会像你有自己的个人本地设置时那样有冲突。

这是一个团队在进行项目工作时普遍遵循的过程。典型的做法是有一个ESLint和Prettier的文件，同时还有一个忽略文件，就像每个开发人员在使用GitHub的版本控制服务时应该熟悉的.gitignore 文件。你的主文件的格式可以是JavaScript、YAML或JSON。我在这些例子中使用了JSON。

请看下面的例子文件，它们都在一个项目中。

.eslintignore
.eslintrc.json
.prettierignore
.prettierrc.json

创建ESLint和Prettier工作流程设置

ESLint和Prettier文件可能会相互冲突，因为有的时候它们最终会检查相同的规则，这可能会导致重复。幸运的是，可以让它们一起工作。

Visual Studio代码设置

首先，你需要安装ESLint和Prettier扩展。

然后进入Code -> Preferences -> Settings

你可以使用搜索框来搜索你安装的ESLint和Prettier扩展。保持默认的ESLint设置应该是没问题的，但如果你想的话，你可以改变它们。Prettier可能需要一些全局设置的改变，但可以按照你的意愿进行定制。

这些是我最值得注意的。

Prettier: 半数 ✅
Prettier: 单一报价 ✅
Prettier:尾部逗号es5

在 "设置 "页面上搜索 "格式"。

确保这些设置是正确的，你可能需要向下滚动以找到默认的格式化。

编辑器。保存时的格式 ✅
编辑器。默认格式化器Prettier - 代码格式化器

普通JavaScript/NodeJS设置

打开命令行，然后转到一个类似于你的桌面的目录。运行下面的命令来设置你的项目。

mkdir backendcd backendnpm init -ynpm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev

现在在同一文件夹中运行下面的代码并进行设置。

npm init @eslint/config

这些是我选择的设置。

✔ 你想如何使用ESLint？-检查语法，发现问题，并执行代码风格
✔ 您的项目使用什么类型的模块？-CommonJS（require/exports）
✔您的项目使用哪种框架？-无
✔您的项目是否使用 TypeScript？-没有
✔ 您的代码在哪里运行？-Node
✔ 您希望如何为您的项目定义风格？-使用流行的风格指南
✔ 您希望遵循哪种风格指南？- Airbnb
✔ 您希望配置文件采用什么格式？-JSON

检查eslint-config-airbnb-base@latest的peerDependencies

你所选择的配置需要以下的依赖性。

eslint-config-airbnb-base@latest eslint@⁷.32.0 || ^8.2.0 eslint-plugin-import@².25.2

✔ 您想现在安装它们吗？-是
✔ 您想使用哪个软件包管理器？-npm

现在运行下面代码块中的命令，为Prettier创建文件。

npm install --save-dev --save-exact prettierecho {}> .prettierrc.json

打开你的.eslintrc.json 文件，添加这些配置设置。Prettier需要在数组中排在最后，否则它将无法正常工作。

"extends": ["airbnb-base", "plugin:prettier/recommended"],

接下来打开.prettierrc.json 文件，复制并粘贴这些设置。你可以在Prettier Options文档中了解这些设置。这只是我的设置，你可以根据自己的喜好创建自己的设置。

{  "printWidth": 100,

最后，运行下面的代码，为ESLint和Prettier创建一些忽略文件。它们的工作方式就像.gitignore ，所以无论你在里面有什么条目都会被忽略，所以它们不会被提示或被格式化。

touch .prettierignore .eslintignore

只要把同样的代码复制并粘贴到.prettierignore 和.eslintignore 文件中。

node_modulespackage.lock.jsonbuild

使用ESLint和Prettier

让我们做一个快速测试。在你的编辑器中或在终端使用下面的命令，创建一个index.js 文件。

touch index.js

将这个JavaScript代码添加到文件中。

const x = 100;

在你的代码编辑器中，你应该在底部的问题标签中看到一些错误和警告。而且，如果你通过到处添加间距或制表符使你的代码不那么可读，然后保存该文件。Prettier应该清理并修复一切。

在console.log和测试函数名下应该有一条斜线。如果你把鼠标指针放在它们上面，你可以看到分配给它们的ESLint规则。转到.eslintrc.json 文件，在底部添加这些规则。

"rules": {

现在，如果你回到index.js 文件，警告就应该消失了你可以在ESLint规则文档中找到所有的规则。也可以通过进入Prettier Options页面来改变.prettierrc.json 文件中的规则/选项。

重启ESLint服务器

有时在做了修改之后，linting就不工作了。为了解决这个问题，在Visual Studio Code中运行Shift+CMD+P命令来显示命令调色板，然后搜索ESLint。重新启动ESLint服务器。这应该能使所有文件的提示工作正常进行。

记住，你可能需要在每次添加/删除规则或进行修改时重新启动ESLint服务器。否则，这些规则可能无法工作，并可能导致ESLint和Prettier发生冲突。

ReactJS设置

同样的设置适用于其他JavaScript框架，如React。你只需要选择适当的设置。见下面的例子。

记得选择JavaScript模块（导入/导出），因为这是React使用的，代码将在浏览器中运行。

npx create-react-app my-appcd my-appnpm install eslint eslint-config-prettier eslint-plugin-prettier --save-devnpm init @eslint/config

现在运行下面代码块中的命令，为Prettier创建文件。

npm install --save-dev --save-exact prettierecho {}> .prettierrc.json

打开你的.eslintrc.json 文件，添加这些配置设置。Prettier需要在数组中排在最后，否则它将无法正常工作。

"extends": [

{  "printWidth": 100,

touch .prettierignore .eslintignore

只要复制并粘贴相同的代码到.prettierignore 和.eslintignore 文件中。

node_modulespackage.lock.jsonbuild

现在，如果你打开App.js 文件，你应该在下面的问题标签中看到警告和错误。如果你想禁用一个规则，请按照前面的步骤，在ESLint规则文档中找到这些规则。

提高编码水平

谢谢你成为我们社区的一员!更多内容请关注Level Up Coding出版物。
关注。Twitter,LinkedIn,Newsletter
Level Up正在改变科技招聘的方式 ➡️ 加入我们的人才集体