Stylelint
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. To view the description of a problem in an information popup, hover the mouse pointer over a stripe in the Validation sidebar. To examine errors and apply suggested quick fixes, press Alt+Enter.
Installing Stylelint
In the embedded Terminal (Alt+F12), type:
npm install -g stylelint
Activating and configuring Stylelint
-
In the Settings/Preferences dialog (Ctrl+Alt+S), go to Languages and Frameworks | Style Sheets | Stylelint.
-
On the Stylelint page that opens, select the Enable checkbox to activate Stylelint. After that the controls in the dialog become available.
-
In the Node Interpreter field, specify the Node.js interpreter to use. This can be a local Node.js interpreter or a Node.js on Windows Subsystem for Linux.
-
In the Stylelint Package field, specify the location of the stylelint package installed globally or in the current project.
-
If you want Stylelint to also wake up automatically when you are editing a JavaScript file and check Style Sheet injections in it, select the Process JS files checkbox.