eslint-config-mizdra
ESLint config for @mizdra
インストール
npm i -D @mizdra/eslint-config-mizdra eslint
使い方
legacy config から使う場合
// @ts-check
/** @type {import('eslint').Linter.BaseConfig} */
module.exports = {
root: true,
extends: ['@mizdra/mizdra', '@mizdra/mizdra/+react', '@mizdra/mizdra/+prettier'],
parserOptions: { ecmaVersion: 2021 },
env: { es2021: true, node: true, browser: true, jest: true },
rules: {
// プロジェクト固有のルールをここに書く
},
overrides: [
// For TypeScript
{
files: ['*.ts', '*.tsx', '*.cts', '*.mts'],
extends: ['@mizdra/mizdra/+typescript', '@mizdra/mizdra/+prettier'],
rules: {
// TypeScript 向けのプロジェクト固有のルールをここに書く
},
},
],
};
flat config から使う場合
// @ts-check
import { FlatCompat } from '@eslint/eslintrc';
import js from '@eslint/js';
import globals from 'globals';
const __dirname = new URL('.', import.meta.url).pathname;
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all,
});
/** @type {import('eslint').Linter.FlatConfig[]} */
export default [
{ ignores: ['**/dist'] },
...compat.extends('@mizdra/mizdra', '@mizdra/mizdra/+react'),
{
languageOptions: {
ecmaVersion: 2021,
globals: { ...globals.node, ...globals.browser, ...globals.jest },
},
rules: {
// Write your favorite rules
},
},
...compat.config({
overrides: [
{
// For TypeScript
files: ['*.ts', '*.tsx', '*.cts', '*.mts'],
extends: ['@mizdra/mizdra/+typescript.js'],
rules: {
// Write your favorite rules for TypeScript
},
},
],
}),
...compat.extends('@mizdra/mizdra/+prettier'),
];
組み込みの 3rd-party packages
利便性のため、eslint-config-mizdra
は以下のパッケージを dependencies
としてインストールします。そのため、これらのパッケージを eslint-config-mizdra
を利用するプロジェクトの devDependencies
としてインストールする必要はありません。
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-config-prettier
eslint-plugin-import
eslint-plugin-n
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-unicorn
インストールされるバージョンは、eslint-config-mizdra
をインストールした時点で最も最新のものです。一度インストールされると、package-lock.json などによりバージョンが固定されます。最新のバージョンにアップデートする方法や、好きなバージョンに固定する方法は、「よくある質問」を参照してください。
利用可能な config
@mizdra/mizdra
基本的な rule をまとめた config です。利用するには、parserOptions.ecmaVersion
と env.es20XX
を指定する必要があります。
module.exports = {
root: true,
extends: ['@mizdra/mizdra'],
parserOptions: { ecmaVersion: 2019 }, // required
env: { es2019: true }, // required
};
@mizdra/mizdra/+node
Node.js で実行されるコード向けの config です。利用するには、eslint-plugin-n
のドキュメントに従って Node.js のバージョンを指定しておく必要があります。
module.exports = {
root: true,
extends: ['@mizdra/mizdra', '@mizdra/mizdra/+node'],
parserOptions: { ecmaVersion: 2019 },
env: { es2019: true },
};
// package.json
{
"name": "your-module",
"version": "1.0.0",
"engines": {
"node": ">=16.0.0" // required
}
}
@mizdra/mizdra/+typescript
TypeScript 向けの config です。利用するには、overrides
オプションを使用し、TypeScript のコードだけに config が適用されるようにしてください。
module.exports = {
root: true,
extends: ['@mizdra/mizdra'],
parserOptions: { ecmaVersion: 2019 },
env: { es2019: true },
overrides: [
{
files: ['*.ts', '*.tsx', '*.cts', '*.mts'],
// NOTE: prettier を利用する場合は @mizdra/mizdra/+typescript の後に
// @mizdra/mizdra/+prettier の extends も必要です。
extends: ['@mizdra/mizdra/+typescript'],
rules: {
// TypeScript 向けのプロジェクト固有のルールをここに書く
},
},
],
};
@mizdra/mizdra/+react
React を使っているコード向けの config です。env.browser
を true
にして利用することを推奨しています。
module.exports = {
root: true,
extends: ['@mizdra/mizdra', '@mizdra/mizdra/+react'],
parserOptions: { ecmaVersion: 2019 },
env: {
es2019: true,
browser: true, // recommended
},
};
@mizdra/mizdra/+prettier
Prettier を使っているコード向けの config です。全ての config の最後に extends することを想定しています。
module.exports = {
root: true,
extends: ['@mizdra/mizdra', '@mizdra/mizdra/+prettier'],
parserOptions: { ecmaVersion: 2019 },
env: { es2019: true },
overrides: [
{
files: ['*.ts', '*.tsx', '*.cts', '*.mts'],
extends: ['@mizdra/mizdra/+typescript', '@mizdra/mizdra/+prettier'],
},
],
};
よくある質問
組み込みの 3rd-party packages をアップデートするには?
一度 eslint-config-mizdra
をアンインストールしてから再度インストールしてください。組み込みの 3rd-party packages が最新のバージョンに切り替わります。
npm un @mizdra/eslint-config-mizdra
npm i -D @mizdra/eslint-config-mizdra
組み込みの 3rd-party packages を好きなバージョンに固定するには?
npm と pnpm では、package.json
の overrides
フィールドを使って、組み込みの 3rd-party packages を好きなバージョンにできます。yarn では、package.json
の resolutions
フィールドを使って、組み込みの 3rd-party packages のバージョンを固定できます。
- https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides
- https://yarnpkg.com/configuration/manifest/#resolutions
- https://pnpm.io/ja/package_json#pnpmoverrides
// package.json
{
"overrides": {
"@typescript-eslint/parser": "^4.0.0"
}
}
Special Thanks
このパッケージは teppeis/eslint-config-teppeis を参考に設計されました。