Responding to the three bullet points sequentially...
1. Choosing between ESLint and TSLint
Now that you've transitioned to TypeScript, it's recommended to make the switch to TSLint from ESLint. TSLint leverages more comprehensive type information through TypeScript APIs, which enables its rules to be more robust than those of ESLint. For instance, TSLint includes rules to prevent mishandling Promises, incorrect comparison of variable types, or improper iteration over arrays.
For documentation, visit , and for a list of rules that can be enabled, check out . To bridge the gap between TSLint and ESLint, consider using projects like:
2. Adjusting VS Code Settings
VS Code provides an ESLint extension as well as a TSLint extension. Install the appropriate extension based on your choice and let it adapt to your project's configuration automatically.
Consider adding a .vscode/settings.json file to customize your project's behavior in VS Code. Particularly for TSLint, this setting is recommended:
{
"tslint.alwaysShowRuleFailuresAsWarnings": true
}
This configures VS Code to display TSLint rules with green highlights for better differentiation from TypeScript errors (red squiggles).
3. Embracing Prettier
An excellent decision! Both ESLint and TSLint offer default rule sets that can be extended to deactivate any lint rules conflicting with or duplicating the functionality of Prettier.
For ESLint guidance, refer to: . You can either use eslint-plugin-prettier to integrate Prettier into ESLint or utilize the eslint-config-prettier package to disable ESLint formatting rules.
In your .eslintrc.json:
{
"extends": ["prettier"]
}
When it comes to TSLint, only tslint-config-prettier is available to suppress TSLint's formatting rules. Visit https://www.npmjs.com/package/tslint-config-prettier for details.
In your tslint.json, extend from the tslint-config-prettier package:
{
"extends": [
"tslint-config-prettier"
]
}