AJ's angular-php-r-pack-plus

(beta / work in progress)

This extension pack contains my favorite extensions for an TS/JS/Angular & PHP(Laravel/Symfony) & R Setup with debugging eslint, prettier, remote-containers/ssh, sql-tools/Maria, themes, dict, german dict.

In this Readme you can find some instructions on how to get all of it up and running.

Debug

Debugging JS / TS / Angular

Angular must run via ng serve in dev mode (environment.ts -> production: false)

You can either debug via your browser. e.g. Chrome dev tools or you use your IDE:

Setup your IDE

In vscode open the debugging view and choose the correct debug-config, if none exists, create or edit one, you can open the launch.json (config per project) from here and add the config, eg:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "pwa-chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach to Chrome",
      "port": 9222,
      "request": "attach",
      "type": "pwa-chrome",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Start the config via ▶-Button or via shortcut.

If you want to attach to running chrome session, you have to start chrome via google-chrome --remote-debugging-port=9222 in advance.

Do not use the "Debugger for Chrome" extension anymore. This extension has been deprecated as Visual Studio Code now has a bundled JavaScript Debugger that covers the same functionality

( In PhpStorm: In the upper right choose edit configuration e.g.: Name: MyApp, URL: http://localhost:4200, Browser: Chrome, OK; start that Chrome-Debugging, via Click on 🐞-Button )

Debugging Laravel / PHP (7.4) / xdebug (3)

Install xdebug e.g.

    sudo apt-get install php7.4-xdebug

create /etc/php/7.4/cli/conf.d/20-xdebug.ini (within a php-apache docker container this would be e.g. /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini)

    zend_extension=xdebug.so
    xdebug.mode=debug
    xdebug.start_with_request=yes
    xdebug.client_port=9000
    ;xdebug.client_host = 127.0.0.1

you can quickly switch debugging off an on(=slower) with lines like these:

    sudo sed -i "s/xdebug\.mode.*/xdebug\.mode\=debug,develop/g" /etc/php/7.4/cli/conf.d/20-xdebug.ini  # on
    sudo sed -i "s/xdebug\.mode.*/xdebug\.mode\=off/g" /etc/php/7.4/cli/conf.d/20-xdebug.ini            # off

(within a php-apache docker container this would be e.g.

    docker exec -it my-docker_app_1 sed -i "s/xdebug\.mode.*/xdebug\.mode\=debug/g" /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini  # on
    docker exec -it my-docker_app_1 sed -i "s/xdebug\.mode.*/xdebug\.mode\=off/g" /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini  # on

)

You have to restart artisan serve, symfony server:start or reload the Apache Server after changing the debug mode! (within the container, if you use one)

For an Apache within in a container this would be:

    docker exec -it my-docker_app_1 service apache2 reload

Setup your IDE

In vscode open the debugging view and choose the correct debug-config, if none exists, create or edit one, you can open the launch.json (config per project) from here and add the config, eg:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Xdebug local",
            "type": "php",
            "request": "launch",
            "port": 9000
        },
        {
            "name": "Xdebug in container (artisan-serve) ",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "pathMappings": {
                "/var/www": "${workspaceFolder}",
              }
        }
    ]
}

Start the config via ▶-Button or via shortcut.

(In PhpStorm set Ports (e.g. 9000,9003) in Settings->PHP->Debug,Servers with Path Mappings if you debug into a docker container. Activate Debugging in PhpStorm with 📞-Start Listening for PHP Debug Connections Button in the upper right.)

Set a breakpoint and pay attention not to deactivate all breakpoints in your IDE and you should be able to debug your application.

Intelephense with licence key

If you are using Visual Studio Code with Intelephense you can activate your licence key by opening the command palette -- Ctrl + shift + p -- and searching for "Enter licence key" and enter something like 0DARI0SZXGYLFXCDZ3O

Themes

    {
      // ...
      "workbench.iconTheme": "vscode-icons",
      
      // at night
      "workbench.colorTheme": "Darcula",

      // bright day
      "workbench.colorTheme": "GitHub Light Default",
    }

Frontend linting - ESLint / prettier

TS/JS/HTML Linting / Code Style Extensions for vscode

esbenp.prettier-vscode - Prettier - Code formatter
dbaeumer.vscode-eslint - ESLint

example config for vscode

open File > Preferences > Settings or press Ctrl+,
toggle Open Settings (JSON)
Add these lines inside the top-level settings object:

    {
      // ...
      "eslint.alwaysShowStatus": true,
      "eslint.format.enable": true,
      "eslint.lintTask.enable": true,
      "editor.defaultFormatter": "dbaeumer.vscode-eslint",
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
      "eslint.options": { "configFile": ".eslintrc.strict.json" },
    }

example ./.eslintrc.json

    {
    "root": true,
    "ignorePatterns": [
        "projects/**/*"
    ],
    "overrides": [
        {
        "files": [
            "*.ts"
        ],
        "parserOptions": {
            "ecmaVersion": 2020, 
            "sourceType": "module", 
            "project": [
            "tsconfig.json",
            "e2e/tsconfig.e2e.json"
            ],
            "createDefaultProgram": true
        },
        "extends": [
            "plugin:@angular-eslint/ng-cli-compat",
            "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
            "plugin:@angular-eslint/template/process-inline-templates",
            "plugin:angular/johnpapa",
            "prettier",
            "plugin:prettier/recommended"
        ],
        "plugins": [
            "eslint-plugin-react"
        ],
        "rules": {
            "@typescript-eslint/interface-name-prefix": "off",
            "@typescript-eslint/explicit-function-return-type": "off",
            "@typescript-eslint/no-explicit-any": "off"
        }
        },
        {
        "files": [
            "*.html"
        ],
        "extends": [
            "plugin:@angular-eslint/template/recommended"
        ],
        "rules": {}
        }
    ]
    }

