@qingshaner/eslint-config v0.13.1

ESLint Config

A collection of ESLint configurations for different types of projects.

To use this configuration, it's highly recommended to include Biome as part of your linter tool for optimal results.

📦 Installation

npm install --save-dev @qingshaner/eslint-config

🚀 Usage

// eslint.config.mjs

import { resolve } from 'node:path'

import { presetESLintConfig } from '@qingshaner/eslint-config'

const ROOT = import.meta.dirname // this require Node.js 20+

// Node.js < 20
// const ROOT = new URL('.', import.meta.url).pathname

export default presetESLintConfig({
  a11y: true,
  biome: true,
  cspell: { configFile: resolve(ROOT, 'cspell.yaml') }, // optional
  ignores: [resolve(ROOT, '.gitignore')],
  jsonc: true,
  perfectionist: true,
  prettier: true,
  typescript: [ROOT],
  vue: true
})

Also provide a optional Biome configuration.

// biome.json

{
  "$schema": "node_modules/@biomejs/biome/configuration_schema.json",
  "extends": ["@qingshaner/eslint-config/biome"],
  "files": {
    "ignoreUnknown": true
  },
  "javascript": {
    "jsxRuntime": "transparent"
  }
}

You can import a cspell configuration file.

// cspell.yaml

# yaml-language-server: $schema=https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json

import:
  - '@qingshaner/eslint-config/cspell'

🧩 Builtin Plugins

A11y

Include plugins

• eslint-plugin-jsx-a11y
• eslint-plugin-vuejs-accessibility

Biome

Disable Biome has implemented rules.

react-plugin-refresh, react-plugin-react-hooks is replaced by Biome.

JavaScript, TypeScript, CSS is formatted by Biome.

CSpell

@cspell/eslint-plugin is used to check spelling errors.

JSON or JSONC

antfu/sort/package-json is used to sort package.json. antfu/sort/tsconfig-json is used to sort *.tsconfig.json.

Include plugins

• eslint-plugin-jsonc

Perfectionist

Sort import statements, sort object properties.

Include plugins

• eslint-plugin-perfectionist

Prettier

Format code with Prettier, if the file can't be formatted by Biome, it will be formatted by Prettier.

Include plugins

• eslint-plugin-prettier

React

For React project.

Include plugins

• eslint-plugin-react

TypeScript

For TypeScript project.

Include plugins

• typescript-eslint

UnoCSS

Include plugins

• @unocss/eslint-plugin

Vue

For Vue2 | Vue3 project.

Include plugins

• eslint-plugin-vue
• typescript-eslint
• vue-eslint-parser

✨ Inspiration

• @antfu/eslint-config

📄 License

MIT License © 2023-Present qingshaner