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 tslint@5.0.0+
{
  "extends": [
    "tslint-config-airbnb",
    "tslint-config-prettier",
    "tslint-plugin-prettier"
  ],
  "rules": {
    "prettier": true
  }
}

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