Neologistic Paraphasic Mumbling

    @ngneat/eslint-plugin-reactive-forms

    4.0.0 • Public • Published

    @ngneat/eslint-plugin-reactive-forms

    ESLint rules for use with @ngneat/reactive-forms

    Installation

    You'll first need to install ESLint:

    $ npm i eslint --save-dev
    

    Next, install @ngneat/eslint-plugin-reactive-forms:

    $ npm install @ngneat/eslint-plugin-reactive-forms --save-dev
    

    Note: If you installed ESLint globally (using the -g flag) then you must also install @ngneat/eslint-plugin-reactive-forms globally.

    Usage

    Add reactive-forms to the plugins section of your .eslintrc configuration file.

    "plugins": ["@ngneat/reactive-forms"],

    Note: If you haven't set eslint up for use with Typescript, this article helps a lot: https://dev.to/robertcoopercode/using-eslint-and-prettier-in-a-typescript-project-53jb

    Supported Rules

    • @ngneat/reactive-forms/no-angular-forms-imports

    Add the rule to your .eslintrc

    "rules": {
      "@ngneat/reactive-forms/no-angular-forms-imports": "error"
    }

    Setting up the ESLint Rule in an Angular Project

    To begin with, to allow ESLint to appropriately parse Typescript we need to install a few dependencies. NOTE: It is worthwhile doing this as TSLint is no longer supported Roadmap: TSLint -> ESLint

    Open up your favourite shell in your Angular directory and run:

    npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

    Next install our ESLint Plugin

    npm install --save-dev @ngneat/eslint-plugin-reactive-forms

    We now need to set up our ESLint config files. So create a new file at the root of your workspace called .eslintrc. Place the following into it:

    {
      "root": true,
      "parser": "@typescript-eslint/parser",
      "plugins": ["@typescript-eslint", "@ngneat/reactive-forms"],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
      ],
      "rules": {
        "@ngneat/reactive-forms/no-angular-forms-imports": "error"
      }
    }

    We also want to set up a file to tell ESLint which files we should ignore. Create another file at the root of your workspace called .eslintignore:

    node_modules
    dist
    

    Finally, we will want to set up a convenient script for linting our project. Add the following to the scripts in package.json:

    "scripts": {
      ...,
      "eslint": "eslint ./src --ext .ts"
    }

    If you use a monorepo via Angular CLI, you can also set it up to run linting per project:

    "scripts": {
      ...,
      "lint:my-library": "eslint ./projects/my-library/src --ext .ts"
    }

    Now you can run npm run eslint or npm run lint:my-library and the console will error everytime it encounters a disallowed import from @angular/forms.

    We also provide a built in fixer, which will automatically fix any occurences it finds. To run it simply add -- --fix to the end of your npm command: npm run eslint -- --fix

    Install

    npm i @ngneat/eslint-plugin-reactive-forms

    DownloadsWeekly Downloads

    1,518

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    11.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • netanel-ngneat
    • itayod
    • shahar.kazaz