介绍
ESLint 和 Prettier 都是 JavaScript 中非常流行的代码检查工具。它们可以分别用来检查代码中潜在的问题和格式化代码风格。在本文中，我们将讨论如何在 VSCode 中配置 ESLint 和 Prettier，以帮助您在编写 JavaScript 代码时更加高效和准确。
安装
在使用 ESLint 和 Prettier 之前，您需要确保它们已被正确安装。
安装 ESLint：在终端中运行
npm install eslint --save-dev命令进行安装。安装 Prettier：在终端中运行
npm install prettier --save-dev命令进行安装。
配置
配置 Prettier
- 在根目录下创建一个名为
.prettierrc的文件。
示例代码：
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
}这个配置文件中包含了一些常见的规则。您可以根据自己的需求进行调整。
- 配置 VSCode 的 formatOnSave 功能。
打开 VSCode，按下 cmd + , 或者 ctrl + , 打开 VSCode 首选项面板，搜索 "Format On Save" 并勾选。
配置 ESLint
- 在根目录下创建一个名为
.eslintrc.json的文件。
示例代码：
-- -------------------- ---- -------
-
------ -
---------- -----
------- -----
------ ----
--
---------- -
---------------------
-----------------------------
--
---------------- -
-------------- -----
------------- --------
--
---------- -
----------
--
-------- -
-------------------- --------- -
------------- ---
----------- --
---------- ------
------- -----
-------------- -----
---------------- -----
--
-
-这个配置文件中包含了一些常见的规则。您可以根据自己的需求进行调整。
- 配置 VSCode 的 ESLint 插件。
打开 VSCode，按下 cmd + , 或者 ctrl + , 打开 VSCode 首选项面板，搜索 "ESLint" 并安装它。安装完成后，再次按下 cmd + , 或者 ctrl + , 打开首选项面板，搜索 "ESLint: Auto Fix On Save" 并勾选。
结论
本文介绍了如何在 VSCode 中配置 ESLint 和 Prettier。使用这些工具可以大大提高代码的准确性和可读性。如果您在编写 JavaScript 代码时遇到了问题，可以参考本文进行相关配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efb6ed6fbf96019730964f