[prettier-vscode] max-line-length does not work

[sveyret]

When setting tslintIntegration to true, prettier does not take into account its print-width rule anymore, neither it takes the max-line-length rule from tslint for formatting line length. When formatting files, it acts as if the print-width would be 80.

Here is my configuration:

VS config (extract):

    "prettier.tslintIntegration": true,

tslint.yaml (extract):

extends:
  - >-
    common/tslint

common/tslint.yaml (extract):

  max-line-length:
    options:
      limit: 120

[kbd]

Well shucks I thought I finally found a combination of config for vscode that would provide live tslint warnings, including ones that need type information -- most critically warnings about "floating promises", only provided by tslint-language-service -- as well as auto-formatting on-save based on my tslint settings, which is provided by the vscode-tslint plugin, but then I get duplicate tslint warnings. So I turned to the Prettier vscode extension and prettier-tslint, which actually seems to work perfectly except for the line length.

Is there any solution to this currently?

Edit: looks like back to vscode-tslint because of this issue.

[rambabusaravanan]

Yes, not working 😒

prettier has"prettier.printWidth": 120 in vscode settings.json
tslint has "max-line-length": [true, 120] in tslint.json

When "prettier.tslintIntegration": true, the line is breaking after 80th character. It is considering nether prettier.printWidth nor tslint's max-line-length 😭
When false, it is working as per the prettier.printWidth.

VSCode settings.json. (Correct if anything wrong / unnecessary)

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "eslint.autoFixOnSave": true,
  "eslint.packageManager": "yarn",
  "git.autofetch": true,
  "npm.packageManager": "yarn",
  "prettier.eslintIntegration": true,
  "prettier.printWidth": 120,
  "prettier.tslintIntegration": true,
  "tslint.autoFixOnSave": true,
  "tslint.packageManager": "yarn"
}

DIsclaimer: I have prettier, eslint and tslint plugins installed in VSCode. Nothing installed as local or global dependency (prettier reference)

[rambabusaravanan]

I think labeling this as "Bug" would be more appropriate than "Enhancement" as enabling tslintIntegration is not accepting tslint max-line-length but breaks existing settings prettier.printWidth instead

[aleclarson]

You cannot use tslint's max-line-length only. Prettier will run with its default setting of maxWidth: 80 if you never override it explicitly in your .prettierrc or similar file.

If the opposite (ie: using Prettier's maxWidth only) is not working as expected, try setting tslint's max-line-length to false.

If it's still not working, please provide a repository with a minimum reproduction of the issue.

[james2406]

Thanks @aleclarson! For now, creating a .prettierrc file with the following configuration is a good workaround:

{
  "printWidth": 120
}

I was also still able to keep my current configuration in my tslint.json file:

{
  "max-line-length": [true, { "limit": 120 }],
}

[aleclarson]

@james2406 You can keep max-line-length, but it's a no-op.

[aleclarson]

Tracking this in #25

[rambabusaravanan]

@aleclarson In case I create .prettierrc as a workaround, max line length works well.
But creating .prettierrc, immediately breaks other tslint rules like single quote fails in .js files (works fine in .ts file).
Note: this quote rule worked fine for .js and .ts files when no .prettierrc

.prettierrc (workaround for max length)

{
  "printWidth": 120,
  "trailingComma": "es5"
}

failing tslint rule for .js files (works in .ts file)

  "rules": {
    "quotemark": [true, "single", "jsx-double"]
  },

.prettierrc (workaround for workaround)

{
  "printWidth": 120,
  "trailingComma": "es5",
  "singleQuote": true
}

please help us with consistency across prettier and tslint

[aleclarson]

@rambabusaravanan Please open a new issue with the features you'd like to see added. Thanks! 👍