#108 Update readme for IDE integration.

Author: hkirsman

README.md

@@ -107,18 +107,52 @@ You can easily use the code quality checkers on your CI (CircleCi/Jenkins/GitLab
 ./vendor/bin/grumphp run --no-ansi --no-interaction
 ```
 
-## IDE Integration
+## IDE Integration (optional)
 
-To use PHPCS from your IDE, you can point it to the following script:
+### Prerequisites
 
+#### Ubuntu
+To install the necessary PHP components without Apache:
 ```
-vendor/wunderio/code-quality/bin/phpcs-docker
+sudo apt install php-cli php-tokenizer
 ```
 
-This script runs PHP_CodeSniffer inside a Docker container using the PHP 8.2
-CLI image. It mounts the current working directory to the /app directory inside
-the container and executes the PHPCS command with the WunderAll standard.
+#### macOS
+[Placeholder for macOS installation instructions]
 
-For Visual Studio Code you'd also need this plugin
-https://marketplace.visualstudio.com/items?itemName=shevaua.phpcs
+### Configuration
+
+#### Visual Studio Code
+
+1. Install the [Drupal extension](https://marketplace.visualstudio.com/items?itemName=Stanislav.vscode-drupal).
+2. Open the Drupal extension configuration.
+3. Find "Drupal > Phpcs: Args" and "Drupal > Phpcbf: Args".
+4. Click "Edit in settings.json" and add:
+
+```json
+{
+    "drupal.phpcs.args": [
+        "--standard=WunderAll"
+    ],
+    "drupal.phpcbf.args": [
+        "--standard=WunderAll"
+    ]
+}
+```
+
+PHPCS usage Example in Visual Studio Code:
+![PHPCS Usage Example in VSC](https://user-images.githubusercontent.com/11972062/221161739-cabcd4b5-800d-4d5b-8071-9324bf2bcc08.gif)
+
+#### PhpStorm
+
+Open settings and look for PHP_Codesniffer. Make sure these settings are the same:
+![PhpStorm settings PHPCS 1/2](https://www.upload.ee/image/16969201/2024-08-14_15-59.png)
+
+Check the paths and validate:
+![PhpStorm settings PHPCS 2/2](https://www.upload.ee/image/16969203/2024-08-14_16-01.png)
+
+Warnings are underlined and you can choose to fix them by right clicking:
+![How to fix 1/2](https://www.upload.ee/image/16969207/2024-08-14_16-03.png)
 
+Choose the "PHP Code Beautifier and Fixer: fix the whole file"
+![How to fix 2/2](https://www.upload.ee/image/16969210/2024-08-14_16-04.png)