Setting Up Your PHPStorm Environment
Popup Maker uses an editorconfig file to help maintain consistent coding styles across developers. PHP Storm comes with the EditorConfig plugin bundled but you may need to ensure that it is enabled.
Popup Maker uses ESLint to lint all of our JS. To integrate our linting with PHPStorm, go to File -> Settings or push CTRL + ALT + S.
Inside the settings, go to Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESlint as shown in this image:
Once on that screen, click the "Automatic ESLint Configuration" option. Click "Apply" and then "OK" to close the settings.
Now, PHPStorm will show red lines under any area that ESLint says is incorrect.
Popup Maker uses StyleLint to lint all of our SCSS and CSS. To integrate our linting with PHPStorm, go to File -> Settings or push CTRL + ALT + S.
Inside the settings, go to Languages & Frameworks -> Style Sheets-> Stylelint as shown in this image:
Once on that screen, click the "Enable" option. If empty, add in path to the styelint in your node modules to the "Stylelint package" option. Click "Apply" and then "OK" to close the settings.
Now, PHPStorm will show red lines under any area that Stylelint says is incorrect.
Popup Maker uses PHPCS to lint PHP to match best practices and WordPress Coding Standards. To integrate linting in PHP Storm, go to File -> Settings or push CTRL + ALT + S.
Inside the settings, go to Languages & Frameworks -> PHP -> Quality Tools as shown in this image:
Once on that screen, enable PHPCS. If empty, point the path to the PHPCS bin folder in the vendor folder. Click "Apply".
From there, if you never had PHPCS enabled in PHP Storm before, you will want to go to Editor -> Inspections -> PHP -> Quality Tools to set the Coding Standard to "WordPress". While there, be sure to set the "Check files with extensions:" option to only "php" or it will also show PHP linting within your JS files which conflict with the warnings from ESLint.
