Visual Code Studio

Guter freier Editor von Microsoft. Auch für Linux und Mac verfügbar.

https://code.visualstudio.com/docs/?dv=osx (Docs für Mac)

VCS Shortcuts

Formatieren

Kontextmenü oder

Cmd K F -> Auswahl formatieren
Shift Alt F -> alles formatieren

Auswahl

MMB - Drag Select (beliebiger Block)

Multiline Cursor

Alt + Click -> zusätzlicher Cursor
Alt + Cmd + Pfeil -> oben oder unten zusätzlicher Cursor
Shift + Alt + Cmd + Pfeil -> Multicursor Auswahl

Komplette Zeilen bearbeiten (Copy, Move, Delete)

Alt + Pfeil -> move line
Alt + Cmd + Pfeil -> copy line
Shift + Cmd + K -> delete line

Refactoring

F2

Fehlermeldungen

F8 -> cycle durch Fehlermeldungen

Tipparbeit mit Emmet sparen

https://docs.emmet.io/cheatsheet-a5.pdf
https://docs.emmet.io/cheat-sheet/

Beispiele

Child: > 
 nav>ul>li   

Sibling: +
 div+p+bq

Climb-up: ^
 div+div>p>span+em^bq (Bei Blockquote gehts wieder eine Ebene zurück)

Grouping: ()
 (div>dl>(dt+dd)*3)+footer>p

Multiplication: * 
 ul>li*5 // 5 li Elemente

Naming and numbering: $
 ul>li.sample$*5 // li mit class: sample1, sample2...

 h$[title=topic$]{Headline $}*3   
 <h1 title="topic1">Headline 1</h1>   
 <h2 title="topic2">Headline 2</h2>   
 <h3 title="topic3">Headline 3</h3>

 ul>li.item$$$*5 // item001, item002...

=== HTML Tags mit Emmet erzeugen ===
 a   
 <a href=""></a>
 a:link   
 <a href="http://"></a>
 a:mail   
 <a href="mailto:"></a>
 link
 link:css
 link:print
 link:favicon
 link:touch
 meta
 meta:utf
 img:srcset, img:s
 img:sizes, img:z
 ul+
 ...

Nützliche Extensions

Live Sass Compiler
PHP Intellisense
OneDarkPro Theme

Tipps

Extension Endung hinzufügen

File aufmachen und unten die richtige Syntax auswählen