A shareable ESLint and Prettier configuration for JavaScript and TypeScript projects, following Tufcoder's code style and best practices.
Install ESLint and this config package:
npm install --save-dev eslint @tufcoder/eslint-configThen, install the required peer dependencies for your project type:
- 🟢 Node.js:
npm install --save-dev @eslint/js @typescript-eslint/eslint-plugin @typescript-eslint/parser globals eslint-plugin-prettier eslint-config-prettier
- ⚛️ React:
npm install --save-dev @eslint/js @typescript-eslint/eslint-plugin @typescript-eslint/parser globals eslint-plugin-prettier eslint-config-prettier eslint-plugin-react
⚠️ Why is this needed? npm/yarn and ESLint require that plugins and parsers are installed in the consumer project, even when using a shared config package.
- ESLint recommended rules
- Prettier integration for code formatting
- TypeScript support
- Node.js globals
- React support (see below)
Create a file named eslint.config.mjs in your project root with the following content:
import config from '@tufcoder/eslint-config/node'
export default configCreate a file named eslint.config.mjs in your project root with the following content:
import config from '@tufcoder/eslint-config/react'
export default configTo automatically format your files on save in VS Code, add the following to your workspace or user settings.json:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
}
}If you want to customize Prettier rules, create a .prettierrc.json in your project root. For example, you can override or add options like:
{
"bracketSpacing": false, // Remove spaces between braces: {foo: bar}
"jsxSingleQuote": true, // Use single quotes in JSX
"proseWrap": "always", // Always wrap long text lines
"htmlWhitespaceSensitivity": "ignore", // Ignore whitespace sensitivity in HTML
"quoteProps": "consistent" // Add quotes to all properties when necessary
}To automatically fix and format your code, run:
npx eslint . --fixMIT © Oswaldo Castro