CODEWITHSUNDEEP
typescriptvisual-studio-codeword-wraptslintprettier
J. Hesters
J. Hesters

Reputation: 14796

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

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
}

Upvotes: 20

Views: 25254

Answers (6)

Shabeer Ali
Shabeer Ali

Reputation: 1033

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

Upvotes: 9

Matyas Zednicek
Matyas Zednicek

Reputation: 93

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

Upvotes: 0

Manohar Reddy Poreddy
Manohar Reddy Poreddy

Reputation: 27405

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.

Upvotes: 5

indrajeet
indrajeet

Reputation: 897

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

enter image description here

Upvotes: 15

What Would Be Cool
What Would Be Cool

Reputation: 6768

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.

Upvotes: 2

valignatev
valignatev

Reputation: 6316

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.

Upvotes: 17

Related Questions