-
Why not just use the tslint?
The typeScript team shared their roadmap in which they described formally adopting ESLint in their repo and working to improve TypeScript compatibility for ESLint.
-
Dependency packages:
- eslint: The core ESLint linting library
- @typescript-eslint/parser: The parser that will allow ESLint to lint TypeScript code
- @typescript-eslint/eslint-plugin: A plugin that contains a bunch of ESLint rules that are TypeScript specific.
Install the package with
# TypeScript or JavaScript Project
yarn add --dev eslint-config-noctis
# NodeJS Project
yarn add --dev eslint-config-noctis eslint-plugin-node
# ReactJS Project
yarn add --dev eslint-config-noctis eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
# ReactJS and NodeJS Project
yarn add --dev eslint-config-noctis eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-node
restart your code editor
Now add the config to either the .eslintrc.js
:
// for TypeScript or JavaScript Project
const { basicLintRules } = require("eslint-config-noctis");
module.exports = {
...basicLintRules,
parserOptions: {
...basicLintRules.parserOptions,
project: './tsconfig.json',
tsconfigRootDir: __dirname,
},
};
// for NodeJS Project
const { nodeJsLintRules } = require("eslint-config-noctis");
module.exports = {
...nodeJsLintRules,
parserOptions: {
...nodeJsLintRules.parserOptions,
project: './tsconfig.json',
tsconfigRootDir: __dirname,
},
};
// for React Project
const { reactLintRules } = require("eslint-config-noctis");
module.exports = {
...reactLintRules,
parserOptions: {
...reactLintRules.parserOptions,
project: './tsconfig.json',
tsconfigRootDir: __dirname,
},
};
// for React and NodeJS Project
const { combinedLintRules } = require("eslint-config-noctis");
module.exports = {
...combinedLintRules,
parserOptions: {
...combinedLintRules.parserOptions,
project: './tsconfig.json',
tsconfigRootDir: __dirname,
},
};
-
This ESLint configuration can work together with Prettier, thanks to eslint-plugin-prettier
-
To resolve the rule conflict problem with Prettier and ESLint, we use eslint-config-prettier Turn off all rules that are unnecessary or might conflict with Prettier.
-
The ESLint rules are based on the great work of Airbnb JavaScript Style Guide
-
The Airbnb lint plugin eslint-config-airbnb-base
-
More lint plugins:
- prettier/@typescript-eslint
- prettier/recommended
- import/errors
- import/warnings
- node/recommended
Install Vscode ESLint extension
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Add eslint auto-fix configs to .vscode/setting.json
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}