Zum Hauptinhalt springen

1 Code Style

Um den Code-Stil in TypeScript durchzusetzen, verwenden wir Prettier und ESLint, um unseren Code zu formatieren und zu linten. Um die Einstellungen zwischen allen Entwicklern zu teilen, verwenden wir eine .eslintrc-Datei, die in jedes Repository eingecheckt wird. Um dieselbe Konfiguration in mehreren Repositories zu teilen, haben wir uns entschieden, eine Master-Datei eslintrc-global.json im octo-tols repository zu haben. Diese wird automatisch durch eine GitHub-Action synchronisiert. Jedes Projekt muss diese Datei in der lokalen .eslintrc-Datei referenzieren:

{
  "extends": [".eslintrc-global.json"]
}

VS Code Plugins und Einstellungen​

Um dieselben Einstellungen in VS Code zu verwenden, nutzen wir die folgenden Erweiterungen:

.vscode/extensions.json

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
  "recommendations": [
    "angular.ng-template",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ]
}

Um den Code beim Speichern zu prettifien und zu linten, verwenden wir die folgenden Einstellungen:

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Rider-Konfiguration​

Um ESLint in Rider zu verwenden, müssen die folgenden Einstellungen gesetzt werden:

Settings -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint

  • Automatic ESLint configuration aktivieren

  • Run eslint --fix on save aktivieren

package.json​

Um alle genannten Werkzeuge zu verwenden, müssen einige Pakete und Skripte in der packages.json konfiguriert werden.
ACHTUNG: Versionsangaben sind mit Sicherheit veraltet
package.json

{
  //rest of the file
  "scripts": {
    "build": "npm run lint && npm run build:my-service-name",
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "prettier": "prettier --write ."
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.60.0",
    "@typescript-eslint/parser": "^5.60.0",
    "eslint": "^8.43.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-standard-with-typescript": "^35.0.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-n": "^15.7.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-promise": "^6.1.1",
    "prettier": "^2.8.8"
  }
}