@fewlines/eslint-config NPM

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

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:

== 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 \