@etchteam/eslint

The eslint config that we use at Etch

⚠️ Version 1.0.0+ requires ESLint 9 - See migration guide below for upgrading.

Install

npm i -D eslint@^9.0.0 prettier @etchteam/eslint-config eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-storybook

Usage

Create an eslint.config.js file in your project root:

importetchConfigfrom'@etchteam/eslint-config';exportdefaultetchConfig;

Environment-Specific Configs

For projects that don't need the full config, use environment-specific imports to reduce dependencies:

Next.js

npm i -D eslint prettier @etchteam/eslint-config eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-storybook @next/eslint-plugin-next eslint-plugin-react-hooks

importnextjsfrom'@etchteam/eslint-config/nextjs';exportdefaultnextjs;

Node.js / Express

npm i -D eslint prettier @etchteam/eslint-config

importnodejsfrom'@etchteam/eslint-config/nodejs';exportdefaultnodejs;

Angular

npm i -D eslint prettier @etchteam/eslint-config eslint-plugin-storybook angular-eslint

importangularfrom'@etchteam/eslint-config/angular';exportdefaultangular;

Preact

npm i -D eslint prettier @etchteam/eslint-config eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-storybook

importpreactfrom'@etchteam/eslint-config/preact';exportdefaultpreact;

Web Components (Lit)

npm i -D eslint prettier @etchteam/eslint-config eslint-plugin-storybook eslint-plugin-lit

importwebComponentsfrom'@etchteam/eslint-config/web-components';exportdefaultwebComponents;

NestJS

npm i -D eslint prettier @etchteam/eslint-config @darraghor/eslint-plugin-nestjs-typed

importnestjsfrom'@etchteam/eslint-config/nestjs';exportdefaultnestjs;

Composable Configs

Build custom configs by combining individual modules:

import{base,json,yaml,react}from'@etchteam/eslint-config';exportdefault[
...base,
...json,
...yaml,
...react,{// Your custom overridesrules: {'react/prefer-read-only-props': 'warn',},},];

Available Modules

Module	Description
base	Core rules: JS, TypeScript, security, imports, prettier
json	JSON file linting
yaml	YAML file linting
storybook	Storybook best practices
react	React + JSX accessibility

Environment Configs (Self-Contained)

Config	Includes
nextjs	base + json + yaml + storybook + react + Next.js rules
nodejs	base + json + yaml + Node.js globals
angular	base + json + yaml + storybook + Angular rules
preact	base + json + yaml + storybook + react (Preact settings)
web-components	base + json + yaml + storybook + Lit rules
nestjs	base + json + yaml + NestJS rules + Jest globals

Required Peer Dependencies

The base, json, and yaml modules have all their plugins included as package dependencies — no extra installs needed.

Other configs require additional plugins to be installed as peer dependencies:

Config	Additional plugins to install
Default (@etchteam/eslint-config)	eslint-plugin-reacteslint-plugin-jsx-a11yeslint-plugin-storybook
react	eslint-plugin-reacteslint-plugin-jsx-a11y
storybook	eslint-plugin-storybook
nextjs	eslint-plugin-reacteslint-plugin-jsx-a11yeslint-plugin-storybook@next/eslint-plugin-nexteslint-plugin-react-hooks
nodejs	None
preact	eslint-plugin-reacteslint-plugin-jsx-a11yeslint-plugin-storybook
angular	eslint-plugin-storybookangular-eslint
web-components	eslint-plugin-storybookeslint-plugin-lit
nestjs	@darraghor/eslint-plugin-nestjs-typed

With lint-staged

New project

Run the following:

npm i -D husky lint-staged
echo"module.exports = { '*.{ts,tsx,js,jsx,yml,yaml,json}': 'eslint --fix' };"> lint-staged.config.cjs
npx husky init
echo"npx --no-install -- lint-staged"> .husky/pre-commit

Existing project with husky and lint staged

Add the following to your lint-staged config:

'*.{ts,tsx,js,jsx,yml,yaml,json}': 'eslint --fix'

Usage with VSCode

New project with no VSCode config

Run the following:

mkdir .vscode
echo"{ \"editor.formatOnSave\": false, \"editor.codeActionsOnSave\": { \"source.fixAll.eslint\": \"explicit\" } }"> .vscode/settings.json
# The VSCode prettier extension doesn't read the eslint config, so specific# prettier overrides need to go in a prettier config for format on saveecho"export default { singleQuote: true };"> prettier.config.js

Exisiting project with VSCode config

Add the following to .vscode/settings.json:

"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}

Run the following:

# The VSCode prettier extension doesn't read the eslint config, so specific# prettier overrides need to go in a prettier config for format on saveecho"export default { singleQuote: true };"> prettier.config.js

Migrating from ESLint 8

If you're upgrading from ESLint 8, follow these steps:

1. Update Dependencies

npm install eslint@^9.0.0 @etchteam/eslint-config@^1.0.0

2. Replace Configuration

Remove your old .eslintrc.* files and create a new eslint.config.js:

importetchConfigfrom'@etchteam/eslint-config';exportdefaultetchConfig;

3. Update Scripts (if needed)

ESLint 9 uses flat config by default, so your existing npm scripts should work without changes.

What's Changed

• Flat config format - More explicit and performant
• ESLint 9 compatibility - Latest features and fixes
• Updated plugins - All plugins updated to latest versions
• Modular configs - Import only what you need for your environment