# Editor Integration

For ESLint to work, you need to set up your editor or IDE.

See also <https://eslint.style/guide/faq#how-to-auto-format-on-save>

## Visual Studio Code

1. Install the [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension
2. Add the following settings via `Code` → `Preferences` → `Settings`:

```json
{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}
```

### Additional Extensions

- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) to get inline error messages

> [!WARNING]
> If you have the [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension enabled, make sure to **disable** the extension for your project's workspace. This is because Prettier's rules will conflict with ours.

## PhpStorm

Go to [Preferences | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint](jetbrains://PhpStorm/settings?name=Languages+%26+Frameworks--JavaScript--Code+Quality+Tools--ESLint) and set it to `Automatic ESLint configuration`

1. Install the [File Watchers](jetbrains://PhpStorm/settings?name=Plugins) plugin when not installed
2. Add a new watcher in [Preferences | Tools | File Watchers](jetbrains://PhpStorm/settings?name=Tools--File+Watchers) (\<custom\>) with the following data:

```text
Name: ESLint
File type: Any
Scope: Project files
Program: $ProjectFileDir$/node_modules/.bin/eslint
Arguments: --fix $FilePath$
Output paths to refresh: $FileDir$

- Working directory & Environment variables -

Working directory: $ProjectFileDir$
```

You can also select JavaScript, Vue.js or TypeScript files for `File type`, and copy the watcher for each needed file to only check those files.

Or import the following XML configuration:

```xml
<project version="4">
  <component name="ProjectTasksOptions">
    <TaskOptions isEnabled="true">
      <option name="name" value="ESLint" />
      <option name="fileExtension" value="js" />
      <option name="scopeName" value="Project Files" />
      <option name="program" value="$ProjectFileDir$/node_modules/.bin/eslint" />
      <option name="arguments" value="--fix $FilePath$" />
      <option name="output" value="$FileDir$" />
      <option name="workingDir" value="$ProjectFileDir$" />
      <option name="immediateSync" value="true" />
      <option name="showConsoleOnError" value="true" />
    </TaskOptions>
  </component>
</project>
```

> [!NOTE]
> You can change `fileExtension` to `TypeScript` or `Vue.js` to create separate watchers for different file types. You can also set `fileExtension` to `Any` to watch all file types.