eslint-plugin-angular-file-naming

An ESLint plugin that enforce the filename to have a appropriate suffix (such as .component.ts, .directive.ts, .module.ts, .pipe.ts, or .service.ts).

Please note: This plugin will only lint the filenames of the .ts files you are linting with eslint. It will ignore other files that are not linted with eslint.

| File type | Appropriate suffix of the filename | | --------- | ---------------------------------- | | Component | .component.ts | | Directive | .directive.ts | | Module | .module.ts | | Pipe | .pipe.ts | | Service | .service.ts |

Installation

npm install --save-dev eslint-plugin-angular-file-naming

Or

yarn add --dev eslint-plugin-angular-file-naming

Usage

Modify your .eslintrc

// .eslintrc.json
module.exports = {
  "plugins": [
    ...,
    "angular-file-naming"
  ],
  "rules": [
    ...,
    "angular-file-naming/component-filename-suffix": "error",
    "angular-file-naming/directive-filename-suffix": "error",
    "angular-file-naming/module-filename-suffix": "error",
    "angular-file-naming/pipe-filename-suffix": "error",
    "angular-file-naming/service-filename-suffix": "error",
  ]
  ...,
}

Rules

| Rule ID | Description | | ---------------------------------------------------------------------- | --------------------------------------------------------------- | | component-filename-suffix | Enforces the file name of components to have a specified suffix | | directive-filename-suffix | Enforces the file name of directives to have a specified suffix | | module-filename-suffix | Enforces the file name of modules to have a specified suffix | | pipe-filename-suffix | Enforces the file name of pipes to have a specified suffix | | service-filename-suffix | Enforces the file name of services to have a specified suffix |

Examples

For example:

// .eslintrc.json
module.exports = {
  "plugins": [
    ...,
    "angular-file-naming"
  ],
  "rules": [
    ...,
    "angular-file-naming/component-filename-suffix": [
      "error",
      {
        "suffixes": ["component", "page", "view", "component.mock"]
      }
    ],
    "angular-file-naming/directive-filename-suffix": "error",
    "angular-file-naming/module-filename-suffix": "error",
    "angular-file-naming/pipe-filename-suffix": "error",
    "angular-file-naming/service-filename-suffix": [
      "error",
      {
        "suffixes": ["service", "guard", "store", "service.mock"]
      }
    ],
  ]
  ...,
}

Examples of incorrect file name with the above configuration:

app.comp.ts
app.mock.ts
sample.ts
test.filter.ts
test.mock.ts

Example of correct file name with the above configuration:

app.component.ts
app.page.ts
app.view.ts
app.component.mock.ts
test.directive.ts
app.module.ts
sample.pipe.ts
test.service.ts
test.service.mock.ts
test.guard.ts
test.store.ts

License

MIT