eslint-plugin-coding-rules

eslint plugin for making coding rules.

installation

$ npm install --save-dev @hirasaki/eslint-plugin-coding-rules

Then, in your .eslintrc.json

{
  "plugins": ["@hirasaki/coding-rules"],
}

Finally, enable rules that you would like to use.

  "rules": {
    "@hirasaki/coding-rules/no-use-specific-imports": [
      "error", [
        {
          filePath: [
            "**/components/**",
          ],
          importName: ["react-redux", "**/stores"],
        },
        {
          filePath: [
            "**/pages/**",
          ],
          importName: ["**/*Service", "**/ServiceFactory"],
          message: "'{{importSource}}'からは'{{importFrom}}'をインポートすることはできません。",
        },
      ]
    ]
  }

Rule Details

no-use-specific-imports

Disallow specific imports from specific dirs or source files.

Options

format is

{
  filePath: string | string[],
  importName: string | string[],
  message?: string
}[]

| key | types | description | | ---------- | ------------------ | --------------------------------------------------------------- | | filePath | string or string[] | Enter paths where the target file is located. | | importName | string or string[] | Enter the name of the libraries for which import is prohibited. | | message | string | custom error message. |

message format

| key | description | | ---------------- | ------------------------------ | | {{importSource}} | replaces the source file path. | | {{importFrom}} | replaces the import name. |

example

  "rules": {
    "@hirasaki/coding-rules/no-use-specific-imports": [
      'error',
      [
        {
          filePath: [
            "**/components/**",
          ],
          importName: ["react-redux", "**/stores"],
        },
        {
          filePath: [
            "**/pages/**",
          ],
          importName: ["**/*Service", "**/ServiceFactory"],
          message: "'{{importSource}}'からは'{{importFrom}}'をインポートすることはできません。",
        },
      ]
    ]
  }

Files with paths that match filePath will not be able to import the library specified by importName.

• components/atoms/ButtonAtom.tsx can not import react-redux or **/stores.
• pages/MainPage.tsx can not import **/Service or **/ServiceFactory.

architecture example

• **/components/atoms/**, components/moleculres/**, **/components/organisms/** can not import redux directly.
• **/components/atoms/**, components/moleculres/**, **/components/organisms/**, **/pages/**, can not import service files directly.

Control the data processing flow by preventing direct import.

react sample code is here sample code

Implementation

• Rule source
• Test source