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?

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"
  ]
}