= 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].