# Stylelint

> **TL;DR**
> Required plugin:
>
>
>
> `CSS`:   the plugin is bundled with IntelliJ IDEA and enabled by default.

IntelliJ IDEA integrates with [Stylelint](http://stylelint.io/) so you can inspect your CSS code from inside the IDE. Stylelint wakes up automatically when you edit a CSS file and highlights the detected problems, refer to [Lint your code](#ws_stylelint_lint_your_code) below.

Besides CSS, you can also use Stylelint to verify other style sheets by applying [customSyntax](https://stylelint.io/user-guide/usage/options/#customsyntax) as described below in [Lint stylesheets
different from CSS](#ws_stylelint_custom_syntax).

## Before you start

Procedure:

1. Download and install [Node.js](http://nodejs.org/#download).

2. Make sure a local Node.js runtime is configured in your project:   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))) and go to `Languages & Frameworks | JavaScript Runtime`. The Node runtime field shows the default project Node.js runtime.  Learn more from [Configuring a local Node.js
interpreter](developing-node-js-applications.html#ws_node_configure_local_node_interpreter).

3. Make sure the  CSS bundled plugin is enabled in the settings.  Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Plugins`.  Click the Installed tab. In the search field, type CSS. For more information about plugins, refer to [Managing plugins](managing-plugins.html).

## Install Stylelint

Procedure:

* Open your command-line shell or  the embedded Terminal (`Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)))  and type:

`npm install --save-dev stylelint stylelint-config-standard`

This installs Stylelint and its [standard
configuration](https://github.com/stylelint/stylelint-config-standard). Learn more from the [Stylelint official website](https://stylelint.io/user-guide/get-started).

## Activate and configure Stylelint

Procedure:

1. To activate Stylelint,   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to Languages & Frameworks | Style Sheets | Stylelint, and select the Enable checkbox. After that the controls in the dialog become available.

2. In the Stylelint Package field,  specify the location of the stylelint package installed globally or in the current project. If you followed the standard installation procedure, IntelliJ IDEA detects the package automaticaly.

3. In the Run for files field, specify the pattern that defines the set of files to be linted. By default, StyleLint processes only plain CSS files therefore the default pattern is `**/*.{css}`.

To lint files of other types or files stored in specific folders, use [glob patterns](https://github.com/isaacs/node-glob#glob) to update the default pattern. To lint files of other types also use custom configs as described in [Lint stylesheets
different from CSS](#ws_stylelint_custom_syntax) below.

> **Note:**
> The Process JS files checkbox is no longer on the page. However, if you selected it in previous versions of IntelliJ IDEA, this setting is reflected in the default pattern as follows:
>
>
>
>
> ```
> **/*.{css,js}
> ```

* For example, to lint HTML, Vue, SCSS, Styled Components, JavaScript, TypeScript, JSX, and TSX as well, update the default pattern as follows: ``` **/*.{html,vue,css,scss,js,ts,jsx,tsx} ```

* To lint files from a specific folder, including subfolders, replace `**/*` with `<path to the folder>/**/*`. Suppose, you have a project with the following structure: ![Stylelint: custom patterns. Example project structure](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_stylelint_configure_scope.png) To lint CSS and SCSS files only in the `styles` folder, update the pattern as follows: ``` styles/*.{css,scss} ``` As a result, the files `styles.css` and `lint_scss.scss` will be linted while `no_lint_scss.scss` will not.

4. Optionally:

In the Configuration file field, specify the location of your configuration file.

By default, the field is empty and IntelliJ IDEA uses the Stylelint native mechanism to detect configurations automatically. With this auto-detection mode, Stylelint goes up the folder structure and looks for configurations defined in one of the following ways:

* Through a `stylelint` property in a `package.json` file.

* In a `.stylelintrc.json`, `.stylelintrc.yaml`, `.stylelintrc.yml`, or `.stylelintrc.js` file.

* In a `stylelint.config.js` file that exports a JavaScript object.

* In a `stylelint.config.cjs` file that exports a JavaScript object. When running Stylelint in JavaScript, packages with the `"type":"module"` property in their `package.json`.

Learn more from the [Stylelint official website](https://stylelint.io/user-guide/configure).

To use a custom configuration file, click ![the Browse button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.actions.menu-open.svg) in the Configuration file field and select the path to the required configuration file in the dialog that opens.

### Fix problems automatically on save

Stylelint can fix the detected problems every time your changes are saved either manually, with `Ctrl+S` (Windows), `⌘ S` (macOS), `⌘ S` (IntelliJ IDEA Classic (macOS)), `⌘ S` (macOS System Shortcuts), `Ctrl+S` (XWin), `Ctrl+S` (GNOME), `Ctrl+S` (KDE), `Ctrl+X, Ctrl+S` (Emacs), `Ctrl+S` (Sublime Text), `⌘ S` (Sublime Text (macOS)), `Ctrl+S` (NetBeans), `Ctrl+Shift+S` (Visual Studio), `⌘ ⇧ S` (Visual Studio (macOS)), `Ctrl+S` (Eclipse), `⌘ S` (Eclipse (macOS)), or automatically, when you launch a run/debug configuration, or close IntelliJ IDEA, or perform version control actions For more information, refer to [Autosave](saving-and-reverting-changes.html).

Procedure:

* Open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Languages & Frameworks | Style Sheets | Stylelint`, and select the Run stylelint --fix on save checkbox.

> **Tip:**
> Enabling this option also enables [Run stylelint
> --fix](saving-and-reverting-changes.html#actions-on-save) in `Settings | Tools | Actions on Save`.

## Lint your code

Stylelint wakes up automatically when you edit a Style Sheet file and highlights the detected problems.

Procedure:

* To view the description of a problem in a popup, hover over the highlighted code.

![Stylelint popup](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_stylesheets_stylelint_popup.png)

Stylelint can automatically fix detected problems in the current file in unambiguous cases using the [Stylelint Auto Fix](https://stylelint.io/user-guide/usage/options#fix) functionality. To apply Auto Fix, click Stylelint: Fix current file in the popup.

* Alternatively, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) and select Stylelint: Fix current file from the list.

![Stylelint quick-fix](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_stylesheets_stylelint_quick_fix.png)

* The Fix current file action is also available for rules from additionally installed plugins.

![Fix current file for rules from an extra plugin](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_stylesheets_stylelint_fix_current_file_for_extra_plugin.png)

## Lint stylesheets different from CSS

To lint stylesheets different from CSS, you need to use [customSyntax](https://stylelint.io/user-guide/usage/options/#customsyntax) either directly or using a community shared configuration. Learn more from [Stylelint official
website](https://stylelint.io/user-guide/get-started/#linting-everything-else).

Procedure:

1. Install stylelint together with the appropriate shared config depending on the stylesheet you want to lint, for example, SCSS:

```SHELL
npm install --save-dev stylelint stylelint-config-standard-scss
```

Learn more about available shared configs from the [Stylelint official website](https://stylelint.io/developer-guide/syntaxes/).

2. Open your Stylelint configuration file and add an `extends` field with the following contents:

```SHELL
{
    "extends": "<shared config>"
}
```

For example:

```SHELL
{
    "extends": "stylelint-config-standard-scss"
}
```

## See also

### Procedures

[Code inspections](code-inspection.html)

### Reference

[Inspections](inspections-settings.html)