在 vscode 中使用 ESLint 和 Prettier 进行代码格式化-JavaScript中文网-JavaScript教程资源分享门户

在 vscode 中使用 ESLint 和 Prettier 进行代码格式化

前言

前端开发中代码格式化的问题一直备受关注，代码格式化对于维护代码体系、提升代码可读性以及加强团队合作都具有非常重要的意义。作为目前前端开发中比较流行的工具，ESLint 和 Prettier 可以帮助我们实现代码的自动格式化，本文将详细介绍如何在 vscode 中使用 ESLint 和 Prettier 对代码进行格式化。

ESLint 简介

ESLint 是一个开源的 JavaScript Lint 工具，它可以用来校验代码规范，提高代码质量和可读性。ESLint 的特点是可以对开发者所编写的代码进行静态分析，并给出警告和错误信息，帮助开发者排除一些 JavaScript 中常见的错误。

Prettier 简介

Prettier 是一个代码格式化工具，它可以帮助我们统一代码风格，提高代码质量和可读性。Prettier 的特点是可以对代码进行自动格式化，帮助开发者节省时间和精力，让开发者能够更专注于开发本身。

安装

首先需要在 vscode 中安装 eslint 和 prettier 插件，在插件商店搜索并安装即可。接下来需要在项目中安装 eslint 和 prettier 的依赖包，可以使用 npm 或 yarn 进行安装。

npm 安装

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier -D

yarn 安装

yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier -D

配置

在项目根目录下新建 .eslintrc.json 文件，并添加如下代码：

{
  "extends": ["plugin:prettier/recommended"]
}

这里使用了 eslint-plugin-prettier 和 eslint-config-prettier 插件，它们分别实现了 ESLint 和 Prettier 的集成。其中 prettier/recommended 是预设的配置，包含了一些比较常用的规则。

在项目根目录下新建 .prettierrc 文件，并添加如下代码：

{
  "arrowParens": "always",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 120
}

这里仅列出了常用的一些配置项，更多配置项可以查看官方文档。

在 vscode 中按下 Ctrl + , 或者点击文件 -> 首选项 -> 设置，将打开 vscode 的用户设置。在搜索栏中搜索 eslint，找到 ESLint: Enabled 选项并勾选，使其开启对代码的校验。在搜索栏中搜索 format，找到 Editor: Format On Save 选项，勾选以在保存文件时自动格式化代码。

示例代码

function test () {
  console.log('hello world')
}

test()

运行 eslint 和 prettier 后，示例代码应该会被自动格式化为如下代码：

function test() {
  console.log("hello world");
}

test();

总结

ESLint 和 Prettier 可以帮助我们实现代码的自动格式化，提高代码质量和可读性。在 vscode 中使用 ESLint 和 Prettier 进行代码格式化非常方便，只需要安装插件和依赖包，配置相关文件即可。需要注意的是，虽然自动格式化可以减少代码错误和提高代码质量，但它并不能替代开发者的经验和技能。我们需要在使用自动格式化的同时，不断提升自己的技术能力和编程经验，才能成为一名优秀的前端开发者。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6546fab97d4982a6eb160750