ESLint is a JavaScript/TypeScript linter that analyzes code for potential errors, style issues, and best practices. It catches bugs before runtime, enforces consistent code style, and can automatically fix many issues. Essential for team projects.
What ESLint Does:
Why Use ESLint:
Configuration:
.eslintrc.js or eslint.config.jsPopular Configs:
// eslint.config.js (flat config - new style)
import js from '@eslint/js';
import react from 'eslint-plugin-react';
import typescript from '@typescript-eslint/eslint-plugin';
export default [
js.configs.recommended,
{
files: ['**/*.{js,jsx,ts,tsx}'],
plugins: {
react,
'@typescript-eslint': typescript,
},
rules: {
'no-unused-vars': 'warn',
'no-console': ['warn', { allow: ['warn', 'error'] }],
'react/prop-types': 'off',
'@typescript-eslint/no-explicit-any': 'warn',
},
},
];
// .eslintrc.js (legacy config style)
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
],
rules: {
'no-unused-vars': 'warn',
'no-console': 'warn',
},
};