README.adoc

eslint-config

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.

Table of Contents

• Text Editor
  • VSCode
  • Vim
• General rules
  • Import
  • Export
• Usage
  • Node project
  • TypeScript project
  • React project
  • React + TypeScript project
  • Preact + TypeScript project
• Contributing

Text Editor

VSCode

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

• ESLint

• Prettier

Then add these settings to your VSCode’s settings.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:

For more information, check this part of the ESLint documentation.

Vim

Vim users could use 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 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

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: - group-exports. - exports-last.

Usage

This plugin offer several configurations depending on your project type.

Node project

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:

"eslintConfig": {
  "extends": "@fewlines/eslint-config/node"
}

TypeScript project

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:

"eslintConfig": {
  "extends": "@fewlines/eslint-config/typescript"
}

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

React project

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:

"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.

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:

"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

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:

"eslintConfig": {
  "extends": "@fewlines/eslint-config/preact-typescript"
}

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

Contributing

See CONTRIBUTING.md.