This is a shareable configuration for ESLint, made specifically for web applications at MAPC.
Extends the recommended JS defaults from ESLint, and includes the official React/JSX ESLint rules and the official React Hooks ESLint rules.
Other small additions:
- Some rules to ensure Fast Refresh works
- Some rules to prefer arrow functions
- Some rules to help minimize conflicts when used in conjunction with Prettier
Lastly, there are some individual rule overrides, including (but not limited to):
- Allow up to 160 characters per line
- Enforce 2 space indentation
- Enforce use of curly brackets
- Enforce semicolons;
- Enforce camelCase (except when destructuring JSON, which sometimes uses snake_case or other formats)
- Enforce default case in case/switch statements
- Enforce use of === and !==
- Prohibit block-scoped var
Add as a dev dependency: yarn add -D @mapc/eslint-config
Requires eslint >= 9 as a peer dependency: yarn add -D 'eslint@>=9'
To use this in conjunction with prettier: yarn add -D prettier
The ESLint docs have a section on using shared configs.
For most of our projects, that means creating a eslint.config.js at the project root, possibly using this snippet as a starting point:
import eslintConfig from "@mapc/eslint-config";
export default eslintConfig;You should also add a .editorconfig file which specifies the 160-character line length for Prettier:
[*]
max_line_length = 160
For guidance on combining this ESLint config with other configs/plugins, or to override particular rules, see these ESLint docs on combining configs.