ESlint

ESlint let's you find and fix problems in your JavaScript code.

If you used the CLI method to install Minze you can extend your environment with linting quite quickly.

The following guide is based on a fresh Minze CLI installation.

JavaScript

Install dependencies.

npmyarnpnpm

bash

$ npm add -D eslint

$ npm add -D eslint

bash

$ yarn add -D eslint

$ yarn add -D eslint

bash

$ pnpm add -D eslint

$ pnpm add -D eslint

Add lint script to package.json.

package.json

json

{
  "scripts": {
    // ...
    "lint": "eslint --fix --cache {src,.storybook}/**/*.js"
  }
}

{
  "scripts": {
    // ...
    "lint": "eslint --fix --cache {src,.storybook}/**/*.js"
  }
}

Create and populate .eslintignore and .eslintrc.json files.

files.eslintignore.eslintrc.json

txt

├─ src/
├─ ...
├─ .eslintignore 
└─ .eslintrc.json

├─ src/
├─ ...
├─ .eslintignore 
└─ .eslintrc.json

dist
storybook
!.storybook

dist
storybook
!.storybook

json

{
  "$schema": "https://json.schemastore.org/eslintrc",
  "extends": ["eslint:recommended"],
  "env": {
    "node": true,
    "browser": true
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2022
  }
}

{
  "$schema": "https://json.schemastore.org/eslintrc",
  "extends": ["eslint:recommended"],
  "env": {
    "node": true,
    "browser": true
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2022
  }
}

Lint your code.

npmyarnpnpm

bash

$ npm run lint

$ npm run lint

bash

$ yarn run lint

$ yarn run lint

bash

$ pnpm run lint

$ pnpm run lint

TIP

For more details about ESLint refer to the ESLint docs.

TypeScript

Install dependencies.

npmyarnpnpm

bash

$ npm add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

$ npm add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

bash

$ yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

$ yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

bash

$ pnpm add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

$ pnpm add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

Add lint script to package.json.

package.json

json

{
  "scripts": {
    // ...
    "lint": "eslint --fix --cache {src,.storybook}/**/*.{ts,js}"
  }
}

{
  "scripts": {
    // ...
    "lint": "eslint --fix --cache {src,.storybook}/**/*.{ts,js}"
  }
}

Create and populate .eslintignore and .eslintrc.json files.

files.eslintignore.eslintrc.json

txt

├─ src/
├─ ...
├─ .eslintignore 
└─ .eslintrc.json

├─ src/
├─ ...
├─ .eslintignore 
└─ .eslintrc.json

dist
storybook
!.storybook

dist
storybook
!.storybook

json

{
  "$schema": "https://json.schemastore.org/eslintrc",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-unsafe-declaration-merging": "off"
  }
}

{
  "$schema": "https://json.schemastore.org/eslintrc",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-unsafe-declaration-merging": "off"
  }
}

Lint your code.

npmyarnpnpm

bash

$ npm run lint

$ npm run lint

bash

$ yarn run lint

$ yarn run lint

bash

$ pnpm run lint

$ pnpm run lint

TIP

For more details about ESLint refer to the ESLint docs.

ESlint ​

JavaScript ​

TypeScript ​

ESlint

JavaScript

TypeScript