47 lines
1.5 KiB
Markdown
47 lines
1.5 KiB
Markdown
---
|
|
name: "ESLint Setup"
|
|
description: "Scaffolds ESLint for React + TypeScript with Prettier integration and recommended rules for frontend projects."
|
|
triggers:
|
|
- "setup eslint"
|
|
- "create .eslintrc for typescript react"
|
|
- "configure eslint with prettier"
|
|
---
|
|
|
|
# ESLint Setup
|
|
|
|
Purpose
|
|
- Provide a production-ready ESLint configuration that works with TypeScript, React, imports resolution, and Prettier.
|
|
|
|
Example prompts
|
|
- "create eslint config for react + ts"
|
|
- "add eslint rules for accessibility and import order"
|
|
|
|
Suggested .eslintrc.cjs
|
|
```js
|
|
module.exports = {
|
|
env: { browser: true, es2021: true, node: true },
|
|
parser: '@typescript-eslint/parser',
|
|
parserOptions: { ecmaVersion: 'latest', sourceType: 'module', ecmaFeatures: { jsx: true } },
|
|
extends: [
|
|
'eslint:recommended',
|
|
'plugin:react/recommended',
|
|
'plugin:@typescript-eslint/recommended',
|
|
'plugin:jsx-a11y/recommended',
|
|
'prettier'
|
|
],
|
|
plugins: ['react', '@typescript-eslint', 'jsx-a11y', 'import'],
|
|
settings: {
|
|
react: { version: 'detect' },
|
|
'import/resolver': { typescript: {} }
|
|
},
|
|
rules: {
|
|
'react/react-in-jsx-scope': 'off',
|
|
'@typescript-eslint/explicit-module-boundary-types': 'warn'
|
|
}
|
|
}
|
|
```
|
|
|
|
Notes
|
|
- Install: `npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import eslint-config-prettier`
|
|
- Consider `eslint --fix` via `npm run lint:fix` script and integrate with pre-commit hooks.
|