[PhpStorm][Win] Stylelint and phpBB's extensions

https://phpbbstudio.com/ext/phpbbstudio/studio/styles/all/theme/images/studio-round-blue.svg Development 2019-03-20T02:55:44 phpBB Studio https://phpbbstudio.com/ext/phpbbstudio/studio/styles/all/theme/images/studio-round-green.svg https://phpbbstudio.com/ext/phpbbstudio/studio/styles/all/theme/images/studio-round-green.svg
note

You must have followed this article before proceeding: Area 51 Development: PhpStorm

If you have indeed followed the article, you are mostlikely getting an error in PhpStorm.
I will try to explain how to get rid of this error and thus enabling stylelint to inspect your CSS code.
  »  This will also work for phpBB boards installed through Quick Install.

warning

Error: Could not find “stylelint-order”. Do you need a configBasedir?

The PhpStorm error after enabling stylelint.

There are two prerequisites that we first have to take care of, namely npm and node.js. They both have to be installed on your computer. To do this, you can go to Nodejs.org and download both with a single executable package. If you have them both installed already, you can skip this step.

 
Follow the instructions provided by the executable, you can use the default setttings and finish the installation.
 
To make sure the installation went correctly, you can type the following two shell commands that will return the versions:
 
terminal npm -v
terminal node -v

2b_check_install.png
2b_check_install.png (39.87 KiB) Not viewed yet
1_copy_2_files_from_phpBB.png
1_copy_2_files_from_phpBB.png (13.97 KiB) Not viewed yet

 
Now we need to copy these two files from the phpBB repository to your local board.
 
file .stylelintrc
file package.json

We copy these files to the phpBB root directory of your local board,
for example folder-open-olocalhost/qi/boards/my_forum/.
 
If you have that directory/project open in PhpStorm, you will be prompted with Install Dependencies from package.json. If so, you can click on Run ‘npm install’.
 
Alternatively, you can open the shell from the same folder and type in the following command:
terminal npm install

2_npm_install.png
2_npm_install.png (95.1 KiB) Not viewed yet

Running terminal npm install will give a verbose response, which you can ignore.
You do not have to run the suggested terminal npm audit fix.

After having run terminal npm install from either the shell or PhpStorm itself, the final files has been created in your phpBB root directory, namely file package.lock and folder-open node_modules

Now open the phpBB root directory in PhpStorm if you have not done so already. From within this project you will have to go to the cog Settings panel. Either through “File » Settings” or by pressing CTRLplusALTplusS.

3_install_from_phpstorm.png
3_install_from_phpstorm.png (149.76 KiB) Not viewed yet

Now we select the sector illustrated by the attachment above and click on the plus icon, a dialog box will open where we will search for search stylelint with the search bar, once found click on Install package and wait for its proper installation has taken place. Repeat this step for search stylelint-order.

Click on Apply and then Ok.
And done

After all of these operations we should have a screen that looks like the following:

4_install_from_phpstorm_done.png
4_install_from_phpstorm_done.png (68.95 KiB) Not viewed yet

Now we can perform the inspection of our CSS code and this time we will no longer have the fateful error.
Unfortunately it looks like we are not yet fully compliant with stylelint :nerd:

4_inspection_results.png
4_inspection_results.png (68.57 KiB) Not viewed yet