Prettier

example ./.prettierrc

    {
      "bracketSpacing": true,
      "semi": true,
      "singleQuote": true,
      "trailingComma": "all",
      "printWidth": 120,
      "tabWidth": 2,
      "proseWrap": "always",
      "useTabs": false,
      "jsxBracketSameLine": true
    }

Linting / Check + Fix Code Style for php

Install php-cs-fixer and phpmd

It might be good practice, not to install those in the main vendor folder, but in another folder, here it is code-style.

    mkdir -p mkdir code-style/check-style
    composer require --working-dir=code-style/check-style friendsofphp/php-cs-fixer
    composer require --working-dir=code-style/check-style phpmd/phpmd

PHP Linting / Code Style Extensions for vscode

usernamehw.errorlens - Error Lens
ecodes.vscode-phpmd - PHP Mess Detector
junstyle.php-cs-fixer - php cs fixer

example config for vscode

"php-cs-fixer.executablePath": "${extensionPath}/php-cs-fixer.phar",
"php-cs-fixer.config": ".php-cs-fixer.php;.php-cs-fixer.dist.php;",
"php-cs-fixer.allowRisky": false,
"php-cs-fixer.autoFixByBracket": true,
"php-cs-fixer.autoFixBySemicolon": true,
"php-cs-fixer.onsave": true,
"php-cs-fixer.pathMode": "override",
"php-cs-fixer.formatHtml": false,
"php-cs-fixer.documentFormattingProvider": true,
"[php]": {
    "editor.defaultFormatter": "junstyle.php-cs-fixer"
},
"phpmd.command": "/home/${USER}/.config/composer/vendor/phpmd/phpmd/src/code-style/phpmd", // globally installed phpmd
"phpmd.rules": "${workspaceFolder}/code-style/check-style/phpmd_config.xml",

you can override project related entries in the project settings like this:

{
    "phpmd.command": "${workspaceFolder}/code-style/check-style/vendor/bin/phpmd",
    "phpmd.rules": "${workspaceFolder}/code-style/check-style/phpmd_config.xml",
}

./code-style/check-style/.php-cs-fixer.dist.php (+ .php-cs-fixer.php) e.g.:

<?php

$finder = PhpCsFixer\Finder::create()
    ->exclude('bin') // exclude directories
    ->notPath('_ide_helper_models.php')
    ->notPath('_ide_helper.php')
    ->in(__DIR__);

$config = new PhpCsFixer\Config();
return $config->setRules([
    '@Symfony' => true, // @PSR12
    'strict_param' => true,

    "phpdoc_annotation_without_dot" => true,
    "self_accessor" => true,
    "combine_consecutive_unsets" => true
])
    ->setFinder($finder);

./code-style/check-style/phpmd_config.xml e.g.:

<?xml version="1.0"?>
<ruleset name="My first PHPMD rule set"
xmlns="http://pmd.sf.net/ruleset/1.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://pmd.sf.net/ruleset/1.0.0
http://pmd.sf.net/ruleset_xml_schema.xsd"
xsi:noNamespaceSchemaLocation="
http://pmd.sf.net/ruleset_xml_schema.xsd">
<description>
Syspons Ruleset
</description>

    <rule ref="rulesets/cleancode.xml" >
        <!--    Static access causes unexchangeable dependencies to other classes and leads to hard to test code.-->
        <!--    Avoid using static access at all costs and instead inject dependencies through the constructor.-->
        <!--    ... but laravel loves them ...-->
        <exclude name="StaticAccess" />

        <!--    A boolean flag argument is a reliable indicator for a violation of the Single Responsibility Principle (SRP). -->
        <!--    You can fix this problem by extracting the logic in the boolean flag into its own class or method.-->
        <exclude name="BooleanArgumentFlag" />

    </rule>
    <rule ref="rulesets/codesize.xml" />
    <rule ref="rulesets/controversial.xml" />
    <rule ref="rulesets/design.xml" />
    <rule ref="rulesets/unusedcode.xml" />
    <rule ref="rulesets/naming.xml">
        <exclude name="ShortVariable"/>
    </rule>
    <rule ref="rulesets/naming.xml/ShortVariable">
        <properties>
            <property name="exceptions" value="up,id,i,j" />
        </properties>
    </rule>
</ruleset>

Scripts

If you have questions or suggestions, please let me know: ajweb.de@gmail.com.

AJ's angular-php-r-plus-pack

ajweb

AJ's angular-php-r-pack-plus

Debug

Debugging JS / TS / Angular

Setup your IDE

Debugging Laravel / PHP (7.4) / xdebug (3)

Setup your IDE

Intelephense with licence key

Themes

Frontend linting - ESLint / prettier

TS/JS/HTML Linting / Code Style Extensions for vscode

example config for vscode

example ./.eslintrc.json

Prettier

example ./.prettierrc

Linting / Check + Fix Code Style for php

Install php-cs-fixer and phpmd

PHP Linting / Code Style Extensions for vscode

example config for vscode

./code-style/check-style/.php-cs-fixer.dist.php (+ .php-cs-fixer.php) e.g.:

./code-style/check-style/phpmd_config.xml e.g.:

Scripts