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.
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
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
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 CTRL
plusALT
plusS
.
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:
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