@hyperse/eslint-config-hyperse

🛠 These are my settings for TypeScript / ESLint / Prettier in a project, also support mono / esm 📦

These are the ESLint and Prettier settings for a Next.js project ⚡️

Table of Contents

• Eslint / Prettier Setup of @hyperse 📦
• Table of Contents
  • What it does
  • Local / Per Project Install
  • Scripts
  • Extends tsconfig.json
  • If you use Next.js
  • If you use React.js
  • If you use VS Code

What it does

• Lints JavaScript / TypeScript based on the latest standards
• Multiple configs react hooks next..
• Shared tsconfig.json
• Fixes issues and formatting errors with Prettier
• Check for accessibility rules on JSX elements.

Local / Per Project Install

1. If you don't already have a package.json file, create one with npm init.

2. Then we need to install the config:

npm i -D @hyperse/eslint-config-hyperse

1. Create a eslint.config.js file in the root of your project's directory (it should live where package.json does). Your eslint.config.js file should look like this:
2. if you are using commonjs, just change eslint.config.js to eslint.config.mjs
3. Extends your config with the minimal base of @hyperse config :

import { base, defineConfig } from '@hyperse/eslint-config-hyperse';

export default defineConfig([
  // ...typescript
  ...base,
  {
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
]);

Extends tsconfig.json

you can write you tsconfig.json via extends @hyperse/eslint-config-hyperse/tsconfig.base.json

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "@hyperse/eslint-config-hyperse/tsconfig.base.json",
  "compilerOptions": {
    "baseUrl": "./",
    "rootDir": ".",
    "outDir": "dist",
    "types": ["vitest/globals"],
    "paths": {}
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

write you tsconfig.build.json as below

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src",
    "baseUrl": "./",
    "incremental": false,
    "paths": {}
  },
  "exclude": ["**/*.stories.tsx", "**/*.stories.mdx", ".storybook/**", "dist"]
}

Scripts

You can add two scripts to your package.json to lint and/or fix your code:

{
  "scripts": {
    "lint": "tsc --noEmit && eslint .",
    "lint:fix": "npm run lint -- --fix"
  }
}

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "npm run lint -- --fix"
  }
}

If you use Next.js

You can also add additional rules for Next.js

import { defineConfig, nextjs } from '@hyperse/eslint-config-hyperse';

export default defineConfig([
  // ...typescript
  ...nextjs,
  {
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
]);

If you use React.js

You can also add additional rules for only React.js ecosystem (without Next.js).

import { defineConfig, reactjs } from '@hyperse/eslint-config-hyperse';

export default defineConfig([
  // ...typescript
  ...reactjs,
  {
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
]);

If you use VS Code

Once you have done. You probably want your editor to lint and fix for you.

1. Install the ESLint package
2. Now we need to setup some VS Code settings. Create a .vscode folder at your root project, and create a settings.json file in this folder. Then, add this little config:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "never"
  },
  "[jsonc]": {
    "editor.formatOnSave": false
  },
  "[json]": {
    "editor.formatOnSave": false
  }
}

Notes

we need to disable vscode editor language formatter for json, jsonc

{
  "[jsonc]": {
    "editor.formatOnSave": false
  },
  "[json]": {
    "editor.formatOnSave": false
  }
}

1. Isolated Modules - isolatedModules (default:true)
2. Verbatim Module Syntax - verbatimModuleSyntax (default:true)

References

• If you want to customize the prettier config, you may need to configure as below

import {
  defineConfig,
  getPrettierConfig,
  reactjs,
} from '@hyperse/eslint-config-hyperse';

export default defineConfig([
  ...reactjs,
  {
    rules: {
      'prettier/prettier': [
        'error',
        { ...getPrettierConfig(), printWidth: 120 },
      ],
    },
  },
]);

• If you want to extends tailwindcss rules, you may need to configure as below

import { base, defineConfig } from '@hyperse/eslint-config-hyperse';

export default defineConfig([
  // ...typescript
  ...base,
  {
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
      'tailwindcss/classnames-order': 'warn',
      'tailwindcss/enforces-negative-arbitrary-values': 'warn',
      'tailwindcss/enforces-shorthand': 'warn',
      'tailwindcss/migration-from-tailwind-2': 'warn',
      'tailwindcss/no-arbitrary-value': 'off',
      'tailwindcss/no-custom-classname': 'warn',
      'tailwindcss/no-contradicting-classname': 'error',
    },
  },
]);