typescript - Visual Studio Code och TSLint: Radbrytning av kod till mer än 80 tecken

Jag använder TypeScript med TSLint och Prettier i Visual Studio Code för att skriva en React Native-app.

Jag försökte konfigurera min redigerare för att automatiskt bryta koden per rad till 100 tecken. Men efter att ha sparat är det alltid 80 tecken, inte 100.

Här är inställningarna jag ändrade:

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

Och detta är min 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]
  }
}

Även om jag har konfigurerat allt på detta sätt, bryts min kod fortfarande automatiskt vid 80 tecken. Hur kan jag få det att sluta?

Om min rad överstiger 100 tecken får jag ett lintfel, så inställningen tslint.json verkar fungera.

Bonus: Fullständiga VSCode-inställningar om jag har missat något:

{
  "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
}

Svar #1

Dessa två borde räcka:

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

Det verkar som att "editor.wordWrap" saknas i dina inställningar. I VSCode styr denna inställning omslutningspolicy: "wordWrapColumn" betyder att omsluta vid "editor.wordWrapColumn"-inställningen.

Du kan också prova "editor.wordWrap": "bounded" vilket kommer att respektera "wordWrapColumn", men också bryta raden om din vy är mindre än det antal kolumner du definierar.

UPD: Baserat på vår diskussion i kommentarerna verkar det som att Prettier inte respekterar sina "printWidth"-inställningar. Det kan finnas två mest sannolika orsaker:

  1. Detta problem: https://github.com/prettier/prettier-vscode/issues/595
  2. Prioriteringar för att definiera konfigurationsalternativ: https://github.com/prettier/prettier-vscode#prettiers-settings. Den söker särskilt först efter prettier-konfigurationsfiler, sedan efter .editorconfig-filer och först därefter efter VSCode-inställningar.

Som en lösning kan du försöka definiera den här inställningen i prettier-konfigurationsfilen för ditt projekt, eller i editorconfig-filen och kontrollera om vscode-plugin fungerar med någon av dem.

Svar #2

Jag hittade det enklaste sättet som fungerade för mig. Gå in i inställningar, sök efter Print Width och ställ in Prettier: Print Width efter dina behov, som standard är det 80, jag ändrade det till 150 och det fungerar för mig. Och lägg till följande i din settings.json "editor.wordWrap": "wordWrapColumn", "editor.wordWrapColumn": 150, "prettier.printWidth": 150

Relaterade artiklar