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
}

valignatev · Accepted Answer · 2018-10-22T20:22:25.877

17

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:

This issue: https://github.com/prettier/prettier-vscode/issues/595
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.

edited Oct 22 '18 at 20:22

answered Oct 22 '18 at 17:56

valignatev

6,020
8
37
61

This unfortunately doesn't fix the issue. If I hit save, the code still gets wrapped to less than 80 characters :( – J. Hesters Oct 22 '18 at 18:55
Am I right that it wraps correctly until you hit "Save"? If so, can you try this with prettier disabled? – valignatev Oct 22 '18 at 19:20
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. – J. Hesters Oct 22 '18 at 19:50
Cool! Than it seems like a vscode plugin prettier issue. First, it's not only you: https://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. – valignatev Oct 22 '18 at 20:18
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. – J. Hesters Oct 23 '18 at 07:27
1

Glad it helped! Most probably it's a bug in vscode plugin, so the answer is in its internals. – valignatev Oct 23 '18 at 09:32

indrajeet · Answer 2 · 2020-05-11T20:35:31.473

12

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

edited May 11 '20 at 20:35

answered May 11 '20 at 20:28

indrajeet

837
10
17

1

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 – Beerswiller Aug 23 '21 at 03:44

Shabeer Ali · Answer 3 · 2022-02-16T17:54:15.913

8

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
};

edited Feb 16 '22 at 17:54

answered Aug 12 '21 at 07:13

Shabeer Ali

903
11
20

1

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. – swingthrough Dec 07 '21 at 18:09

score 4 · Answer 4 · answered Feb 21 '21 at 00:31

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.

What Would Be Cool · Answer 5 · 2019-11-29T16:47:39.207

2

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.

edited Nov 29 '19 at 16:47

answered Feb 18 '19 at 17:44

What Would Be Cool

6,204
5
45
42

Should probably mention that tslint-config-prettier have to be installed for it to work – valignatev Nov 28 '19 at 11:44

score 0 · Answer 6 · answered Nov 29 '22 at 08:00

0

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

answered Nov 29 '22 at 08:00

Matyas Zednicek

33
4

Please take the time to provide context and source code with your answer. – Christian Bonato Dec 01 '22 at 17:31
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](/help/how-to-answer). – Community Dec 01 '22 at 17:32

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

6 Answers6