Design Overview of eslint-config-moneyforward 3

[wakamsha]

We are developing a new version of eslint-config-moneyforward. Our aim is to reduce the cost of configuring ESLint while maintaining a certain baseline of code quality for front-end development, so that you can focus on developing more valuable software.

Below is a design overview of the new version. It will be updated with any changes before release:

Directory Tree

.
├── /rules
│   ├── /testing-library
│   │   └── react.js
│   ├── best-practices.js
│   ├── errors.js
│   ├── es6.js
│   ├── imports.js
│   ├── jest.js
│   ├── jest-dom.js
│   ├── jsdoc.js
│   ├── jsx-a11y.js
│   ├── next.js
│   ├── node.js
│   ├── promise.js
│   ├── react-hooks.js
│   ├── react.js
│   ├── storybook.js
│   ├── style.js
│   ├── typescript.js
│   └── variables.js
├── /configs
│   ├── /test
│   │   └── react.js  # jest, jest-dom, testing-library
│   ├── essentials.js # best-practices, errors, es6, imports, promise, style, variables
│   ├── jsdoc.js      # jsdoc
│   ├── next.js       # next
│   ├── node.js       # node
│   ├── react.js      # jsx-a11y, react, react-hooks
│   ├── storybook.js  # storybook
│   └── typescript.js # typescript
└── package.json

The ruleset files, divided by context, are placed in the rules directory and grouped by domain to form presets (configs). The users of the package can load any preset from their .eslintrc.

package.json

{
  "name": "eslint-config-moneyforward",
  "version": "3.0.0",
  "exports": {
    // Make the directory 'configs' public.
    // Omit 'configs' path information, since users don't need to know it.
    "./essentials": "./configs/essentials.js",
    "./jsdoc": "./configs/jsdoc.js",
    ...
  },
  "engines": {
    "node": ">= 18.0.0"
  },

  // By defining plugins and config as dependencies,
  // Users do not need to install these themselves.
  "dependencies": {
    "@next/eslint-plugin-next": "^14.1.0",

    // The latest version is 7.0.1, but this version requires ESLint 8.56.0 and Node.js 18.18.0 or higher,
    // so in v3 it's defined as 6.21.0 or higher.
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^6.21.0",

    "confusing-browser-globals": "^1.0.11", # required with variables rule
    "eslint-plugin-jest": "^27.9.0",
    "eslint-plugin-jest-dom": "^5.1.0",
    "eslint-plugin-jsdoc": "^48.1.0",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-n": "^16.6.2",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-storybook": "^0.8.0",
    "eslint-plugin-testing-library": "^6.2.0"
  },
  "peerDependencies": {
    "eslint": "^7.32.0 || ^8.2.0",
    "typescript": ">= 4.2.4 || ^5.0.0"
  },
  "peerDependenciesMeta": {
    "typescript": {
      "optional": true
    }
  }
}

Rulesets and Dependency packages

Configs	Rules	Dependencies
essentials	best-practices errors es6 imports promise variables	confusing-browser-globals eslint eslint-plugin-promise  eslint-plugin-imports
jsdoc	jsdoc	eslint-plugin-jsdoc
next	next	@next/eslint-plugin-next
node	node	eslint-plugin-n
react	jsx-a11y react-hooks react	eslint-plugin-jsx-a11y eslint-plugin-react-hooks eslint-plugin-react
storybook	storybook	eslint-plugin-storybook
test	jest jest-dom testing-library	eslint-plugin-jest eslint-plugin-jest-dom eslint-plugin-testing-library
typescript	typescript	@eslint-typescript/eslint-plugin @eslint-typescript/parser

The ruleset will be built using the settings recommended by each plug-in, the eslint-config-airbnb ruleset and eslint-config-react-app ruleset as a reference.

Usage

Install

npm install --save-dev eslint eslint-config-moneyforward typescript

# If you format code with Prettier, install eslint-config-prettier as well.
npm install --save-dev eslint-config-prettier

Projects formatting code with Prettier must also install eslint-config-prettier. By loading this additionally, you can disable ESLint rulesets that conflict with Prettier.

Setting

Put the module into your .eslintrc.

module.exports = {
  extends: [
    "moneyforward/essentials",
    "moneyforward/react",
    ...
    "prettier", // If you format code with Prettier, this specify is required.
  ],
  // If you use TypeScript, this setting is required.
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json'],
  },
  ...
};

To load TypeScript presets (configs), write like this:

module.exports = {
  extends: [
    "moneyforward/essentials",
    "moneyforward/react",
    ...
+   "moneyforward/typescript",
    "prettier", // If you format code with Prettier, this specify is required.
  ],
+ // If you use TypeScript, this setting is required.
+ parserOptions: {
+   tsconfigRootDir: __dirname,
+   project: ['./tsconfig.json'],
+ },
  ...
};

References

• Dependency Versions | typescript-eslint
• eslint-config-airbnb - npm
• eslint-config-react-app - npm
• eslint-config-prettier - npm