How to make WebStorm format code according to eslint?

在WebStorm中配置ESLint作为代码格式化工具，可以帮助开发者保持代码风格的一致性，并遵守团队或项目的编码规范。下面是如何在WebStorm中设置ESLint并使用它来格式化代码的步骤：

第一步：安装ESLint

首先，确保在你的开发项目中已经安装了ESLint。如果还没有安装，可以通过npm或yarn来安装：

bash
npm install eslint --save-dev
# 或者
yarn add eslint --dev

第二步：配置ESLint规则

在项目的根目录下创建一个.eslintrc配置文件。你可以根据项目的需求自定义规则，或者继承一些常用的规则集，如eslint:recommended或airbnb等。

json
{
  "extends": "eslint:recommended",
  "rules": {
    // 自定义规则
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

第三步：在WebStorm中配置ESLint

1. 打开WebStorm，进入 File | Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint。
2. 勾选 Enable 选项来启用ESLint。
3. 设置ESLint package，通常路径是项目的node_modules/eslint。
4. 在Configuration File选项中指定你的.eslintrc文件路径。
5. 确保Run eslint --fix on save选项被选中，以便每次保存文件时自动格式化代码。

第四步：测试ESLint

为了测试ESLint是否配置正确，你可以故意写一些不符合规则的代码，例如使用双引号而不是单引号。保存文件后，WebStorm应该自动将双引号转换为单引号，这表明ESLint格式化功能已经正常工作。

第五步：团队协作

为了确保团队中所有成员都使用相同的代码格式化标准，可以将.eslintrc文件和package.json中的eslint相关配置提交到版本控制系统中。这样，每个团队成员在安装项目依赖后都将使用相同的ESLint配置。

通过以上步骤，你就可以在WebStorm中利用ESLint来格式化代码，确保代码质量和风格的一致性。这不仅可以减少代码审查中的格式问题，还可以提升团队的开发效率。