Opinionated shareable ESLint flat config for JavaScript/TypeScript projects, including React, import ordering, SonarJS, Unicorn, and Prettier.
pnpm add -D eslint@9 @jsimck/eslint-configCreate eslint.config.js (or eslint.config.mjs) in your project root:
import baseConfig from '@jsimck/eslint-config';
export default [...baseConfig];{
"scripts": {
"lint": "eslint .",
"lint:fix": "pnpm lint --fix"
}
}Default export already includes several presets. You can also import individual configs from @jsimck/eslint-config/configs.
| Config Name | Description | Included In Default |
|---|---|---|
base |
Global ignores, browser/node globals, parser options | ✅ |
stylistic |
@stylistic/eslint-plugin spacing and line rules |
✅ |
javascript |
@eslint/js recommended + custom JS rules |
✅ |
typescript |
TypeScript parser and non-typechecked TS rules | ✅ |
react |
eslint-plugin-react, react-hooks, react-refresh, jsx-a11y |
✅ |
imprt |
eslint-plugin-import-x rules and resolver setup |
✅ |
sonarjs |
eslint-plugin-sonarjs recommended + overrides |
✅ |
unicorn |
eslint-plugin-unicorn recommended + overrides |
✅ |
unusedImports |
eslint-plugin-unused-imports |
✅ |
prettier |
eslint-plugin-prettier/recommended + local prettier options |
✅ |
vitest |
@vitest/eslint-plugin rules for tests |
❌ |
typescriptTypeChecked |
Type-aware TypeScript rules (requires project service) | ❌ |
sortClassMembers |
eslint-plugin-sort-class-members |
❌ |
Example with optional configs:
import baseConfig from '@jsimck/eslint-config';
import {
vitest,
typescriptTypeChecked,
sortClassMembers,
} from '@jsimck/eslint-config/configs';
export default [
...baseConfig,
...typescriptTypeChecked,
...sortClassMembers,
...vitest,
];All configs are individually importable from @jsimck/eslint-config/configs, so you can compose only what you need:
import {
base,
stylistic,
typescript,
react,
imprt,
unusedImports,
} from '@jsimck/eslint-config/configs';
export default [
...base,
...stylistic,
...typescript,
...react,
...imprt,
...unusedImports,
];Note: The
baseconfig provides global ignores (node_modules, dist, build, etc.) and browser/node globals. It's recommended as a foundation for any custom composition.
You can override any rule by appending your own config object after the presets:
import baseConfig from '@jsimck/eslint-config';
export default [
...baseConfig,
{
rules: {
'prettier/prettier': ['error', { singleQuote: false, semi: false }],
'@typescript-eslint/no-explicit-any': 'off',
},
},
];The prettierOptions object is exported separately, so you can extend it with plugins like Tailwind CSS class sorting:
import { createRequire } from 'node:module';
import baseConfig from '@jsimck/eslint-config';
import { prettierOptions } from '@jsimck/eslint-config/configs';
const require = createRequire(import.meta.url);
export default [
...baseConfig,
{
rules: {
'prettier/prettier': [
'error',
{
...prettierOptions,
plugins: [
require.resolve('prettier-plugin-tailwindcss'),
],
},
],
},
},
];To use the defaults but swap out a specific config (e.g. use your own prettier setup), import configs individually and omit what you don't need:
import {
base,
stylistic,
javascript,
typescript,
react,
imprt,
sonarjs,
unicorn,
unusedImports,
} from '@jsimck/eslint-config/configs';
export default [
...base,
...stylistic,
...javascript,
...typescript,
...react,
...imprt,
...sonarjs,
...unicorn,
...unusedImports,
// your own prettier or formatting config here
];Include a changeset with user-facing changes:
pnpm changesetpnpm release