Install VisualCode + NodeJs + Vue + Typescript

Inhalt

• Inhalt
• Visual Studio Code
  • Installation
  • Einstellungen
  • Terminal öffnen
  • Häufig verwendete Suchbegriffe
  • Pakete
    • Zugriff
    • Verwendete Pakete Übersicht
• NodeJs
  • Installation
  • Einstellungen
• Neues Projekt anlegen
  • ES Lint
    • Installieren
    • Konfigurieren

Visual Studio Code

Installation

1. Visual Studio Code herunterladen https://code.visualstudio.com/download# (.zip 64-bit) --> D:\PowerPro\Programme\Development\VSCode

2. Starte D:\PowerPro\Programme\Development\VSCode\Code.exe

3. Alles, was man sich merken muss, ist das Tastaturkürzel Strg + Shift + P.

   Das öffnet die Suche, die als Hauptnavigator des Programmes gilt.

Im weiteren Verlauf der Dokumentation wird immer der Suchbegriff aufgezeigt. Das erhöht das Kennenlernen des Programmes.
Z.B. Suche:Settings.

Einstellungen

1. Suche: Settings

   

   Die globalen Einstellungen sind im Benutzerverzeichnis: C:\Users\974\AppData\Roaming\Code\User\settings.json Navigation.

   Im Folgenden sind die angepassten Einstellungen:

   {
       "editor.tabSize": 2,
       "editor.mouseWheelZoom": true,
       "workbench.tree.indent": 4,
       "terminal.integrated.env.windows": {
         "abus_comment_1": "Es ist nicht möglich relativ zur exe datei wie ${execPath} zu bekommen. Auch benutzerdefinierte Variable bekommt VSCode nicht hin. Siehe https://github.com/microsoft/vscode/issues/2809", 
         "PATH": "D:\\PowerPro\\Programme\\Development\\NodeJs\\;:${env:PATH}",
         "EDITOR": "${execPath}"
       },
       "http.proxy": "http://192.168.7.240:8080",
       "terminal.integrated.defaultProfile.windows": "Command Prompt",
   }
   

Terminal öffnen

1. Suche: Terminal create

   

Häufig verwendete Suchbegriffe

Begriff	Beschreibung
EOL	Zeilenumbruch für die Datei ändern

Pakete

Zugriff

Das geht per folgendem Knopf:

Verwendete Pakete Übersicht

Paket	Beschreibung	Link
npm	NodeJs Paketverwaltung Hilfe	https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script
npm Intellisense	NodeJs Paketverwaltung Hilfe Autocomplete	https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
Bracket Pair Colorizer 2
ESLint
Code Spell Checker
German - Code Spell Checker
DotENV
markdownlint
Material Icon Theme
Markdown All in One

NodeJs

Installation

1. https://nodejs.org/de/download/ herunterladen (Windows Binary (.zip) 64-Bit) --> D:\PowerPro\Programme\Development\NodeJs

Einstellungen

1. Terminal öffnen #terminal-öffnen

2. npm config edit

   Folgendes Fenster erschein das erste mal. Bitte mit "Open" bestätigen.

   Folgenden Inhalt hinzufügen:

   https-proxy=http://192.168.7.240:8080/
   proxy=http://192.168.7.240:8080/

   Datei speichern.

3. Datei liegt hier: C:\Users\974\.npmrc

Neues Projekt anlegen

ES Lint

Installieren

npm init -y

npm install --save-dev eslint

Konfigurieren

npx eslint --init

Die Datei .eslintrc.js hat folgenden Inhalt:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {
  },
};