ESLint config noise

An opinionated ESLint config. There are many ways to configure ESLint in the official documentation.

Noise base config

Plugins

• eslint-plugin-import
• eslint-plugin-promise
• eslint-plugin-unicorn

Install

npm install --save-dev eslint@^8.8 eslint-config-noise eslint-plugin-import@^2.27 eslint-plugin-promise@^6.0 eslint-plugin-unicorn@^43.0

Configure

Recommended

.eslintrc

{ "extends": ["noise"] }

Extensions

Node

Plugins

• eslint-plugin-node

Install

Make sure you have install the Noise base config.

npm install --save-dev eslint-plugin-node@^11.1

Configure

Recommended

.eslintrc

{ "extends": ["noise", "noise/node"] }

Scripts

.eslintrc

{ "extends": ["noise", "noise/node/script"] }

React

Plugins

• eslint-plugin-jsx-a11y
• eslint-plugin-react
• eslint-plugin-react-hooks

Install

Make sure you have install the Noise base config.

npm install --save-dev eslint-plugin-jsx-a11y@^6.4 eslint-plugin-react@^7.23 eslint-plugin-react-hooks@^4.2

Configure

Recommended

.eslintrc

{ "extends": ["noise", "noise/browser", "noise/react"] }

TypeScript

Plugins

• @typescript-eslint/eslint-plugin

Install

Make sure you have install the Noise base config.

npm install --save-dev @typescript-eslint/eslint-plugin@^5.20 @typescript-eslint/parser@^5.20 eslint-import-resolver-typescript@^2.5

Configure

Recommended

.eslintrc

{ "extends": ["noise", "noise/typescript"] }

Vue

Plugins

• eslint-plugin-vue

Install

Make sure you have install the Noise base config.

npm install --save-dev eslint-config-prettier@^6 eslint-plugin-vue@^9.0

Configure

Recommended

.eslintrc

{ "extends": ["noise", "noise/vue", "noise/vue/ts"] }

Web-App

Many web apps are a combination of Node.js and browser directives. This presets combines much of the browser and node configs with some tweaks.

Plugins

• eslint-plugin-node

Install

Make sure you have install the Noise base config.

npm install --save-dev eslint-plugin-node@^11.1

Configure

Recommended

.eslintrc

{ "extends": ["noise", "noise/web-app"] }

Combining multiple extensions

You can combine multiple extensions by following the install step per extension and configure them together.

.eslintrc

{ "extends": ["noise", "noise/react", "noise/typescript"] }

You can use the ESLint config overrides option to have a more structured configuration.

You can combine multiple extensions by following the install step per extension and configure them together.

.eslintrc

{
  "extends": ["noise"],
  "overrides": [
    {
      "files": ["**/*.ts"],
      "extends": ["noise/typescript"]
    },
    {
      "files": ["**/*.{jsx,tsx}"],
      "extends": ["noise/react"]
    },
    {
      "files": ["**/*.vue"],
      "extends": ["noise/vue", "noise/vue/ts"]
    },
    {
      "files": ["server/src/**"],
      "extends": ["noise/node", "noise/typescript"]
    },
    {
      "files": ["scripts/**"],
      "extends": ["noise/node", "noise/node/scripts"]
    },
    {
      "files": ["web-app/src/**"],
      "extends": ["noise/web-app"]
    }
  ]
}