@hellolin/eslint-config

Opinionated personal ESLint config for frontend developers.

• Compose with your config easily with the help of ESLint flat config.
• React, Next.js, UnoCSS and Storybook support by plugins.
• Format your source code comfortably using ESLint Stylistic and eslint-plugin-format.
• Best practices included, simple usage for everyone.

Usage

To use the config, make sure you have installed ESLint first:

pnpm install -D eslint @hellolin/eslint-config

Create a eslint.config.js (or .ts) in your project root:

import defineConfig from '@hellolin/eslint-config';

export default defineConfig();

Customization

You can pass your options to the defineConfig factory.

import defineConfig from '@hellolin/eslint-config';

export default defineConfig({
  javascript: {
    sourceType: 'module',
    env: {
      browser: true,
    },
  },
  typescript: true,
  markdown: {
    type: 'commonmark',
  },
  react: {
    checkNonJSXFiles: true,
    additionalHooks: ['useAbortableEffect'],
    next: true,
    reactCompiler: true,
  },
  unocss: true,
  storybook: true,
});

By default, the most commonly used parts (JavaScript, TypeScript, Markdown, JSON, YAML, ...) are included in the main package @hellolin/eslint-config.

If you want to use Node.js, React, Storybook or UnoCSS features (i.e. enable the corresponding config item), you need to install additional plugins:

pnpm install -D @hellolin-eslint/react-config
pnpm install -D @hellolin-eslint/unocss-config

Or you can run the lint command once, and the CLI will prompt you to install the required but missing dependencies automatically.

Editor support

VSCode

To integrate with VSCode, install ESLint extension, then add the following settings to .vscode/settings.json:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off", "fixable": true },
    { "rule": "format/*", "severity": "off", "fixable": true },
    { "rule": "*-indent", "severity": "off", "fixable": true },
    { "rule": "*-spacing", "severity": "off", "fixable": true },
    { "rule": "*-spaces", "severity": "off", "fixable": true },
    { "rule": "*-order", "severity": "off", "fixable": true },
    { "rule": "*-dangle", "severity": "off", "fixable": true },
    { "rule": "*-newline", "severity": "off", "fixable": true },
    { "rule": "*quotes", "severity": "off", "fixable": true },
    { "rule": "*semi", "severity": "off", "fixable": true }
  ],
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "gql",
    "graphql",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ]
}

Acknowledgements

This project is inspired by @antfu/eslint-config and eslint-config-sukka.

License

Release under the MIT License.

Copyright © 2025 hellolin. All rights reserved.