/ VSCode

Visual Studio Code + JavaScript

Visual Studio Code (VS Code) unterstützt JavaScript Entwickler. Man kann manche Fehler schon bei der Eingabe finden und IntelliSense nützen, selbst für eingebundene Bibliotheken.

Dazu wurde im Rahmen der Serie Helmbergers Let's Code ein Video erstellt:

1. Fehler erkennen

Fügen Sie folgenden Kommentar in ein JavaScript File und sie erkennen so manchen Syntaxfehler:

//@ts-check

Dadurch überprüft VS Code das File, als ob es ein TypeScript Projekt vor sich hätte. Tippfehler und fehlende Libraries werden so rasch erkannt.

2. IntelliSense

Am Beispiel der Bibliothek jQuery wird gezeigt, wie man IntelliSense erhalten kann.
Man fügt am einfachsten das zur Bibliothek gehörige TypeScript Declaration File ein.

Dazu die Eingabe Konsole Öffnen (Ctrl + ö) und ein package.json File mit npm init erzeugen, wie wenn es sich um ein Node.js Projekt handeln würde:

npm init --yes
npm install @types/jquery --save-dev
Bemerkungen:
  1. Die JavaScript Files müssen manchmal geschlossen und erneut geöffnet werden, bevor die Declarations erkannt werden. Oft ist es am einfachsten VS Code komplett zu schließen und neu zu starten.

  2. Falls man über einen Proxy ins Internet gelangt, hilft einem vermutlich folgender Artikel:
    Proxy Settings für npm, Angular CLI, ...

3. Praktische Shortcuts

Command Palette: F1 (oder Ctrl + Shift + P)
z.B. dann Sprache oder Language eintippen, um die Sprache von Visual Studio zu wechseln.

  • Console öffnen: Ctrl + ö
  • Auf vorige Stelle springen: Alt + <- (Alt + ->)
  • Code formatieren: Shift + Alt + F
  • Alle Files speichern: Strg + K - und dann s (ohne Strg!) - Für manchen ist automatisches Speichern praktischer (Menü: File - Auto Save).
  • IntelliSense:
    • Ctrl + Space,
    • Ctrl + Shift + Space,
    • Ctrl + .

Und die üblichen Kürzel:

  • Suchen / Ersetzen:
    • Ctrl + F / f
    • Ctrl + H / h
  • Einfügen, Kopieren, Ausschneiden:
    • Ctrl + v, c, x
  • Rückgängigmachen, Wiederherstellen:
    • Ctrl + z / y

Offizielle Liste: VS Code Keyboard Shortcuts

Tipp: Settings - Ordner verstecken

Will man den node_modules Ordner verstecke und denn lib Ordner nicht in die Suche einbeziehen, macht man am besten Workspace Settings.

Settings - Workspace Settings

in diesem JSON File einfach mal exclude eintippen und man kann damit ganz einfach files.exclude und search.exclude einbinden und selbst dann erweitern:

{
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/node_modules": true
    },
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/lib": true
    }
}
Anhang: Dateien

Zum Nachvollziehen des Beispiels im Video, hier die einzelnen Dateien:

index.js:

//@ts-check

/**
 * Create a text 
 */
function getText(text) {
    return "Hallo " + text
}
 
function runClicked() {
    var input = $(".hlc-input").val();
    $(".hlc-output").text(getText(input));
}

index.html

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="text" class="hlc-input">
    <button onclick="runClicked()">Run</button>
    <div class="hlc-output"></div>
    <script src="index.js"></script>
    <script src="lib/jquery.js"></script>
</body>
</html>

styles.css

body{
    font-size: 48px;
    background-color: lightcyan;
} 

Artikel in diesem Blog


Weitere Let's Code Artikel.