How to fix prettier and tslint error with brackets with single props?

Question

I use prettier and tslint, with https://github.com/alexjoverm/tslint-config-prettier and https://github.com/ikatyang/tslint-plugin-prettier .

My tslint.json is like

{
  "defaultSeverity": "error",
  "extends": [
    "tslint-config-airbnb",
    "tslint-react",
    "tslint-config-prettier"
  ],
  "jsRules": {},
  "rules": {
    "max-line-length": [true, 80],
    "import-name": false,
    "variable-name": false,
    "jsx-boolean-value": false,
    "jsx-no-multiline-js": false,
    "no-else-after-return": false,
    "object-shorthand-properties-first": false,
    "ter-arrow-parens": false,
    "ter-indent": false,
    "prettier": true
  },
  "rulesDirectory": ["tslint-plugin-prettier"]
}

And my .prettierrc is like

{
  "trailingComma": "all",
  "singleQuote": true
}

After tslint --fix "src/**/*.ts", codes like below appears:

import { getChildrenProceduresSelector } from '@src/entities/procedures/selectors';

And the error says [tslint] Exceeds maximum line length of 80 (max-line-length) .

But when I fix it manually to

import {
  getChildrenProceduresSelector,
} from '@src/entities/procedures/selectors';

It says

[tslint] Replace `⏎··getChildrenProceduresSelector,⏎` with `·getChildrenProceduresSelector·` (prettier)

I use VSCode with tslint and prettier extensions. My tslint command says the same error. How to fix this conflicts?

Formenti

Answer 1

Error in your config comes from "max-line-length": [true, 80]. It conflicts with prettier rules. If you want to set max-line you should do it in .prettierc file -> "printWidth": 80.

tslint-config-prettier - this config disables all the rules from tslint that conflicts with prettier (So in your case, this plugin disabled max-line from tslint, but then you set it manually in rules section)

tslint-plugin-prettier - this plugin runs prettier rules as tslint rules. In addition you need to enable this in rule section of your tslint.json.

Taking all of that into consideration your configuration should look more or less like this:

// With [email protected]+
{
  "extends": [
    "tslint-config-airbnb",
    "tslint-config-prettier",
    "tslint-plugin-prettier"
  ],
  "rules": {
    "prettier": true
  }
}

// With [email protected]+
{
  "extends": [
    "tslint-config-airbnb",
    "tslint-config-prettier",
    "tslint-plugin-prettier"
  ],
  "rules": {
    "prettier": true
  },
  "rulesDirectory": [
    "tslint-plugin-prettier"
  ]
}

Genovera

Thank you! but it says like this github.com/ikatyang/tslint-plugin-prettier#usage , and I use tslint 5.10.0, my configs seem okay. – Formenti

So in your environment, does the code like in my question is formatted to new lined? – Formenti

I have changed my configs to use rulesDirectory and it works fine. So it must be different part of your config that is wrong. – Genovera

Thank you for that information. My tslint-config-prettier-check ./tslint.json says max-line-length is conflicted, how about yours? – Formenti

yes. That is the problem. I ll edit my post for answer – Genovera

Let us continue this discussion in chat. – Genovera