How to use the same rules for js and ts in TSLint

Question

I want to use the same style in .js files and .ts files. I know there is jsRules property in tslint.json, but I see 2 problems with it:

• Copying ant pasting exactly the same rules
• When extending some configurations, e.g. tslint-react, you don't get the rules in jsRules, meaning that you have to go to the source code of the ruleset and copy it manually.

Any other way to have the same code style without having to maintain both eslint and tslint?

Answer 1

Not everyone knows that, but TSLint configuration doesn't have to come in a .json file. You can use the .js extension, and keep whatever logic you like inside.

In this case, we can split TSLint rules into two categories — universal rules and React-specific ones. Both rulesets will be used for TypeScript files, but only the first ones will be applied to JavaScript.

tslint.js

const UNIVERSAL_RULES = {
  "max-line-length": [true, 120]
}

const REACT_RULES = {
  "jsx-space-before-trailing-slash": true
}

module.exports = {
  extends: [
    "tslint:recommended"
  ],
  jsRules: UNIVERSAL_RULES,
  rules: {
    ...UNIVERSAL_RULES,
    ...REACT_RULES
  }
}

When running TSLint CLI, it may be required to point to your configuration file explicitly. You can do that by adding --config tslint.js to your tslint command.