在前端开发中，代码规范是非常重要的一环。而手动确保代码规范一致性是一项繁琐而费时的任务。幸运的是，现在有一些工具可以自动化执行这项任务，ESLint 和 Prettier 就是其中的佼佼者。在本文中，我们将深入了解如何使用 VSCode 集成这两个工具并自动优化你的代码。
什么是 ESLint
ESLint 是一个开源的 JavaScript 代码检查工具，它可以帮助您在代码中发现问题，并支持自定义规则。ESLint 可以检查语法错误，变量作用域规则，代码样式和最佳实践等方面的问题。
ESLint 通过在终端使用命令行运行，或在项目中的编辑器中使用插件来运行。在 VSCode 中，您可以使用 ESLint 扩展程序轻松集成它。
什么是 Prettier
Prettier 是另一个开源的代码格式化工具，它可以通过自动将您的代码格式化为一致的风格来解决团队协作中的代码样式问题。类似于 ESLint，Prettier 也支持在终端使用命令行运行，或在项目中的编辑器中使用插件来运行。在 VSCode 中，您可以使用 Prettier 扩展程序轻松集成它。
安装和配置 ESLint 和 Prettier
首先，您需要在项目中安装 ESLint 和 Prettier。您可以使用 npm 或 yarn 安装它们。例如，如果您使用 npm，可以在终端中键入以下命令来安装：
npm install eslint prettier --save-dev
接下来，您需要为您的项目配置 ESLint 和 Prettier。对于 ESLint，您可以在项目根目录中使用 .eslintrc 文件来配置它。以下是一个基本的 .eslintrc 示例配置：
-- -------------------- ---- -------
-
---------- -----------------------
---------------- -
-------------- -----
------------- --------
--
-------- -
------- --------- ----------
--------- --------- ---------
-
-这是一个非常基本的配置，它将扩展来自 eslint:recommended 的规则，并定义了两个规则。其中，semi 规定必须加上分号，quotes 规定字符串必须用双引号引用。
对于 Prettier，您可以在项目根目录中使用 .prettierrc 文件来配置它。以下是一个基本的 .prettierrc 示例配置：
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false
}这是一个基本的配置，它指定了打印宽度为 80，使用 2 个空格缩进，使用分号，不使用单引号。
集成 ESLint 和 Prettier 到 VSCode
一旦您安装完 ESLint 和 Prettier 并为其配置了您的项目，下一步是将它们集成到 VSCode 中。
首先，为了让 VSCode 能够读取您的项目，您需要打开您的项目并将其作为工作区打开。在 VSCode 中，您可以在左侧菜单栏中找到“打开文件夹/工作区”选项。
然后，您需要安装 ESLint 和 Prettier 扩展程序。打开 VSCode 的扩展程序视图，并搜索“ESLint”和“Prettier”扩展程序，并点击安装它们。
接下来，您需要在 VSCode 的设置中配置您的项目，以指定使用 ESLint 和 Prettier。打开 VSCode 的设置视图并搜索 eslint，然后找到“ESLint:Enable”选项，选择“打开设置 (json)”并添加以下设置：
-- -------------------- ---- -------
-
---------------------- -----
--------------------------- -
----------------------- ----
--
---------------- -----
---------------------------- -
-
------------ ----
-
--
------------------ -
-------------
------------------
-------------
-----------------
-
-上述设置将启用 ESLint，启用自动格式化并保存，指定 ESLint 在工作目录中查找配置文件，并定义要验证的文件类型列表。
接下来，打开 VSCode 的设置视图并搜索 prettier，然后找到“Prettier:Require Config”选项，并将其设置为 true。这会告诉 VSCode 在项目根目录中查找 .prettierrc 文件并使用它来格式化您的代码。
测试和示例
现在您已经完成了集成 ESLint 和 Prettier 到您的项目和 VSCode 中的过程，您可以尝试在项目中编写一些代码。当您编写代码时，您应该会看到自动修复的错误（如果您有的话）并应用 Prettier 格式。如果您尝试使用错误的引号、缩进等代码格式，这些工具会自动帮助您修复这些问题。
以下是一些示例：
-- -------------------- ---- ------- ---------------------- -- ------ -- ------ - ----------------------- - -- ----- --- -------------------------- -- ----- -- ----------------------- --- -- ----------------------- ---- ---------------- ----------
使用 ESLint 和 Prettier 后以上示例将自动修复，格式化的结果如下：
-- -------------------- ---- ------- ----------------------- -- ------ - ----------------------- - --- --------------- - ---------- -- ----------------------- --- -- - ----------------------- - ---- - ---------------- ---------- -
总结
通过使用 ESLint 和 Prettier，您可以轻松地为您的项目确保一致的代码规范。与手动编写代码规范相比，这样可以节省大量的时间并减少错误。使用 VSCode 集成这些工具也很容易，所以您可能会发现这样的方式成为您日常前端开发必备的一部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64996b1d48841e989467340a