Skip to content

Instantly share code, notes, and snippets.

@BananaAcid
Last active Jan 22, 2021
Embed
What would you like to do?
Web-Starter Package on VSCode für Mediengestalter

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, ...)

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

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

Hilfreiches

  1. 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

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)

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)

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment