@bitfactory/stylelint-config/docs/04-editor-integration.md

Stylelint sharable config for Bitfactory NL (part of NOBEARS) projects

# Editor Integration

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

See also <https://stylelint.io/user-guide/integrations/editor>

## Visual Studio Code

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

```json
{
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": 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 | Style Sheets | Stylelint](jetbrains://PhpStorm/settings?name=Languages+%26+Frameworks--Style+Sheets--Stylelint) and set it to `Automatic Stylelint 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: Stylelint
File type: Any
Scope: Project files
Program: $ProjectFileDir$/node_modules/.bin/stylelint
Arguments: --fix $FilePath$
Output paths to refresh: $FileDir$

- Working directory & Environment variables -

Working directory: $ProjectFileDir$
```

You can also select CSS, SCSS, SASS or Vue.js 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="Stylelint" />
      <option name="fileExtension" value="css" />
      <option name="scopeName" value="Project Files" />
      <option name="program" value="$ProjectFileDir$/node_modules/.bin/stylelint" />
      <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 `fileType` to `SCSS`, `SASS`, or `Vue.js` to create separate watchers for different file types. You can also set `fileType` to `Any` to watch all file types.