ESLint 如何在 VSCode 编辑器中自动格式化代码-JavaScript中文网-JavaScript教程资源分享门户

在前端开发过程中，代码风格一直是开发人员必须格外注意的一个问题。为了保证团队开发中代码的一致性和可读性，通常会使用代码风格检查工具来协助开发过程中的代码检查。在 JavaScript 领域，ESLint 已经成为了事实上的标准。

在本文中，我们将介绍如何在 VSCode 编辑器中配置 ESLint，以使其可以自动格式化代码。

安装 ESLint 插件

首先，需要安装 ESLint 插件。打开 VSCode 编辑器并进入扩展菜单，搜索 eslint 并安装。

ESLint 能够对代码进行检查和格式化，但它不是一个 VSCode 插件，所以需要全局安装它。

在终端中输入以下命令：

npm install -g eslint

在项目中，需要安装 eslint-config-airbnb-base 和 eslint-plugin-import 这两个包才能使用 Airbnb 的代码风格规范。你可以通过以下命令安装：

npm install --save-dev eslint-config-airbnb-base eslint-plugin-import

配置 .eslintrc 文件以使用这两个包：

{
  "extends": [
    "airbnb-base"
  ],
  "plugins": [
    "import"
  ]
}

通过以上操作，已经完成了 ESLint 的配置。我们可以手动运行 ESLint 来检查代码，使用以下命令：

eslint yourfile.js

如果你使用了 VSCode，你也可以集成 ESLint 到 VSCode 中并自动格式化代码。

打开 VSCode 编辑器并打开文件夹；
在 VSCode 编辑器中进入工作区，单击选项 文件->偏好设置；
单击 搜索设置 并搜索 eslint.autoFixOnSave 选项；
单击编辑按钮（一个笔形图标）并选择“在工作区设置”或“在用户设置”中更改该选项。

如果您选择的是“在工作区设置”选项，则必须在您的项目中创建 .vscode/settings.json 文件，并将选项添加到其中。

使用以上步骤，你就可以在 VSCode 中自动使用 ESLint 来格式化代码了。

以下是一个示例代码（应遵循 Airbnb 的代码风格规范）：

// javascriptcn.com 代码示例
"use strict";

const myVar = "my var";

function myFunction() {
  console.log(myVar);
}

export default myFunction;

运行 ESLint 自动格式化后：

// javascriptcn.com 代码示例
'use strict';

const myVar = 'my var';

function myFunction() {
  console.log(myVar);
}

export default myFunction;

ESLint 是一个功能强大的代码风格检查工具。通过 VSCode 插件和 eslint-config-airbnb-base 和 eslint-plugin-import 包的使用，我们可以在 VSCode 编辑器中集成 ESLint，自动格式化我们的代码，以保持代码的一致性和可读性。

希望这篇文章能够为你的前端开发过程带来帮助。

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