@ririd/eslint-config

@ririd/eslint-config

Riri's ESLint config presets

[!IMPORTANT] This project is heavily based on antfu/eslint-config, with a certain degree of customization and more rules regarding React.

Since v1.0.0, this config is rewritten to the new ESLint Flat config.

Usage

Install

pnpm i -D eslint @ririd/eslint-config

Create config file

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

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

export default ririd()

With CJS:

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

module.exports = ririd()

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

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

Normally you only need to import the ririd preset:

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

export default ririd()

Or you can configure each integration individually, for example:

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

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

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

  typescript: true,
  vue: true,

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

  // enable nextjs-plugin
  next: true,

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

For more advanced usage, see @antfu/eslint-config.

License

MIT License © 2023-PRESENT Riri