eslint-config

A ESLint rule set for Toyokumo.

Purpose

• Standardization of coding style.
• Installation and setting support for ESLint.

Use prettier for code format

• All rules provided by toyokumo/eslint-config assume the use of prettier.
  • Install and use @toyokumo/prettier-config
• Use prettier-config-plugin to avoid lint errors where it overlaps with prettier format rules.
  • If we find a red squiggly line, we will want to fix it, but we don't have to manually fix what we can fix by formatting
• For the lint + format method, refer to the method of this repository.
• This policy might be changed.

Usage

npm i --save-dev @toyokumo/eslint-config eslint @toyokumo/prettier-config prettier npm-run-all
# or
yarn add --dev @toyokumo/eslint-config eslint @toyokumo/prettier-config prettier npm-run-all

Setup npm scripts

We must use prettier for code format when using @toyokumo/eslint-config.

We are taking this strategy for code format - eslint --fix -> prettier --write

An Example of npm scripts to achieve this strategy.

{
  "scripts": {
    "format": "run-s \"format:eslint -- {1}\" \"format:prettier -- {1}\" --",
    "format:eslint": "eslint --fix",
    "format:prettier": "prettier --write",
    "format-all": "npm run format \"./**/*.{js,ts,tsx}\"",
    "format-all:eslint": "eslint --fix \"./**/*.{js,ts,tsx}\"",
    "format-all:prettier": "prettier --write \"./**/*.{js,ts,tsx}\""
  }
}

Configuration object

const toyokumoEslint = require('@toyokumo/eslint-config');
/* 
Imported toyokumoEslint is a object of ESLint configurations.

{
  // config is a config helper function inspired by typescript-eslint.
  // https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/typescript-eslint/src/config-helper.ts
  config,
  // configs is a object of ESLint configurations.
  configs: {
    base, // Linter.FlatConfig[]
    js, // Linter.FlatConfig[]
    ts, // Linter.FlatConfig[]
    tsx, // Linter.FlatConfig[]
    react, // Linter.FlatConfig[]
    next, // Linter.FlatConfig[]
    tailwindcss, // Linter.FlatConfig[]
    jest, // Linter.FlatConfig[]
    prettier, // Linter.FlatConfig[]
  },
}

 */

Setup eslint.config.js

We just set the ideal rule set, so we can overwrite or ignore the rule depending on the project situation.

// Most simple example
const toyokumoEslint = require('@toyokumo/eslint-config');

module.exports = [
  ...toyokumoEslint.configs.base,
  ...toyokumoEslint.configs.js,
  ...toyokumoEslint.configs.ts,
  ...toyokumoEslint.configs.tsx,
  ...toyokumoEslint.configs.react,
  ...toyokumoEslint.configs.next,
  ...toyokumoEslint.configs.tailwindcss,
  ...toyokumoEslint.configs.prettier,
  {
    rules: {
      // Overwrite my rule
    }
  },
];

// Multi modules
module.exports = [
  ...toyokumoEslint.configs.base,
  ...toyokumoEslint.configs.tsx, // *.tsx only.
  ...toyokumoEslint.config({
    files: ['packages/next/**/*.ts', 'packages/next/**/*.tsx'],
    extends: [
      ...toyokumoEslint.configs.ts,
      ...toyokumoEslint.configs.react,
      ...toyokumoEslint.configs.next,
      ...toyokumoEslint.configs.tailwindcss,
      {
        languageOptions: {
          parserOptions: {
            project: 'packages/next/tsconfig.json',
          },
        },
        settings: {
          'import/resolver': {
            typescript: {
              project: 'packages/next/tsconfig.json',
            },
          },
          tailwindcss: {
            config: 'packages/next/tailwind.config.ts',
          },
        },
      }
    ],
    rules: {
      '@next/next/no-html-link-for-pages': ['error', 'packages/next/app'],
      // Overwrite my rule
    }
  }),
  ...toyokumoEslint.config({
    files: ['packages/ui-component/**/*.ts', 'packages/ui-component/**/*.tsx'],
    extends: [
      ...toyokumoEslint.configs.ts,
      ...toyokumoEslint.configs.react,
      ...toyokumoEslint.configs.tailwindcss,
      {
        languageOptions: {
          parserOptions: {
            project: 'packages/ui-component/tsconfig.json',
          },
        },
        settings: {
          'import/resolver': {
            typescript: {
              project: 'packages/ui-component/tsconfig.json',
            },
          },
          tailwindcss: {
            config: 'packages/ui-component/tailwind.config.ts',
          },
        },
      }
    ],
    rules: {
      // Overwrite my rule
    }
  }),
  ...toyokumoEslint.configs.prettier,
];