ESLint

Use ESLint to find and fix problems in your codebase. ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

Refer to official documentation for detailed usage. →

package.json
{
"scripts": {
"lint": "eslint '**/*.{js,jsx,ts,tsx}'"
},
"devDependencies": {
"eslint": "^7.15.0",
"@typescript-eslint/eslint-plugin": "^4.9.1",
"@typescript-eslint/parser": "^4.9.1",
If you want to use Prettier with ESLint, you need to add the following packages.
// "eslint-config-prettier": "^7.0.0",
// "eslint-plugin-prettier": "^3.2.0"
}
}

ESLint is designed to be flexible and configurable for your use case. You can turn off every rule and run only with basic syntax validation or mix and match the bundled rules and your custom rules to fit the needs of your project.

_.eslintrc
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"overrides": [
{
"files": ["*.js"],
"rules": {
"@typescript-eslint/no-var-requires": "off"
}
}
],
"env": {
"node": true,
"browser": true,
"amd": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
If you want to use prettier with ESLint, the following configuration can be used.
// "prettier/@typescript-eslint",
// "plugin:prettier/recommended"
]
}

You can tell ESLint to ignore specific files and directories in your config files.

.eslintignore
node_modules
__generated__
caution

All required configurations will be handled automatically by CLI as long as you choose plugins during the project creation phase.

Adding ESLint to your project later#

npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

If you want to use Prettier with ESLint, you need to add the following packages.

npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier/@typescript-eslint plugin:prettier/recommended
Last updated on by Necati Özmen