Website-Suche

typescript - Visual Studio Code und TSLint: Code auf mehr als 80 Zeichen umbrechen

Ich verwende TypeScript mit TSLint und Prettier in Visual Studio Code, um eine React Native-App zu schreiben.

Ich habe versucht, meinen Editor so zu konfigurieren, dass der Code automatisch pro Zeile auf 100 Zeichen umgebrochen wird. Aber nach dem Speichern sind es immer 80 Zeichen, nicht 100.

Hier sind die Einstellungen, die ich geändert habe:

"prettier.tslintIntegration": true,
"prettier.printWidth": 100,
"editor.renderIndentGuides": true,
"editor.rulers": [100],
"editor.wordWrapColumn": 100,
"editor.formatOnSave": true

Und dies ist meine tslint.json:

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "rules": {
    // "jsx-no-lambda": false,
    "member-access": false,
    "interface-name": false,
    "max-line-length": [true, 100]
  }
}

Obwohl ich alles so konfiguriert habe, bricht mein Code trotzdem automatisch bei 80 Zeichen um. Wie kann ich das stoppen?

Wenn meine Zeile mehr als 100 Zeichen überschreitet, erhalte ich einen Linting-Fehler, also scheint die tslint.json-Einstellung zu funktionieren.

Bonus: Vollständige VSCode-Einstellungen für den Fall, dass ich etwas übersehen habe:

{
  "telemetry.enableTelemetry": false,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "vscode-icons",
  "window.zoomLevel": 0,
  "prettier.eslintIntegration": true,
  "prettier.tslintIntegration": true,
  "prettier.printWidth": 100,
  "editor.renderIndentGuides": true,
  "editor.rulers": [100],
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[typescript]": {
    "editor.tabSize": 2
  },
  "[typescriptreact]": {
    "editor.tabSize": 2
  },
  "[json]": {
    "editor.tabSize": 2
  },
  "workbench.colorCustomizations": {
    // "statusBar.background": "#272b33",
    // "panel.background": "#30353f",
    // "sideBar.background": "#2a2b33",
    "editor.background": "#2c313a"
  },
  "todohighlight.keywords": [
    {
      "text": "DEBUG:",
      "color": "#fff",
      "backgroundColor": "limegreen",
      "overviewRulerColor": "grey"
    },
    {
      "text": "NOTE:",
      "color": "#fff",
      "backgroundColor": "mediumslateblue",
      "overviewRulerColor": "grey"
    },
    {
      "text": "REVIEW:",
      "color": "#fff",
      "backgroundColor": "dodgerblue",
      "overviewRulerColor": "grey"
    },
    {
      "text": "XXX:",
      "color": "#fff",
      "backgroundColor": "orangered",
      "overviewRulerColor": "grey"
    }
  ],
  "editor.wordWrapColumn": 100,
  "editor.formatOnSave": true
}

Antwort #1

Diese beiden sollten ausreichen:

"editor.wordWrap": "wordWrapColumn",
"editor.wordWrapColumn": 100

Es scheint, dass "editor.wordWrap" in deinen Einstellungen fehlt. In VSCode steuert diese Einstellung die Umbruchrichtlinie: "wordWrapColumn" bedeutet Umbruch an der "editor.wordWrapColumn"-Einstellung.

Sie können auch "editor.wordWrap": "bounded" ausprobieren, was "wordWrapColumn" respektiert, aber auch umbrechen wird, wenn Ihre Ansicht kleiner ist als die von Ihnen festgelegte Spaltenzahl.

Aktualisierung: Basierend auf unserer Diskussion in den Kommentaren scheint es, dass Prettier seine "printWidth"-Einstellungen nicht beachtet. Es könnte zwei wahrscheinlichste Gründe geben:

  1. Dieses Problem: https://github.com/prettier/prettier-vscode/issues/595
  2. Prioritäten für die Definition von Konfigurationsoptionen: https://github.com/prettier/prettier-vscode#prettiers-settings. Insbesondere sucht es zuerst nach Prettier-Konfigurationsdateien, dann nach .editorconfig-Dateien und erst danach nach VSCode-Einstellungen.

Als eine Zwischenlösung können Sie versuchen, diese Einstellung tatsächlich in der Prettier-Konfigurationsdatei für Ihr Projekt oder in der EditorConfig-Datei zu definieren und prüfen, ob das VSCode-Plugin mit einer von beiden funktioniert.

Antwort #2

Ich habe den einfachsten Weg gefunden, der für mich funktioniert hat. Gehe in die Einstellungen, suche nach Print Width und setze Prettier: Print Width nach deinen Bedürfnissen, standardmäßig ist es 80, ich habe es auf 150 geändert und es funktioniert für mich. Und füge Folgendes in deine settings.json ein "editor.wordWrap": "wordWrapColumn", "editor.wordWrapColumn": 150, "prettier.printWidth": 150

Verwandte Artikel