CODEWITHSUNDEEP
javascripttypescripttslintprettier
Taichi
Taichi

Reputation: 2597

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

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?

Upvotes: 4

Views: 6781

Answers (1)

Kacper Wiszczuk
Kacper Wiszczuk

Reputation: 2007

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

Upvotes: 8

Related Questions