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

1. Install dependencies.

npm

$ npm add -D eslint

yarn

$ yarn add -D eslint

pnpm

$ pnpm add -D eslint

bun

$ bun add -D eslint

2. Add lint script to package.json.

package.json

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

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

files

├─ src/
├─ ...
├─ .eslintignore // [!code ++]
└─ .eslintrc.json // [!code ++]

.eslintignore

dist
storybook
!.storybook

.eslintrc.json

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

3. Lint your code.

npm

$ npm run lint

yarn

$ yarn run lint

pnpm

$ pnpm run lint

bun

$ bun run lint

TIP

For more details about ESLint refer to the ESLint docs.

TypeScript

1. Install dependencies.

npm

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

yarn

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

pnpm

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

bun

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

2. Add lint script to package.json.

package.json

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

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

files

├─ src/
├─ ...
├─ .eslintignore // [!code ++]
└─ .eslintrc.json // [!code ++]

.eslintignore

dist
storybook
!.storybook

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

3. Lint your code.

npm

$ npm run lint

yarn

$ yarn run lint

pnpm

$ pnpm run lint

bun

$ bun run lint

TIP

For more details about ESLint refer to the ESLint docs.