Visual Studio Code and TSLint: Code wrap to more than 80 characters

Question

I'm using TypeScript with TSLint and Prettier in Visual Studio Code to write a React Native App.

I tried to configure my editor to wrap the code in per line automatically to 100 characters. But after saving it's always 80 characters, not 100.

Here are the settings I changed:

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

And this is my 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]
  }
}

Even though I configured everything this way, my code still automatically wraps around 80 characters. How can I get that to stop?

If my line exceeds 100 characters I get a linting error, so the tslint.json setting seems to work.

Bonus: Complete VSCode settings in case I missed something:

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

Answer 1

These two should be enough:

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

Seems like "editor.wordWrap" is missing in your settings. In vscode this setting controls wrapping policy: "wordWrapColumn" means wrap at "editor.wordWrapColumn" setting.

You can also try "editor.wordWrap": "bounded" which will respect "wordWrapColumn", but also wrap if your viewport is less than nuber of columns you define.

UPD: Based on our discussion in comments, it seems that prettier do not respect its "printWidth" settings. There might be two most probable reasons:

1. This issue: https://github.com/prettier/prettier-vscode/issues/595
2. Priorities for defining configuration options: https://github.com/prettier/prettier-vscode#prettiers-settings. In particular, it first searches for prettier config files, than for .editorconfig files, and only then for vscode settings.

As a workaround you can try to actually define this setting in prettier config file for your project, or in editorconfig file and check if vscode plugin will work with either of those.