Migrating from TSLint to ESLint

TSLint is deprecated. According to the roadmap, it’s shutting down by the end of 2020. Consolidating on ESLint lets the JS/TS community share tooling, and teams only need to remember one ruleset. I migrated over a weekend; here’s the process.

TSLint Roadmap Highlights

If your project is still active, migration is mandatory. Key dates:

• 2019-08-01: No new core rules (bug fixes only).
• 2019-11-01: No new features (except migration helpers).
• 2020-01-01: Only security fixes / breaking TS changes.
• 2020-12-01: Stop accepting PRs entirely.

Details: https://github.com/palantir/tslint/issues/4534

Automated Migration: tslint-to-eslint-config

The community provides a migration tool mapping TSLint rules to ESLint equivalents. Use it if possible. When I tried it (pre-1.0) it was still rough, so I migrated manually—which also forced me to learn the rules.

Note: Some TSLint rules have no ESLint counterpart. Read the console output carefully.

Manual Migration

Setup package.json

"@typescript-eslint/eslint-plugin": "^2.30.0",
"@typescript-eslint/eslint-plugin-tslint": "^2.30.0",
"@typescript-eslint/parser": "^2.30.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsdoc": "^24.0.0",
"eslint-plugin-prefer-arrow": "^1.2.0"

"scripts": {
  "lint": "eslint src/main/webapp/**/*.{ts,tsx}"
}

.eslintrc.js

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  rules: {}
};

webpack.config

{
  test: /\.tsx?$/,
  enforce: 'pre',
  loader: 'eslint-loader',
  exclude: [utils.root('node_modules')]
}

Update Disable Comments

Replace TSLint-specific disable comments with ESLint equivalents or remove them if unnecessary.

Handy Tips

Disable Examples

1. /* eslint-disable no-var */ — disable a rule for the entire file.
2. // eslint-disable-next-line complexity — disable a rule for the next line.
3. // eslint-disable-line @typescript-eslint/naming-convention — disable for the current line.

Always prefer fixing the issue when possible.

Only Show Errors

Use --quiet to suppress warnings:

$ eslint src/main/webapp/**/*.{ts,tsx} --quiet

Final Thoughts

1. Don’t chase a huge list of custom rules—defaults exist for a reason. Adopt widely-used recommendations.
2. Rules enforce consistency and prevent low-level bugs, especially in teams of varying experience.
3. The ecosystem is converging: ESLint replaces TSLint, Babel transpiles TS, etc. Embrace the consolidation.