Eslint-plugin-angular-file-naming NPM

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

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