@ycs77/eslint-config NPM

@ycs77/eslint-config

Extended from @antfu/eslint-config

Auto fix for formatting (aimed to be used standalone without Prettier)
Reasonable defaults, best practices, only one line of config
Designed to work with TypeScript, JSX, Vue, JSON, YAML, Toml, Markdown, etc. Out-of-box.
Opinionated, but very customizable
ESLint Flat config, compose easily!
Optional React, Svelte, UnoCSS, Astro, Solid support
Optional formatters support for formatting CSS, HTML, XML, etc.
Style principle: Minimal for reading, stable for diff, consistent
- Sorted imports, dangling commas
- Single quotes, no semi
- Using ESLint Stylistic
Respects .gitignore by default
Requires ESLint v9.5.0+

Usage

Install

yarn add eslint @ycs77/eslint-config -D

Create config file

Create eslint.config.js in your project root:

// eslint.config.js
import ycs77 from '@ycs77/eslint-config'

export default ycs77()

Add script for package.json

For example:

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

VS Code support (auto fix)

Install VS Code ESLint extension

Add the following settings to your .vscode/settings.json:

{
  // Disable the default formatter, use eslint instead
  "prettier.enable": false,
  "editor.formatOnSave": false,

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

  // Silent the stylistic rules in you IDE, but still auto fix them
  "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 }
  ],

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml"
  ]
}

Customization

Since v1.0, we migrated to ESLint Flat config. It provides much better organization and composition.

Normally you only need to import the ycs77 preset:

// eslint.config.js
import ycs77 from '@ycs77/eslint-config'

export default ycs77()

And that's it! Or you can configure each integration individually, for example:

// eslint.config.js
import ycs77 from '@ycs77/eslint-config'

export default ycs77({
  // Enable stylistic formatting rules
  // stylistic: true,

  // Or customize the stylistic rules
  stylistic: {
    indent: 2, // 4, or 'tab'
    quotes: 'single', // or 'double'
  },

  // TypeScript and Vue are auto-detected, you can also explicitly enable them:
  typescript: true,
  vue: true,

  // Disable jsonc and yaml support
  jsonc: false,
  yaml: false,

  // `.eslintignore` is no longer supported in Flat config, use `ignores` instead
  ignores: [
    './fixtures',
    // ...globs
  ],
})

The ycs77 factory function also accepts any number of arbitrary custom config overrides:

// eslint.config.js
import ycs77 from '@ycs77/eslint-config'

export default ycs77(
  {
    // Configures for ycs77's config
  },

  // From the second arguments they are ESLint Flat Configs
  // you can have multiple configs
  {
    files: ['**/*.ts'],
    rules: {},
  },
  {
    rules: {},
  },
)

More advanced you can see the @antfu/eslint-config's customization for more details.