We always use tslint in TypeScript to guarantee the quality of our code. But tslint is a subset of eslint. Tslint offers about 151 basic rules, but eslint has 249, not to mention the well-developed ecology of eslint, which provides more specification code. The tslint team also found this problem and decided to transfer into eslint.

Cause

In the preparation of Pro v4, we added a feature that converts TypeScript into JavaScript. After the conversion is complete, we ran eslint and prettier to make the code more human-like. The js code after the conversion is complete cannot pass the eslint check:

For example here:

Also here：

Result

If we are using eslint, these issues should be directly exposed. So began to conduct research and use. First try one in Pro. The effect is very good, you can see this PR. I have joined this lint in pro-blocks.

We publish these rules as a package  🌟🌟umi-fabric 🌟🌟, This library provides some presets for eslint , stylelint and prettier , which is great for everyone. All open rules are meaningful for improving code quality.

Use

The use of umi-fabric is easy.

npm install eslint @umijs/fabric --save-dev

And do the following configuration in the root directory .eslintrc.js.

const fabric = require('@umijs/fabric');

module.exports = fabric.eslint;

The eslint plugin in vscode does not default to the lint .ts file, we need to set it in settings.json

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
],

Then you can use it happily. Using eslint fix to get old ts code is amazing.