@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 SonarJS
  • 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 SonarJS

You can also add additional rules for SonarJS.

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

export default defineConfig([
  // ...typescript
  ...sonarjs,
  {
    rules: {
      'sonarjs/fixme-tag': 'warn',
      'sonarjs/todo-tag': 'warn',
    },
  },
]);

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
  },
  "eslint.workingDirectories": [
    "./apps/docs",
    "./apps/web",
    "./packages/core",
    "./packages/utils"
  ],
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.classFunctions": ["tw", "clsx", "twMerge", "extendVariants"],
  "tailwindCSS.classAttributes": ["className", "classNames"],
  "tailwindCSS.experimental.configFile": {
    "apps/web/src/app/globals.css": "apps/web/src/**",
    "apps/docs/src/app/globals.css": "apps/docs/src/**"
  }
}

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

/**
 * prettier.config.mjs
 * @see https://prettier.io/docs/configuration
 * @type {import("prettier").Config}
 */
const config = {
  ....
};

export default config;

• The default options has high priority as below

{
  // use single quotes instead of double quotes
  "singleQuote": true,
  // add semicolons at the end of statements
  "semi": true,
  // add trailing commas where valid in ES5 (objects, arrays, etc.)
  "trailingComma": "es5",
  // maintain the line endings of the file
  "endOfLine": "auto"
}

• If you want to extends tailwindcss rules, recommended configurations as below

/**
 * prettier.config.mjs
 * @see https://prettier.io/docs/configuration
 * @type {import("prettier").Config}
 */
const config = {
  /**
   * Path to the CSS stylesheet used by Tailwind CSS (v4+)
   */
  tailwindStylesheet: './src/app/globals.css',
  /**
   * List of custom function and tag names that contain classes.
   */
  tailwindFunctions: ['tw', 'clsx', 'twMerge', 'extendVariants'],
  /**
   * List of custom attributes that contain classes.
   */
  tailwindAttributes: ['className', 'classNames'],
};

export default config;

Sorting classes in function calls support

tailwindFunctions: ['tw', 'clsx','twMerge'],

The react eslint rules can be found here

https://github.com/hyperse-io/eslint-config-hyperse/blob/1e23efbfb64f4e5a8b0c6387d187b7f6341f1e61/src/rules/react.ts