BananaAcid/readme.md

## readme.md

      
    Raw
  

              readme.md
            
          
    This is a living-document... immer wenn Änderungen nötig werden, werde ich dies hier updaten.
1. Installieren (Kommandozeile)

win:VSCode (per Win+R und eingeben: cmd )

\>  bitsadmin /transfer vscode /download /priority normal "https://aka.ms/win32-x64-user-stable" "%temp%\vscode.latest.exe" &&  %temp%\vscode.latest.exe /SILENT /NORESTART /MERGETASKS=!runcode
osx:VSCode (per Terminal mit brew)

$ brew install --cask visual-studio-code
manuell (win, osx, ...)


https://code.visualstudio.com/download

1.2. Erweiterungen installieren

neue Eingabeaufforderung (cmd) / OSX Terminal  .. einfügen:

code --install-extension ms-ceintl.vscode-language-pack-de --install-extension ritwickdey.liveserver --install-extension mrmlnc.vscode-less --install-extension bananaacid.compile-superhero --install-extension xyz.local-history --install-extension fabiospampinato.vscode-diff --install-extension aaron-bond.better-comments --install-extension christian-kohler.path-intellisense --install-extension Syler.sass-indented
In er obigen Zeile beinhaltet:


ms-ceintl.vscode-language-pack-de-> VSCode mit deutschem Sprachpaket
ritwickdey.liveserver -> Lokalen statischen Webserver starten per Go-Live Button in VSCode
mrmlnc.vscode-less -> LESS Syntax highlighting
bananaacid.compile-superhero -> Compiliert Sass/Less/Typescript/Jade/Pug zu CSS/JS/HTML wenn eine Datei gespeichert wird
xyz.local-history -> Änderungsverlauf der Projektdateien lokal verfolgen (Kein Code-Verwaltungssystem benötigt)
fabiospampinato.vscode-diff -> Dateien auf unterschiede vergleichen (z.B. auch mit local-history)
aaron-bond.better-comments -> Bessere darstellung bei Kommentaren: TODOs, Alerts, Queries, TODOs, Highlights, deaktivierter Code
christian-kohler.path-intellisense -> Pfad-Vervollständigung beim tippen von Dateipfaden in HTML etc.
Syler.sass-indented -> Unterstützung für *.sass Dateien

Zusätzlich nützlich:

code --install-extension jsdelivr.jsdelivr --install-extension deshorsley.generatesrihash --install-extension lior-chamla.google-fonts --install-extension ms-vsliveshare.vsliveshare-pack --install-extension ms-vscode-remote.vscode-remote-extensionpack

jsdelivr.jsdelivr -> jQuery, Bootstrap und Andere einfach <script src> und <link ..stylesheet> mit SRI für Safari Zeilen zu generieren (Strg+Umsch+P dann jsdelivr)

deshorsley.generatesrihash -> integrity="" Attribute zu generieren (Strg+Umsch+P dann integrity)


lior-chamla.google-fonts -> Google Webfonts einfach einzubinden (Strg+Umsch+P dann fonts)
ms-vsliveshare.vsliveshare-pack -> Kollaboratives arbeiten: Um an Code von jemand andern mitzuarbeiten / debuggen
ms-vscode-remote.remote-containers -> Projekte mit Docker-Setups zeigen automatisch eine Info das Docker gestartet werden kann + einfaches Konfigurieren/integrieren von Docker

oder: ms-vscode-remote.vscode-remote-extensionpack -> Paket mit zusätzlich WSL und SSH, 'open any folder in a container, on a remote machine, or in WSL'


Zusätzlich interessant:


ms-vscode.sublime-keybindings -> exakte Submlime Keybindings (Default ist aber schon sehr ähnlich)
streetsidesoftware.code-spell-checker-german -> Rechtschreibüberprüfung für deutsche Sprache (muss aber ggf. An und Ausgeschaltet werden: Strg+Umsch+P dann spell)

Änderungs-Info:


wscats.qf durch bananaacid.compile-superhero ausgetauscht (wscats Version hat zu viele Bugs, aber gleiche Konfigurationsoptionen)
alexbabichev.formatter-pug -> entfernt, da sonst die Emmet-Unterstützung in Pug-Dateien blockiert wird

2. in VSCode

VSCode starten

"whitespaces" reparieren

Menü -> View -> Toggle Render Whitespace (einmal ausschalten und anschalten) -> Zeigt dann erst Führende-Abstände
Jegliche option


... ist unter Strg + Umschalt + P per Suchfenster erreichbar
Schneller Fensterwechsel per Strg + P
Im Program-Suche-Fenster, können per "diff" dateien verglichen werden
Unten in der Seitenleiste ist "Local History", da kann zur ausgewählten Datei mit einer Vorversion verglichen werden

Hilfreiches


Code kann sehr schnell automatisch generiert werde, z.B. die Seitenstruktur in einer HTML/PUG mit ! eingeben und dann TAB oder auch link:css und TAB

Details: https://docs.emmet.io/cheat-sheet/


3. .. dann VSCode neu starten.


ggf. muss die Extension 'Live Server' deaktiviert und aktiviert werden (wenn kein Go-Live button un der Statusleiste ist)

4. Plugin config

1. Tab: Extensions öffnen

2. "Sass/Less/Typescript/Jade/Pug Compile-SuperHero" -> Konfigurationsrädchen -> Erweiterungseinstellungen


Hier gibt es 2 Varianten

