ESLint 9.x flat configuration patterns. Use when setting up ESLint with TypeScript.
This skill inherits all available tools. When active, it can use any tool Claude has access to.
This skill covers ESLint 9.x flat configuration for TypeScript projects.
Use this skill when:
FLAT CONFIG IS THE FUTURE - ESLint 9.x uses flat config (eslint.config.ts) by default.
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import type { Linter } from 'eslint';
const config: Linter.Config[] = [
// Ignore patterns
{
ignores: ['dist/**', 'node_modules/**', 'coverage/**'],
},
// Base JavaScript rules
js.configs.recommended,
// TypeScript strict rules
...tseslint.configs.strictTypeChecked,
// Custom rules for TypeScript files
{
files: ['**/*.ts', '**/*.tsx'],
languageOptions: {
parserOptions: {
project: './tsconfig.json',
tsconfigRootDir: import.meta.dirname,
},
},
rules: {
// Type safety
'@typescript-eslint/no-explicit-any': 'error',
'@typescript-eslint/no-unsafe-assignment': 'error',
'@typescript-eslint/no-unsafe-member-access': 'error',
'@typescript-eslint/no-unsafe-call': 'error',
'@typescript-eslint/no-unsafe-return': 'error',
'@typescript-eslint/no-unsafe-argument': 'error',
// Code quality
'@typescript-eslint/explicit-function-return-type': 'error',
'@typescript-eslint/explicit-module-boundary-types': 'error',
'@typescript-eslint/no-unused-vars': [
'error',
{ argsIgnorePattern: '^_' },
],
// Strict boolean expressions
'@typescript-eslint/strict-boolean-expressions': 'error',
// No floating promises
'@typescript-eslint/no-floating-promises': 'error',
'@typescript-eslint/no-misused-promises': 'error',
},
},
];
export default config;
npm install -D eslint @eslint/js typescript-eslint
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint --fix ."
}
}
// @typescript-eslint/no-explicit-any: 'error'
// ❌ Bad
function process(data: any) { }
// ✅ Good
function process(data: unknown) { }
// @typescript-eslint/explicit-function-return-type: 'error'
// ❌ Bad
function add(a: number, b: number) {
return a + b;
}
// ✅ Good
function add(a: number, b: number): number {
return a + b;
}
// @typescript-eslint/strict-boolean-expressions: 'error'
// ❌ Bad
if (value) { }
// ✅ Good
if (value !== undefined && value !== null) { }
if (typeof value === 'string' && value.length > 0) { }
// @typescript-eslint/no-floating-promises: 'error'
// ❌ Bad - Promise ignored
fetchData();
// ✅ Good - Promise handled
await fetchData();
// or
fetchData().catch(handleError);
// or
void fetchData(); // Explicitly ignored
// @typescript-eslint/no-misused-promises: 'error'
// ❌ Bad - async function in non-async context
const handlers = {
onClick: async () => { }, // Error in some contexts
};
// ✅ Good - wrap in non-async handler
const handlers = {
onClick: () => {
void handleClick();
},
};
npm install -D eslint-config-prettier
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettier from 'eslint-config-prettier';
const config = [
js.configs.recommended,
...tseslint.configs.strictTypeChecked,
prettier, // Must be last to override other formatting rules
{
// Custom rules...
},
];
export default config;
const config = [
// All TypeScript files
{
files: ['**/*.ts', '**/*.tsx'],
rules: {
'@typescript-eslint/explicit-function-return-type': 'error',
},
},
// Test files - relaxed rules
{
files: ['**/*.test.ts', '**/*.test.tsx', '**/__tests__/**'],
rules: {
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-unsafe-assignment': 'off',
},
},
// Config files - CommonJS allowed
{
files: ['*.config.js', '*.config.cjs'],
rules: {
'@typescript-eslint/no-var-requires': 'off',
},
},
];
{
rules: {
'@typescript-eslint/naming-convention': [
'error',
// Variables: camelCase
{
selector: 'variable',
format: ['camelCase', 'UPPER_CASE'],
},
// Types: PascalCase
{
selector: 'typeLike',
format: ['PascalCase'],
},
// Interfaces: PascalCase, no I prefix
{
selector: 'interface',
format: ['PascalCase'],
custom: {
regex: '^I[A-Z]',
match: false,
},
},
// Private members: underscore prefix
{
selector: 'memberLike',
modifiers: ['private'],
format: ['camelCase'],
leadingUnderscore: 'require',
},
],
},
}
npm install -D eslint-plugin-import
import importPlugin from 'eslint-plugin-import';
const config = [
{
plugins: {
import: importPlugin,
},
rules: {
'import/order': [
'error',
{
groups: [
'builtin',
'external',
'internal',
'parent',
'sibling',
'index',
],
'newlines-between': 'always',
alphabetize: { order: 'asc' },
},
],
'import/no-duplicates': 'error',
},
},
];
{
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"rules": {
"@typescript-eslint/no-explicit-any": "error"
}
}
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
export default [
js.configs.recommended,
...tseslint.configs.recommended,
{
rules: {
'@typescript-eslint/no-explicit-any': 'error',
},
},
];
// Ensure tsconfigRootDir is set
{
languageOptions: {
parserOptions: {
project: './tsconfig.json',
tsconfigRootDir: import.meta.dirname,
},
},
}
# Ensure all plugins are installed
npm install -D @eslint/js typescript-eslint
// Check ignores pattern
{
ignores: ['dist/**', 'node_modules/**'],
}
// Ensure files pattern includes your files
{
files: ['**/*.ts', '**/*.tsx'],
}
{
"eslint.useFlatConfig": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}