# @ngneat/eslint-plugin-reactive-forms

> ESLint rules for use with @ngneat/reactive-forms

Latest version **4.0.0** (published 2021-11-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ngneat/eslint-plugin-reactive-forms
pnpm add @ngneat/eslint-plugin-reactive-forms
yarn add @ngneat/eslint-plugin-reactive-forms
bun add @ngneat/eslint-plugin-reactive-forms
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2021-11-24 |
| First published | 2020-05-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | netanel-ngneat, itayod, shahar.kazaz |
| Keywords | eslint, eslintplugin, eslint-plugin, reactive-forms |

## Links

- npm: https://www.npmjs.com/package/@ngneat/eslint-plugin-reactive-forms
- Repository: https://github.com/ngneat/reactive-forms
- Homepage: https://github.com/ngneat/reactive-forms#readme
- Issues: https://github.com/ngneat/reactive-forms/issues
- npm.io page: https://npm.io/package/@ngneat/eslint-plugin-reactive-forms

## Dependencies (1)

- [requireindex](https://npm.io/package/requireindex.md) 1.2.0

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 4.0.0 (latest) — 2021-11-24
- 3.0.0 — 2021-10-08
- 1.0.2 — 2020-11-26
- 1.0.1 — 2020-10-14
- 1.0.0 — 2020-05-27

## README

# @ngneat/eslint-plugin-reactive-forms

ESLint rules for use with @ngneat/reactive-forms

## Installation

You'll first need to install [ESLint](http://eslint.org):

```
$ 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.

```json
"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`

```json
"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](https://github.com/palantir/tslint/issues/4534)_

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

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

Next install our ESLint Plugin

```sh
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:

```json
{
  "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`:

```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:

```json
"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`

---
_Source: https://npm.io/package/@ngneat/eslint-plugin-reactive-forms · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._