npm package: @fewlines/eslint-config
Author: Fewlines
Latest version: 3.1.2

= eslint-config
:toc: preamble

Disclaimer: this package is made for our internal usage and is only open source for convenience so we might not consider Pull Requests or Issues.
Feel free to fork though.

This package includes the different styles we apply to our JavaScript and TypeScript code.

⚠️ As this plugin wants to use a minimalist configuration, it relies on using prettier via ESLint which means you could have to configure your editor. The goal is to not have the editor run prettier directly as it would conflict with ESLint.

== Text Editor

=== VSCode

In order to integrate `ESLint` into `VS Code`, install these two extensions:

- https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint[ESLint]
- https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode[Prettier]

Then add these settings to your VSCode's `settings.json`:

[source, json]
----
"eslint.format.enable": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"[javascript]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascriptreact]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescriptreact]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[graphql]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[json]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
}
----

If the linter does not work right away, you can pop the `VS Code` command palette with `⌘ Cmd + ↑ Shift + P` on mac, or `Ctrl + ↑ Shift + P` on windows/linux, and set the default formatter:

image::https://user-images.githubusercontent.com/31956107/75045130-06f07800-54c3-11ea-8881-f9c9a50efea9.gif[VS Code default linter gif]

For more information, https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint[check this part of the ESLint documentation].

=== Vim

Vim users could use https://github.com/dense-analysis/ale[ALE] and use `let g:ale_fix_on_save = 1` and `eslint` as the linter for JavaScript and TypeScript.

== General rules

To enforce consistency throughout our imports and exports, we are using https://www.npmjs.com/package/eslint-plugin-import[eslint-plugin-import].

=== Import

The set of rules we chose to organize our imports are the following groups:

- Built in and externals
- Parents, siblings, indexes and path aliases

[source, js]
----
import { IncomingMessage, ServerResponse } from "http";
import React from "react"

import { CustomError } from "@src/errors"
import { Handler } from "./handler";
----

=== Export

For export rules, we are using:
- https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/group-exports.md[group-exports].
- https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/exports-last.md[exports-last].

== Usage

This plugin offer several configurations depending on your project type.

=== Node project

[source, shell]
----
yarn add -D @fewlines/eslint-config eslint \
eslint-config-prettier eslint-plugin-prettier prettier \
eslint-plugin-import
----

Then add these lines to your package.json:

[source, json]
----
"eslintConfig": {
  "extends": "@fewlines/eslint-config/node"
}
----

=== TypeScript project

[source, shell]
----
yarn add -D @fewlines/eslint-config eslint \
eslint-config-prettier eslint-plugin-prettier prettier \
@typescript-eslint/eslint-plugin @typescript-eslint/parser \
eslint-plugin-import
----

Then add these lines to your package.json:

[source, json]
----
"eslintConfig": {
  "extends": "@fewlines/eslint-config/typescript"
}
----

The TypeScript plugin extends the previous Node plugin so it is not needed.

=== React project

[source, shell]
----
yarn add -D @fewlines/eslint-config eslint \
eslint-config-prettier eslint-plugin-prettier prettier \
eslint-plugin-react \
eslint-plugin-import
----

Then add these lines to your package.json:

[source, json]
----
"eslintConfig": {
  "extends": "@fewlines/eslint-config/react"
}
----

The React plugin extends the previous Node plugin so it is not needed.

=== React + TypeScript project

⚠️ This preset only aim to remove the `prop-types` checks. You should use it along the `react` and `typescript` presets.

[source, shell]
----
yarn add -D @fewlines/eslint-config eslint \
eslint-config-prettier eslint-plugin-prettier prettier \
@typescript-eslint/eslint-plugin @typescript-eslint/parser \
eslint-plugin-react \
eslint-plugin-import
----

Then add these lines to your `package.json`:

[source, json]
----
"eslintConfig": {
  "extends": [
    "@fewlines/eslint-config/typescript",
    "@fewlines/eslint-config/react",
    "@fewlines/eslint-config/react-typescript"
  ]
}
----

The React + Typescript plugin extends the previous Node plugin so it is not needed.

=== Preact + TypeScript project

[source, shell]
----
yarn add -D @fewlines/eslint-config eslint \
eslint-config-prettier eslint-plugin-prettier prettier \
@typescript-eslint/eslint-plugin @typescript-eslint/parser \
eslint-plugin-import
----

Then add these lines to your `package.json`:

[source, json]
----
"eslintConfig": {
  "extends": "@fewlines/eslint-config/preact-typescript"
}
----

The Preact + Typescript plugin extends the previous Node plugin so it is not needed.

== Contributing

See xref:CONTRIBUTING.md[CONTRIBUTING.md].