How to make WebStorm format code according to eslint?

Configuring ESLint in WebStorm as a code formatter helps developers maintain consistent code style and adhere to team or project coding standards. Below are the steps to set up ESLint in WebStorm and use it for code formatting:

Step 1: Install ESLint

First, ensure that ESLint is installed in your development project. If not installed, you can install it using npm or yarn:

bash
npm install eslint --save-dev
# or
yarn add eslint --dev

Step 2: Configure ESLint Rules

Create a .eslintrc configuration file in the root directory of your project. You can customize rules based on project needs or inherit from common rule sets, such as eslint:recommended or airbnb.

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

Step 3: Configure ESLint in WebStorm

1. Open WebStorm and navigate to File | Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint.
2. Check the Enable option to activate ESLint.
3. Set the ESLint package path, typically node_modules/eslint in your project.
4. Specify the path to your .eslintrc file in the Configuration File option.
5. Ensure the Run eslint --fix on save option is selected so that code is automatically formatted on save.

Step 4: Test ESLint

To verify ESLint is configured correctly, intentionally write code that violates the rules, such as using double quotes instead of single quotes. After saving the file, WebStorm should automatically convert double quotes to single quotes, confirming that the ESLint formatting feature is operational.

Step 5: Team Collaboration

To ensure all team members use the same code formatting standards, commit the .eslintrc file and ESLint-related configurations in package.json to version control. This ensures each team member uses the same ESLint configuration after installing project dependencies.

By following these steps, you can leverage ESLint in WebStorm to format code, ensuring both code quality and consistent style. This approach not only minimizes formatting issues during code reviews but also enhances team development efficiency.