Project: TypeScript Template

Opinionated Lean TypeScript Vue App Template

Projekt-Konfiguration

• Build- und Dev-Server-Toolchain: Vite mit Vue-Plugin
• Code-Style und Formatting: Prettier/EditorConfig
• Code-Quality-Analyse: ESLint mit entsprechenden Tools/Konfigurationen
• TypeScript-Konfiguration: Minimal und dokumentiert

NPM-Scripte

• format: Code Formatierung mit Prettier
• lint: Code QA mit ESLint
• typecheck: Überprüft formal die Typisierungen (über vue-tsc - der original tsc versteht die SFC Syntax nicht). Wird oft dem build-Script vorgeschoben.

Clean Up

Um mit dem Template ein neues Projekt zu beginnen, muss vom bereitgestellten Projekt lediglich der Import der &ltTemplateInfo />-Komponente in der App.vue entfernt werden. Die beiden Komponenten im components-Ordner können dann problemlos zusätzlich gelöscht werden.

VS Code

Extensions

Zwingend für Vue-Projekte mit TypeScript:

Die Volar-Extension stellt Support für *.vue-Dateien bereit. Dabei stellt sie einen Language-Server für bereit. Daneben existiert in VS Code noch ein normaler Language-Server für TypeScript-Dateien. Damit dieser auch *.vue-Dateien importieren kann (bzw. sowohl Vorschläge machen kann für solche Dateien und die exportierten Komponenten und außerdem einen solchen Import fehlerfrei durchgehen lässt), muss er mit einem Plugin erweitert werden: das TypeScript Vue Plugin.

Alternativ und zur Zeit empfohlen ist es aber den Take Over Mode einzuschalten. Damit übernimmt Volar auch die Rolle des normalen Language-Server für TypeScript-Dateien - was zusätzlich VS Code entwas entschlackt.

Ein dritter Weg *.vue-Dateien importierbar zu machen, wäre ein TypeScript-Shim. Das ist heutzutage aber eher ungewöhnlich.

• Volar - zusätzlich den Takeover-Mode aktivieren

Optional falls die Kombination Editorconfig/Prettier als Formatter eingesetzt werden soll

• Editorconfig
• Prettier

Optional falls Linting-Fehler schon im Editor markiert werden sollen

• ESLint

Settings

• Default Formatter: Prettier
• Format on Save: true

IntelliJ IDEA

Plugins

• EditorConfig (Bundled in IntelliJ IDEA Ultimate)
• Prettier (Marketplace)
• ESLint (built-in)

Settings

• Languages & Frameworks → JavaScript → Prettier

  • Check: On 'Reformat Code' action
  • Check: On save

• Languages & Frameworks → JavaScript → Code Quality Tools → ESLint

  • Stay with default settings
  • Optionally check: Run eslint --fix on save