Webstorm 中配置 ESLint 自动 format 代码

介绍

ESLint 是一个 JavaScript 代码检查工具，可以帮助我们在开发过程中避免一些常见的错误。Webstorm 是一款功能强大的前端开发工具，可以帮助我们更高效地开发。在本文中，我们将介绍如何在 Webstorm 中配置 ESLint 自动 format 代码，以提高我们的开发效率。

步骤

安装 ESLint

如果还没有安装 ESLint，可以使用以下命令进行安装：

npm install eslint --save-dev

安装 ESLint 插件

在 Webstorm 中搜索并安装 ESLint 插件，可以在 Preferences > Plugins > Marketplace 中搜索并安装。

配置 ESLint

在 Webstorm 中，我们可以通过以下步骤配置 ESLint：

1. 打开 Preferences > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint。
2. 勾选 Enable。
3. 配置 ESLint 可执行文件的路径。可以使用以下命令查找 ESLint 可执行文件的路径：

npm bin

1. 配置 .eslintrc 文件的路径。.eslintrc 文件是 ESLint 的配置文件，用来指定 ESLint 的规则。可以在项目根目录下创建 .eslintrc 文件，并指定其路径。

配置自动 format

在 Webstorm 中，我们可以通过以下步骤配置自动 format：

1. 打开 Preferences > Editor > Code Style > JavaScript。
2. 在右侧的方框中选择 ESLint。
3. 勾选 Enable。
4. 勾选 Run eslint --fix on save。
5. 点击 Apply。

现在，每次保存文件时，Webstorm 将自动运行 ESLint 并修复代码格式。

示例代码

以下是一个示例 .eslintrc 文件：

{
  "extends": "eslint:recommended",
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

这个 .eslintrc 文件指定了两个规则：强制使用分号和双引号。

以下是一个示例 JavaScript 文件：

function sayHello(name) {
  console.log("Hello, " + name)
}

sayHello("World")

如果保存这个文件，Webstorm 将自动运行 ESLint 并将代码格式化为：

function sayHello(name) {
  console.log("Hello, " + name);
}

sayHello("World");

总结

在本文中，我们介绍了如何在 Webstorm 中配置 ESLint 自动 format 代码。这个配置可以帮助我们在开发过程中避免一些常见的错误，并提高我们的开发效率。如果你还没有尝试过 ESLint，我建议你去尝试一下，相信它会帮助你写出更好的代码。

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