对于前端开发者来说，代码风格的一致性和规范性是非常重要的。Prettier 和 ESLint 是两个非常流行的代码风格工具，前者主要用于代码格式化，后者主要用于代码规范检测。本文将介绍如何在 VS Code 中结合使用 Prettier 和 ESLint，以便更好地提高代码质量，提高开发效率。
安装和配置 Prettier
首先，需要在 VS Code 中安装并配置 Prettier 扩展。可以在 VS Code 扩展市场中搜索 "prettier"，并安装名为 "Prettier - Code formatter" 的扩展。安装完成后，按下 Ctrl + Shift + P 打开命令面板，输入 "format document with..."，选择 "Prettier" 即可对当前打开的文档进行格式化。
为了更方便地使用 Prettier，可以在项目的根目录添加一个名为 ".prettierrc" 的配置文件，用于指定代码格式化的规则，如下:
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 120
}上述配置将会禁用分号、使用单引号、在有多个属性时使用尾部逗号、输出宽度设置为 120。
安装和配置 ESLint
接下来，需要在 VS Code 中安装并配置 ESLint 扩展。在 VS Code 扩展市场中搜索 "eslint" 并安装名为 "ESLint" 的扩展。安装完成后，可以进行一些基本的配置。
打开 ".eslintrc" 文件并添加以下配置:
-- -------------------- ---- -------
-
---------- -----------------------
---------------- -
-------------- ----
--
------ -
---------- -----
------ ----
--
-------- --
-上述配置表明 "eslint:recommended" 是继承的规则，使用的 ECMAScript 版本是 2018，代码将在浏览器和 ES6 环境下运行。在 "rules" 中，可以配置自定义的规则或使用预置的规则。
在项目根目录中，可以使用 "eslint --init" 命令来创建一个 ".eslintrc" 配置文件。按照提示，可以选择使用哪种规范、支持的 ECMAScript 版本等。
结合使用 Prettier 和 ESLint
最后，需要设置 VS Code 编辑器集成 Prettier 和 ESLint。打开 VS Code 的设置（File->Preferences->Settings）, 搜索 "format on save" 开启这个设置，它会在保存文档时自动格式化文档内容。
在搜索框中继续搜索 "eslint.validate" 开启自动检测，设置 "onSave"，"onType" 和 "onFocusChange" 为 true。这将在保存、代码输入和交换代码编辑器时自动运行 ESLint 检查您的代码。
-- -------------------- ---- -------
-
---------------------- -----
--------------------------- -
----------------------- ----
--
------------------ -
-------------
------------------
-------------
-----------------
-
-完成设置后，每次保存的时候 VS Code 将会格式化代码和运行 ESLint 检查代码规范，降低了代码的难度和出错率。
示例代码
-- -------------------- ---- ------- -------- ---------------- -- - ------ ---- - ---------------------------- ---- --- --- - - --- --- ----- ------ -- ---------------------------------
运行 ESLint 检测之后，将会发现 addTwoNumbers() 函数缺少了必要的分号，obj 对象的属性需要用双引号包裹。运行 Prettier 格式化之后，代码变成了下面这个样子：
-- -------------------- ---- ------- -------- ---------------- -- - ------ - - -- - ---------------------------- ---- --- --- - - ----- --- ------- ------ -- ---------------------------------
经过格式化和规范检查之后，代码更加易读、可维护和可扩展。
总结
本文介绍了如何在 VS Code 中结合使用 Prettier 和 ESLint，从而更好地保持前端代码风格和规范。使用工具和插件能够节省开发时间、减少错误和维护成本，所以掌握这些技能是非常重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d44ca3b5eee0b525bd5525