Skip to content

Commit

Permalink
docs: add config examples for all rules
Browse files Browse the repository at this point in the history
  • Loading branch information
freaktechnik committed Jul 17, 2020
1 parent 74cea8f commit aef1987
Showing 1 changed file with 153 additions and 0 deletions.
153 changes: 153 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,34 @@
Rules for Array functions and methods.

## Contents

- [Installation](#installation)
- [Rules](#rules)
- [`from-map`](#from-map)
- [Examples](#examples)
- [Using the rule](#using-the-rule)
- [`no-unnecessary-this-arg`](#no-unnecessary-this-arg)
- [Checked Functions](#checked-functions)
- [Checked Methods](#checked-methods)
- [Examples](#examples-1)
- [Using the rule](#using-the-rule-1)
- [`prefer-array-from`](#prefer-array-from)
- [Examples](#examples-2)
- [Using the rule](#using-the-rule-2)
- [`avoid-reverse`](#avoid-reverse)
- [Examples](#examples-3)
- [Using the rule](#using-the-rule-3)
- [`prefer-flat-map`](#prefer-flat-map)
- [Examples](#examples-4)
- [Using the rule](#using-the-rule-4)
- [`prefer-flat`](#prefer-flat)
- [Examples](#examples-5)
- [Using the rule](#using-the-rule-5)
- [Configurations](#configurations)
- [`array-func/recommended` Configuration](#array-funcrecommended-configuration)
- [Using the Configuration](#using-the-configuration)
- [`array-func/all` Configuration](#array-funcall-configuration)
- [Using the Configuration](#using-the-configuration-1)
- [License](#license)

## Installation
Expand All @@ -44,21 +52,25 @@ $ npm install -D eslint-plugin-array-func
## Rules

### `from-map`

Prefer using the `mapFn` callback of `Array.from` over an immediate `.map()` call on the `Array.from` result.

`Array.from` has a `mapFn` callback that lets you map the items of the iterable to an array like you would with `.map()` except that values have not yet been truncated to fit types allowed in an array. Some iterables can't be directly converted to an array and thus have to be iterated either way. In that case using the mapping callback of `Array.from` avoids an iteration. See also [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Description) for an explanation of the potential benefits of using the mapping callback of `Array.from` directly.

This rule is auto fixable. It will produce nested function calls if you use the `Array.from` map callback and have a `.map()` call following it.

#### Examples

Code that triggers this rule:

```js
Array.from(iterable).map((t) => t.id);

Array.from(iterable, (t) => t.id).map((id) => id[0]);
```

Code that doesn't trigger this rule:

```js
Array.from(iterable, (t) => t.id);

Expand All @@ -68,17 +80,37 @@ const arr = Array.from(iterable);
const mappedArray = arr.map((t) => t.id);
```

#### Using the rule

To use this rule, your `.eslintrc.json` should at least contain the following (may look different for other config file styles):

```json
{
"plugin": [
"array-func"
],
"rules": {
"array-func/array-from": "error"
}
}
```

Alternatively you can use a [configuration](#configurations) included with this plugin.

### `no-unnecessary-this-arg`

Avoid the `this` parameter when providing arrow function as callback in array functions.

The `this` parameter is useless when providing arrow functions, since the `this` of arrow functions can not be rebound, thus the parameter has no effect.

The fix is usually to omit the parameter. The Array methods can't be auto-fixed, since the detection of array methods is not confident enough to know that the method is being called on an array.

#### Checked Functions

- `from` (fixable)

#### Checked Methods

- `every`
- `filter`
- `find`
Expand All @@ -88,7 +120,9 @@ The fix is usually to omit the parameter. The Array methods can't be auto-fixed,
- `some`

#### Examples

Code that triggers this rule:

```js
const array = Array.from("example", (char) => char.charCodeAt(0), this);

Expand All @@ -108,6 +142,7 @@ array.forEach((char) => console.log(char), this);
```

Code that doesn't trigger this rule:

```js
const array = Array.from("example", (char) => char.charCodeAt(0));
const alternateArray = Array.from("example", function(char) {
Expand Down Expand Up @@ -135,21 +170,42 @@ array.forEach(function(char) {
array.filter(this.isGood, this);
```

#### Using the rule

To use this rule, your `.eslintrc.json` should at least contain the following (may look different for other config file styles):

```json
{
"plugin": [
"array-func"
],
"rules": {
"array-func/no-unnecessary-this-arg": "error"
}
}
```

Alternatively you can use a [configuration](#configurations) included with this plugin.

### `prefer-array-from`

Use `Array.from` instead of `[...iterable]`.
See [`from-map`](#from-map) for additional benefits `Array.from` can provide over the spread syntax.

This rule is auto fixable.

#### Examples

Code that triggers this rule:

```js
const iterable = [..."string"];

const arrayCopy = [...iterable];
```

Code that doesn't trigger this rule:

```js
const array = [1, 2, 3];

Expand All @@ -160,7 +216,25 @@ const arrayCopy = Array.from(array);
const characterArray = Array.from("string");
```

#### Using the rule

To use this rule, your `.eslintrc.json` should at least contain the following (may look different for other config file styles):

```json
{
"plugin": [
"array-func"
],
"rules": {
"array-func/prefer-array-from": "error"
}
}
```

Alternatively you can use a [configuration](#configurations) included with this plugin.

### `avoid-reverse`

Avoid reversing the array and running a method on it if there is an equivalent
of the method operating on the array from the other end.

Expand All @@ -169,14 +243,17 @@ There are two operations with such equivalents: `reduce` with `reduceRight`.
This rule is auto fixable.

#### Examples

Code that triggers this rule:

```js
const string = array.reverse().reduce((p, c) => p + c, '');

const reverseString = array.reverse().reduceRight((p, c) => p + c, '');
```

Code that doesn't trigger this rule:

```js
const reverseString = array.reduce((p, c) => p + c, '');

Expand All @@ -187,21 +264,42 @@ const reverseArray = array.reverse();
const reverseMap = array.reverse().map((r) => r + 1);
```

#### Using the rule

To use this rule, your `.eslintrc.json` should at least contain the following (may look different for other config file styles):

```json
{
"plugin": [
"array-func"
],
"rules": {
"array-func/avoid-reverse": "error"
}
}
```

Alternatively you can use a [configuration](#configurations) included with this plugin.

### `prefer-flat-map`

Use `.flatMap()` to flatten an array and map the values instead of using
`.flat().map()`.

This rule is auto fixable.

#### Examples

Code that triggers this rule:

```js
const flattenedAndMapped = array.map((p) => p).flat();

const flatWithDefaultDepth = array.map((r) => r).flat(1);
```

Code that doesn't trigger this rule:

```js
const oneAction = array.flatMap((m) => m);

Expand All @@ -216,7 +314,25 @@ const flatMappedWithExtra = array.map((r) => r + 1).reverse().flat();
const flatWithDepth = array.map((p) => p).flat(99);
```

#### Using the rule

To use this rule, your `.eslintrc.json` should at least contain the following (may look different for other config file styles):

```json
{
"plugin": [
"array-func"
],
"rules": {
"array-func/prefer-flat-map": "error"
}
}
```

Alternatively you can use a [configuration](#configurations) included with this plugin.

### `prefer-flat`

Use `.flat()` to flatten an array of arrays. This rule currently recognizes two
patterns and can replace them with a `.flat()` call:

Expand All @@ -226,14 +342,17 @@ patterns and can replace them with a `.flat()` call:
This rule is auto fixable.

#### Examples

Code that triggers this rule:

```js
const concatFlat = [].concat(...array);

const reduceFlat = array.reduce((p, n) => p.concat(n), []);
```

Code that doesn't trigger this rule:

```js
const flattened = array.flat();

Expand All @@ -242,9 +361,27 @@ const reverseFlat = array.reduce((p, n) => n.concat(p), []);
const otherReduce = array.reduce((p, n) => n + p, 0);
```

#### Using the rule

To use this rule, your `.eslintrc.json` should at least contain the following (may look different for other config file styles):

```json
{
"plugin": [
"array-func"
],
"rules": {
"array-func/prefer-flat": "error"
}
}
```

Alternatively you can use a [configuration](#configurations) included with this plugin.

## Configurations

### `array-func/recommended` Configuration

The recommended configuration will set your parser ECMA Version to 2015, since that's when the Array functions and methods were added.

Rule | Error level | Fixable
Expand All @@ -255,7 +392,9 @@ Rule | Error level | Fixable
`array-func/avoid-reverse` | Error | Yes

#### Using the Configuration

To enable this configuration use the `extends` property in your `.eslintrc.json` config file (may look different for other config file styles):

```json
{
"extends": [
Expand All @@ -265,6 +404,7 @@ To enable this configuration use the `extends` property in your `.eslintrc.json`
```

### `array-func/all` Configuration

The recommended configuration does not include all rules, since some Array methods
were added after ES2015. The all configuration enables all rules the plugin
contains and sets the ECMA version appropriately.
Expand All @@ -278,5 +418,18 @@ Rule | Error level | Fixable
`array-func/prefer-flat-map` | Error | Yes
`array-func/prefer-flat` | Error | Yes

#### Using the Configuration

To enable this configuration use the `extends` property in your `.eslintrc.json` config file (may look different for other config file styles):

```json
{
"extends": [
"plugin:array-func/all"
]
}
```

## License

The `array-func` plugin is licensed under the [MIT License](LICENSE).

0 comments on commit aef1987

Please sign in to comment.