https://github.com/takuya-nakayasu/eslint-plugin-angular-file-naming
ESLint plugin for Angular file naming conventions
https://github.com/takuya-nakayasu/eslint-plugin-angular-file-naming
angular eslint eslint-plugin
Last synced: about 1 year ago
JSON representation
ESLint plugin for Angular file naming conventions
- Host: GitHub
- URL: https://github.com/takuya-nakayasu/eslint-plugin-angular-file-naming
- Owner: takuya-nakayasu
- License: mit
- Created: 2021-07-06T10:17:38.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2022-11-12T09:48:54.000Z (over 3 years ago)
- Last Synced: 2024-12-17T19:03:22.550Z (over 1 year ago)
- Topics: angular, eslint, eslint-plugin
- Language: TypeScript
- Homepage:
- Size: 853 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# eslint-plugin-angular-file-naming
[](https://www.npmjs.com/package/eslint-plugin-angular-file-naming)
[](https://opensource.org/licenses/MIT)
[](https://twitter.com/takuya_nakayasu)
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`
```js
// .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](./docs/rules/component-filename-suffix.md) | Enforces the file name of components to have a specified suffix |
| [directive-filename-suffix](./docs/rules/directive-filename-suffix.md) | Enforces the file name of directives to have a specified suffix |
| [module-filename-suffix](./docs/rules/module-filename-suffix.md) | Enforces the file name of modules to have a specified suffix |
| [pipe-filename-suffix](./docs/rules/pipe-filename-suffix.md) | Enforces the file name of pipes to have a specified suffix |
| [service-filename-suffix](./docs/rules/service-filename-suffix.md) | Enforces the file name of services to have a specified suffix |
## Examples
For example:
```js
// .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