unlight/eslint-plugin-ngxs-style-guide

ESLint rules for ngxs state manager

eslint-plugin-ngxs-style-guide

ESLint rules for ngxs state manager.

Install

npm install --save-dev eslint-plugin-ngxs-style-guide

Usage

Configure it in your configuration file:

1. Add to plugins section:

ngxs-style-guide

2. Add to extends section (optional):

plugin:ngxs-style-guide/recommended

3. Configure rules

Rules

NGXS style guide - https://www.ngxs.io/recipes/style-guide

• ngxs-style-guide/state-suffix A state should always be suffixed with the word State. Right: ZooState Wrong: Zoo
• ngxs-style-guide/state-filenames States should have a .state.ts suffix for the filename
• ngxs-style-guide/state-interfaces State interfaces should be named the name of the state followed by the Model suffix
• ngxs-style-guide/select-suffix Selects should have a $ suffix
• ngxs-style-guide/action-suffixes Actions should NOT have a suffix
• ngxs-style-guide/plugin-suffix Plugins should end with the Plugin suffix

Other rules

• ngxs-style-guide/no-subscribe-in-actions Possible error https://stackoverflow.com/questions/56122116/do-not-subscribe-to-actions-ngxs
• ngxs-style-guide/no-pipe-dispatch No pipe() after dispatch

Todo

• return observable from action
• selector inject it must be after @State({ name: 'supplier', defaults: defaultState, }) @Injectable({ providedIn: 'root' })

eslint-plugin-ngxs-style-guide's Issues

new "no-pipe-dispatch" rule

Hi @unlight ,

could you please describe the new rule, that you've added with release 2.0 of this great plugin: ngxs-style-guide/no-pipe-dispatch? Maybe you get a source or explanation by hand, showing why it's important to avoid a pipe(...) after a dispatch(...)?

I'm asking because I thought this plugin serves as an ESLint plugin for the official best practices: https://www.ngxs.io/recipes/style-guide (even if this plugin is not authored by the NGXS creator) And I can't find a recommendation regarding the pipe-dispatch there.

Best,
Sven

Doesn't work with TypeScript 4.x

Hi there!

Thanks for the great plugin @unlight !

We're already using it in some of our TypeScript 3.x projects. We wanted to use it in a new project with TypeScript 4.x as well, but sadly the plugin itself have a dependency to TypeScript 3.x. Could you please fix it and allow TypeScript 4.x as well?

Best,
Sven

ESLint fails to run with plugin in Angular 13 project

Recreate Steps

1. Create a new Angular 13 project using ng new
2. Add ESLint to the project using ng add @angular-eslint/schematics
3. Install plugin using npm install --save-dev eslint-plugin-ngxs-style-guide
4. Add plugin to ESLint configuration file
5. Attempt to run via ng lint or npm run lint

Error Message

An unhandled exception occurred: 
  Failed to load plugin 'ngxs-style-guide' declared in '.eslintrc.json#overrides[0]': 
    Class extends value undefined is not a constructor or null

Referenced from: <project_path>\.eslintrc.json
See "<temp_dir>\ng-mlwbyZ\angular-errors.log" for further details.

Environment Information

• Node.js version: 16.13.0
• Angular CLI version: 13.0.3
• eslint version: 8.2.0
• eslint-plugin-ngxs-style-guide version: 2.0.2
• Platform: Windows 10

ESLint Configuration File

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["tsconfig.json"],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:rxjs/recommended",
        "plugin:ngxs-style-guide/recommended",
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "plugins": ["ngxs-style-guide", "rxjs"],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ],
        "rxjs/no-unsafe-takeuntil": [
          "error",
          {
            "alias": ["untilDestroyed"]
          }
        ],
        "quotes": [
          2,
          "single",
          {
            "avoidEscape": true,
            "allowTemplateLiterals": true
          }
        ],
        "indent": ["error", 4],
        "init-declarations": "off"
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    }
  ]
}

Check return values for Actions

Hi @unlight,

I already noticed that you have

return observable from action

on your todo list (see the README.md). I would be really happy if you could implement it. But with a slight modification. From my understanding (please compare with https://www.ngxs.io/concepts/state#defining-actions) the following return values for actions seems to be valid:

• void
• Observable<T>
• Promise<T>

So it would be really helpful to have a rule in this great plugin to have an eye on this requirement as well.

What do you think about?

Best,
Sven