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
}

Elisabethelisabethville

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.

Myasthenia

This unfortunately doesn't fix the issue. If I hit save, the code still gets wrapped to less than 80 characters :( – Elisabethelisabethville

Am I right that it wraps correctly until you hit "Save"? If so, can you try this with prettier disabled? – Myasthenia

If I disable Prettier or set "prettier.tslintIntegration": false the code stays at it's character count. But I like to keep Prettier 😅As for the tslintIntegration I'm not quite sure what it does. But since I'm using TypeScript with TSLint I suppose it's useful. – Elisabethelisabethville

Cool! Than it seems like a vscode plugin prettier issue. First, it's not only you: github.com/prettier/prettier-vscode/issues/595 Second, check for other configuration files that might overwrite your vscode rule, this plugin searched for prettier config file, and for .editorconfig file. I updated my answer accordingly. – Myasthenia

Working with a .prettierrc.json file! Thank you 😊It's not ideal and I have no Idea what is overwriting this setting, but it is a start I guess. – Elisabethelisabethville

Glad it helped! Most probably it's a bug in vscode plugin, so the answer is in its internals. – Myasthenia

Answer 2

I found the easiest way which worked for me. Go into settings search for Print Width and set Prettier: Print Width to according to your need, by default it's 80 I changed it to 150 and it works for me. And add following in your settings.json "editor.wordWrap": "wordWrapColumn", "editor.wordWrapColumn": 150, "prettier.printWidth": 150

Seen

This also controls the breakpoint for when function splitting/wrapping occurs and whether or not the params in the function will be line-by-line, or all on one line – Erosive

Answer 3

find or add a file named .prettierrc.js and add printWidth as shown bellow

module.exports = {
  bracketSpacing: false,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  arrowParens: 'avoid',
  printWidth: 150, // <== add this
};

reference

Kimberlykimberlyn

This is what I needed. Once there's .prettierrc file present and it is not COMPLETELY empty, but contains at least {}, VSCode ignores my rule "prettier.printWidth": 120 set in .vscode/settings.json and uses the default 80. That actually makes sense - if there is .prettierrc config, it ensures that prettier will be consistent even if someone uses a different IDE/editor than VSCode that has Prettier plugin, in which case .vscode/settings.json would have no effect. – Malayalam

Answer 4

I had prettier installed, adding only the below line was enough, to solve the issue:

"prettier.printWidth": 120,

General wrap lengths are 80 & 120, but some use 150.

You can add above in either of below settings:

Project workspace settings:

• .vscode\settings.json

User settings:

• %UserProfile%\AppData\Roaming\Code\User\settings.json

Paths above are for Windows OS, but similar ones will be for other OS.

Orthohydrogen

Answer 5

In tslint.json, you should be able to add printWidth to the Prettier config section:

"rules": {
    "prettier": [
        true,
        {
            "printWidth": 100
        }
    ],

As vaglignatev mentioned, you'll need to install tslint-config-prettier.

Steinmetz

Should probably mention that tslint-config-prettier have to be installed for it to work – Myasthenia

Answer 6

I had the same issue and for me the .editorconfig was overriding the prettier settings. I just added max_line_length = 100

Hollington

Please take the time to provide context and source code with your answer. – Lathe

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Mcmurray