When it comes to adding Lint rules to TypeScript projects, have you ever wondered if you should use TSLint? Or ESLint?
First, TSLint can only work with TypeScript projects, while ESLint supports both JavaScript and TypeScript projects.
Also, as early as 2019, the TypeScript team publicly stated that ESLint had a more efficient architecture than TSLint, and that they would no longer maintain TSLint and instead work with ESLint.
So, for the above reasons, I recommend using ESLint to add Lint rules to TypeScript projects.
Integrate ESLint into TypeScript projects
First, install all the NPM packages required by the development environment:
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev
Copy the code- Eslint: The core code library for ESLint;
- @typescript-eslint/parser: parser that gives ESLint the ability to standardize typescript code;
- @typescript-eslint/eslint-plugin: plugin that contains a set of typescript ESint rules.
Then, add the.eslintrc.js file to the root directory of the project:
module.exports = {
parser: '@typescript-eslint/parser'.// Specify the parser to use for ESLint
parserOptions: {
ecmaVersion: 2020.// Allows parsing of newer ES features
sourceType: 'module'
},
extends: [
'plugin:@typescript-eslint/recommended' // Use the recommended rules for @typescript-eslint/eslint-plugin
].
rules: {
// Prevents custom ESLint rules, which can override rule configurations in extends.
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
}
};
Copy the codeIf you use React in TypeScript projects, you need to install eslint-plugin-react and make the following changes to the configuration file:
module.exports = {
parser: '@typescript-eslint/parser'.// Specify the parser to use for ESLint
parserOptions: {
ecmaVersion: 2020.// Allows parsing of newer ES features
sourceType: 'module'.
ecmaFeatures: {
jsx: true // Allow parsing JSX
}
},
settings: {
react: {
version: 'detect' // tell eslint-plugin-react to automatically detect the react version to use
}
},
extends: [
'plugin:react/recommended'.// Use the eslint-plugin-react recommendation rule
'plugin:@typescript-eslint/recommended' // Use the recommended rules for @typescript-eslint/eslint-plugin
].
rules: {
// Prevents custom ESLint rules, which can override rule configurations in extends.
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
}
};
Copy the codeAdd a Prettier
Prettier is to ESLint what milk is to Oreos. Prettier did a great job formatting code. Again, the corresponding dependencies need to be installed:
yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
Copy the code- Prettier: the core code base for prettier;
- Eslint-config-prettier: Used to disable an ESLint rule that conflicts with Prettier
- Eslint-plugin-prettier: To run prettier as an ESLint rule. So you can pass ESLint
--fixTo fix the code automatically.
Also, add the. Prettierrc.js configuration file in the root directory:
module.exports = {
semi: true.
trailingComma: "all".
singleQuote: true.
printWidth: 120.
tabWidth: 4
};
Copy the codeThen, you need to modify the.eslintrc.js configuration file:
module.exports = {
parser: '@typescript-eslint/parser'.// Specify the parser to use for ESLint
parserOptions: {
ecmaVersion: 2020.// Allows parsing of newer ES features
sourceType: 'module'.
ecmaFeatures: {
jsx: true // Allow parsing JSX
}
},
settings: {
react: {
version: 'detect' // tell eslint-plugin-react to automatically detect the react version to use
}
},
extends: [
'plugin:react/recommended'.// Use the eslint-plugin-react recommendation rule
'plugin:@typescript-eslint/recommended' // Use the recommended rules for @typescript-eslint/eslint-plugin
"prettier/@typescript-eslint".// Use eslint-config-prettier to disable the ESLint rule in @typescript-eslint/eslint-plugin that conflicts with Prettier
// Enable eslint-plugin-prettier and eslint-config-prettier. This would show the prettier error as an ESLint error. Make sure the configuration is placed at the end of the array.
"plugin:prettier/recommended"
].
rules: {
// Prevents custom ESLint rules, which can override rule configurations in extends.
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
}
};
Copy the codeFix code automatically in VSCode
In VSCode, the development experience would be better if ESLint fixes were automatically executed when files were saved. You can do the following in VSCode’s settings.json file:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
Copy the codeRun ESLint on the CLI
In the package.json file, add a lint scripts command:
{
"scripts": {
"lint": "eslint '*/**/*.{js,ts,tsx}' --fix"
}
}
Copy the codeThis way, you can use NPM run Lint or YARN Lint to perform ESLint checks. All code that can be fixed automatically by ESLint will be fixed, and those that can’t be fixed will be printed in the console.
Run ESLint before Git Commit
To ensure that all files passed Git Commit will not have Lint or formatting errors, you can use lint-staged tools.
Lint-staged tools allow lint-staged commands to be executed before the file commits. This can be used with husky, configured via git hooks, and added to package.json:
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,ts,tsx}": [
"eslint --fix"
]
}
}
Copy the codeconclusion
To conclude, the ultimate TypeScript project Lint solution for 2020 is as follows:
- Use ESLint with Prettier, where ESLint checks code, Prettier formats code;
- Write elegant code using Lint-staged and Husky, automatically performing ESLint detection via Git hooks!
Note: MY personal music project already uses this Lint scheme, see the code
This article is published in my wechat public number, welcome to pay attention to, continue to update!
References
- How to Setup a TypeScript + Node.js Project
- How to use ESLint with TypeScript
- How to use Prettier with ESLint and TypeScript in VSCode