Benutzer: Global für alle Projekte (Hier besser alle Häkchen herausnehmen
Arbeitsbereich: Für das gerade geöffnete Projekt (wird mit dem Projekt gespeichert)


3. Struktur

  - ./src
    - ( /assets/*.jpg ...svg,gif,pdf ... ggf. wenn ein Asset-Optimierer verwendet wird/Plugin)
    - /styles/*.less
    - /styles/*.scss
    - /styles/*.sass
    - /markup/*.pug
    - /scripts/*.js (es5 und es6)
    - /scripts/*.ts
    - /scripts/*.jsx
  - ./www
    - /*.html
    - /assets/*.jpg ...svg,gif,pdf ...
    - /js/*.js
    - /css/*.css

4. ./dest ändern:


Jade & Pug: ../../www
Sass & Less: ../../www/css
Javascript / Typescript: ../../www/js

5. "Live Server" -> Konfigurationsrädchen -> Erweiterungseinstellungen


"Live Server >Settings: Root" -> Maus über den eintrag, links dann auf das Rädchen und "Einstellung als JSON kopieren"
"in "Settings.json" bearbeiten" anklicken
in die 2. Zeile rechtsklick und einfügen

anpassen an "liveServer.settings.root": "/www",


6. Konfiguration projektspezifisch, zum copy+pasten


.vscode/settings.json

    {
      "compile-hero.x-compile-files-on-save": true,
      "compile-hero.jade-output-directory": "../../www",
      "compile-hero.less-output-directory": "../../www/css",
      "compile-hero.pug-output-directory": "../../www",
      "compile-hero.sass-output-directory": "../../www/css",
      "compile-hero.typescript-output-directory": "../../www/js",
      "compile-hero.typescriptx-output-directory": "../../www/js",
      "compile-hero.javascript-output-directory": "../../www/js",
      "compile-hero.jade-output-toggle": true,
      "compile-hero.javascript-output-toggle": true,
      "compile-hero.less-output-toggle": true,
      "compile-hero.pug-output-toggle": true,
      "compile-hero.sass-output-toggle": true,
      "compile-hero.typescript-output-toggle": true,
      "compile-hero.typescriptx-output-toggle": true,
      "liveServer.settings.root": "/www",
      "emmet.includeLanguages": { "pug": "pug" },
      "cSpell.language": "en,de",
      "files.exclude": {
          ".history/": true
      }
  }


5. a. PHP: Docker container (osx, win)


Docker Installieren: https://www.docker.com/products/docker-desktop
Anleitung: https://github.com/BananaAcid/docker-php7.4-kitematic-pug-virally
speziell Windows: Hyper-V muss aktiviert sein (Windows Features Aktivieren)

5. b. PHP: Laragon Full (win)


installieren: https://laragon.org/download/index.html (FULL enthällt Apache)
Einstellungen

Hostname: {name}.local
(ggf. Apache Port von 80 auf 8000 ändern wenn laragon den Apache nicht starten will, sonst lassen)


5. c. PHP: XAMPP (osx, win)


installieren: https://www.apachefriends.org/de/download.html

6. VSCode: PHP Datei erstellen


laragon:

neuen Ordner für das Projekt in C:\laragon\www\ erstellen, z.B. C:\laragon\www\Projekt1
in Laragon neu laden anklicken -> http://projekt1.local/ bzw. http://projekt1.local:8000/ geht nun im Browser zum testen


xampp auf OSX:

in den Ordner navigieren \Applications\XAMPP\xamppfiles\htdocs\


neue index.php in diesem Ordner
"Eine Überprüfung ist nicht möglich ..." - VSCode Zeigt eine info zum angeben des Pfades von PHP an. Anklicken.
Maus über PHP > Validate: Executable Path

Auf auftrauchendes Rädchen clicken, dann Einstellungs-ID kopieren


klicken: In "settings.json" bearbeiten

als neue Zeile 2, rechtsklick und einfügen ( php.validate.executablePath )
ändern in  "php.validate.executablePath": "C:\laragon\bin\php\php-7.2.19-Win32-VC15-x64\php.exe", (Komma nicht vergessen)

Info: php- .... -x64 kann abweichen
XAMPP OSX: den entsprechenden Pfad der XAMPP installtion verweden (OSX, Windows mit XAMPP)

/Applications/XAMPP/xamppfiles/bin/php


wenn .pug Dateien mit PHP funktionieren sollen, dann eine /www/.htaccess anlegen und AddType application/x-httpd-php .html eintragen

composer:

http://getComposer.org ... "Composer-Setup.exe" -> "Choose ..." gleicher PHP Pfad zu Laragon's PHP wie weiter oben
Extension um Composer zu handhaben: strg + P ext install ikappas.composer

7. Git


Seitenleiste in VSCode -> Symbol mit den 3 Kreisen, Anleitung folgen

8. FiraCode


Gute Font zum bearbeiten von code

Infos: https://github.com/tonsky/FiraCode
Install: https://github.com/tonsky/FiraCode/wiki/VS-Code-Instructions
VSCode Zusatz-Extension: strg + P ext install coenraads.disableligatures
spezielle Einstellung:
"editor.fontFamily": "'Fira Code Retina', Consolas, 'Courier New', monospace",
"editor.fontWeight": "300",
"editor.fontLigatures": true,

"disableLigatures.mode": "Line",


letzte zeile "disableLigatures.mode"

Konfiguriert die Extension coenraads.disableligatures
Cursor -> wenn Cursor in dem Bereich einer Ligatur ist, nehme die Ligatur auseinander (zeige normal an)
Line -> wenn Cursor irgendwo in der Zeile ist, nehme die Ligatur auseinander