acdh-oeaw eslint configs

Shared configuration presets for eslint.

• @acdh-oeaw/eslint-config: recommended base config for typescript projects
• @acdh-oeaw/eslint-config-astro: additional recommended config for Astro projects
• @acdh-oeaw/eslint-config-mdx: additional recommended config for .mdx files
• @acdh-oeaw/eslint-config-next: additional recommended config for Next.js projects
• @acdh-oeaw/eslint-config-node: additional recommended config for Node.js projects
• @acdh-oeaw/eslint-config-nuxt: additional recommended config for Nuxt 3 projects
• @acdh-oeaw/eslint-config-playwright: additional recommended config for Playwright projects
• @acdh-oeaw/eslint-config-react: additional recommended config for React projects
• @acdh-oeaw/eslint-config-solid: additional recommended config for Solid projects
• @acdh-oeaw/eslint-config-storybook: additional recommended config for Storybook projects
• @acdh-oeaw/eslint-config-tailwindcss: additional recommended config for Tailwind CSS
• @acdh-oeaw/eslint-config-vue: additional recommended config for Vue 3 projects

How to install

npm install -D eslint globals @acdh-oeaw/eslint-config
# additional configs
npm install -D @acdh-oeaw/eslint-config-react @acdh-oeaw/eslint-config-next

Add the configs to eslint.config.js:

/** @typedef {import("typescript-eslint").Config} Config */

import baseConfig from "@acdh-oeaw/eslint-config";
import nextConfig from "@acdh-oeaw/eslint-config-next";
import reactConfig from "@acdh-oeaw/eslint-config-react";

/** @type {Config} */
const config = [...baseConfig, ...reactConfig, ...nextConfig];

export default config;

Optionally, enable additional rules:

/** @typedef {import("typescript-eslint").Config} Config */

import baseConfig from "@acdh-oeaw/eslint-config";
import nextConfig from "@acdh-oeaw/eslint-config-next";
import reactConfig from "@acdh-oeaw/eslint-config-react";
import gitignore from "eslint-config-flat-gitignore";

/** @type {Config} */
const config = [
	gitignore(),
	...baseConfig,
	...reactConfig,
	...nextConfig,
	{
		rules: {
			"arrow-body-style": ["error", "always"],
			"prefer-arrow-callback": ["error", { allowNamedFunctions: true }],
			"@typescript-eslint/explicit-module-boundary-types": "error",
			"@typescript-eslint/require-array-sort-compare": "error",
			"@typescript-eslint/strict-boolean-expressions": "error",
			"react/jsx-sort-props": ["error", { reservedFirst: true }],
		},
	},
];

export default config;

How to install in Nuxt

For nuxt projects, you need to use the @nuxt/eslint module, so eslint understands nuxt auto-imports.

npx nuxi module add eslint

In nuxt.config.ts, configure the module for "standalone" mode, since we provide our own config:

export default defineNuxtConfig({
	modules: ["@nuxt/eslint"],
	eslint: {
		config: {
			standalone: true,
		},
	},
});

Pass our config to withNuxt in eslint.config.js:

/** @typedef {import("typescript-eslint").Config} Config */

import baseConfig from "@acdh-oeaw/eslint-config";
import nuxtConfig from "@acdh-oeaw/eslint-config-nuxt";
import vueConfig from "@acdh-oeaw/eslint-config-vue";

import { withNuxt } from "./.nuxt/eslint.config.mjs";

/** @type {Config} */
const config = [...baseConfig, ...vueConfig, ...nuxtConfig];

export default withNuxt(config);

How to use

Add a script to package.json:

{
	"lint:check": "eslint . --cache",
	"lint:fix": "npm run lint:check -- --fix"
}

You can then run npm run lint:check to lint, and npm run lint:fix to fix auto-fixable errors.

How to run with Git hooks

npm install -D lint-staged npm-run-all2 simple-git-hooks

To run the linter on every Git commit, add the following to package.json:

{
	"scripts": {
		"format:check": "prettier . --cache --check --ignore-path .gitignore",
		"format:fix": "npm run format:check -- --write",
		"lint:check": "eslint . --cache",
		"lint:fix": "npm run lint:check -- --fix",
		"prepare": "npm run setup",
		"setup": "is-ci || simple-git-hooks",
		"validate": "run-p format:check lint:check"
	},
	"lint-staged": {
		"*.@(cjs|js|mjs|ts|tsx|vue)": ["eslint --cache --fix", "prettier --cache --write"],
		"*": "prettier --cache --ignore-unknown --write"
	},
	"simple-git-hooks": {
		"pre-commit": "npx lint-staged",
		"pre-push": "npm run validate"
	}
}

Ignore .gitignore files

Either use includeIgnoreFile from @eslint/compat, or eslint-config-flat-gitignore.

Editor integrations

VS Code

Install the VS Code vscode-eslint plugin by pressing Ctrl+P and pasting the following command:

ext install dbaeumer.vscode-eslint

Also, make sure to add vscode-eslint to the list of recommended plugins for your project in .vscode/extensions.json:

{
	"recommendations": ["dbaeumer.vscode-eslint"]
}

You may also want to enable "Fix auto-fixable errors on Save" in .vscode/settings.json:

{
	"editor.codeActionsOnSave": {
		"source.fixAll": true
	}
}