@ycs77/eslint-config NPM

@ycs77/eslint-config

Extended from @antfu/eslint-config

Single quotes, no semi
Auto fix for formatting (aimed to be used standalone without Prettier)
Sorted imports, dangling commas
Reasonable defaults, best practices, only one line of config
Designed to work with TypeScript, JSX, Vue out-of-box
Lints also for json, yaml, toml, markdown
Opinionated, but very customizable
ESLint Flat config, compose easily!
Using ESLint Stylistic
Respects .gitignore by default
Optional React, Svelte, UnoCSS support
Optional formatters support for CSS, HTML, etc.
Style principle: Minimal for reading, stable for diff, consistent

Usage

Install

yarn add eslint @ycs77/eslint-config -D

Create config file

With "type": "module" in package.json (recommended):

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

export default ycs77()

With CJS:

// eslint.config.js
const ycs77 = require('@ycs77/eslint-config').default

module.exports = ycs77()

!TIP ESLint only detects eslint.config.js as the flat config entry, meaning you need to put type: module in your package.json or you have to use CJS in eslint.config.js. If you want explicit extension like .mjs or .cjs, or even eslint.config.ts, you can install eslint-ts-patch to fix it.

Combined with legacy config:

// eslint.config.js
const ycs77 = require('@ycs77/eslint-config').default
const { FlatCompat } = require('@eslint/eslintrc')

const compat = new FlatCompat()

module.exports = ycs77(
  {
    ignores: [],
  },

  // Legacy config
  ...compat.config({
    extends: [
      'eslint:recommended',
      // Other extends...
    ],
  })

  // Other flat configs...
)

Note that .eslintignore no longer works in Flat config, see customization for more details.

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:

{
  // Enable the ESlint flat config support
  "eslint.experimental.useFlatConfig": true,

  // 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" },
    { "rule": "format/*", "severity": "off" },
    { "rule": "*-indent", "severity": "off" },
    { "rule": "*-spacing", "severity": "off" },
    { "rule": "*-spaces", "severity": "off" },
    { "rule": "*-order", "severity": "off" },
    { "rule": "*-dangle", "severity": "off" },
    { "rule": "*-newline", "severity": "off" },
    { "rule": "*quotes", "severity": "off" },
    { "rule": "*semi", "severity": "off" }
  ],

  // 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.