tslint 和 prettier 冲突使用 tslint 规则

Question

I have prettier and tslint configured. However it seems prettier overrides the tslint rules. I can disable some of the rules using .prettierrc . However I'm still having issues. I want the tslint.json /exceptions to take precedence over .prettierrc

For instance prettier inserts semicolon at the end of class methods. I have exception in tslint.json . but that doesn't seem to work. I could disable with semi: false in .prettierrc if I do that then it would disable semi every where.

// appbar.tsx
const makeStyles((theme) => ({});

export class AppBar {
  private handleOpen = (event: Event): void => {
    event.preventDefault();
    this.props.onOpen();
  }; // prettier inserts semicolon.
}

{
  "extends": [
    "tslint:recommended",
    "tslint-react",
    "tslint-plugin-prettier",
    "tslint-config-prettier"
  ],
  "rulesDirectory": [],
  "rules": {
    "prettier": true,
    "interface-name": false,
    "quotemark": [true, "single"],
    "semicolon": [true, "always", "ignore-bound-class-methods"] // Doesn't work
  }
}

{
    "jsxSingleQuote": true,
    "singleQuote": true,
    "semi": false // Disable everything
}

// appbar.tsx
const makeStyles((theme) => ({}) // Prettier removes semicolon here. Which is not OK. need to keep semicolon

export class AppBar {
  private handleOpen = (event: Event): void => {
    event.preventDefault();
    this.props.onOpen();
  }
}

import React from 'react' // Disabling in .prettierrc removes semicolon in everywhere.

Answer 1

your tslint.json file seems to be okay, I have to ask though are you sure you installed tslint-config-prettier? and I also don't think you need to add in your rules "prettier": true

here's a link to the official documentation

https://developer.aliyun.com/mirror/npm/package/tslint-config-prettier .

hope this helps though