PhpStorm integrates with Stylelint 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, see Lint your code below.
Before you start
Open the embedded Terminal (Alt+F12) and type:
npm install --save-dev stylelint stylelint-config-standard
Activate and configure Stylelint
To activate Stylelint, open the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | Style Sheets | Stylelint, and select the Enable checkbox. After that the controls in the dialog become available.
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, PhpStorm detects the package automaticaly.
In the Configuration file field, specify the location of your configuration file.
By default, the field is empty and PhpStorm 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:
stylelintproperty in a package.json file.
In a .stylelintrc.json, .stylelintrc.yaml, .stylelintrc.yml, or .stylelintrc.js file.
"type":"module"property in their package .json.
Learn more from the Stylelint official website.
To use a custom configuration file, click in the Configuration file field and select the path to the required configuration file in the dialog that opens.
Lint your code
Stylelint wakes up automatically when you edit a Style Sheet file and highlights the detected problems.
To view the description of a problem in a popup, hover the mouse pointer over the highlighted code.
Stylelint can automatically fix detected problems in the current file in unambiguous cases using the Stylelint Auto Fix functionality. To apply Auto Fix, click Stylelint: Fix current file in the popup.
Alternatively, press Alt+Enter and select Stylelint: Fix current file from the list.