@paro-paro/eslint-config

ESLint config preset for JavaScript, TypeScript, JSX, TSX, Vue, JSON, Yaml, Markdown, JSDoc and more.

Credit: sxzz & antfu

Features

• One line setup! :rocket:

• ESLint for both linting and formatting :wrench:

• Flat config. No prettier :sunglasses:

• Fully customizable. Easily composable :ok_hand:

• Vue auto-detection :sparkles:

• First class TypeScript support :heart:

• Strict, although reasonable, out-of-the-box preset :muscle:

• Powered by @stylistic and more :point_down:

Install

Use your favorite package manager.

pnpm add -D @paro-paro/eslint-config

Requires eslint >= 8.21.0

Usage

eslint.config.js

import { paroparo } from '@paro-paro/eslint-config'

export default paroparo()

And that's it!

Note: This setup assumes that you are using ESM in your project.

Even though is highly discouraged, you can use CommonJS as well.

const { paroparo } = require('@paro-paro/eslint-config')

module.exports = paroparo()

Note: ts/no-var-requires and ts/no-require-imports errors are thrown when using CommonJS syntax.

Configuration

Make sure you read the ESLint flat config documentation first.

import { paroparo } from '@paro-paro/eslint-config'

export default paroparo(
  {
    // configuration options (see below)
  },

  // extend or override the default configuration by passing any number of flat config objects!
  {
    files: ['**/*.ts'],
    rules: {
      'no-console': 'off',
    },
  },

  {
    files: ['**/*.vue'],
    rules: {
      'vue/component-name-in-template-casing': ['warn', 'kebab-case'],
    },
  },

  // ...
)

VS Code

Install VS Code ESLint extension and configure it to your liking.

{
  "prettier.enable": false,
  "eslint.experimental.useFlatConfig": true,
  "eslint.validate": ["typescript", "json"]
}

Editor auto-fixing: :boom:

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": false
  }
}

Editor customizations :boom:

{
  "eslint.rules.customizations": [
    {
      "rule": "stylistic/*",
      "severity": "off"
    },
    {
      "rule": "perfectionist/*",
      "severity": "info"
    }
  ]
}

Configuration Options

Types

function paroparo(options?: ConfigOptions, ...userConfigs: FlatESLintConfigItem[]): FlatESLintConfigItem[]

interface ConfigOptions {
  ts?: boolean
  vue?: boolean
  json?: boolean
  yml?: boolean
  markdown?: boolean
  jsdoc?: boolean
  stylistic?: boolean
  sort?: boolean
  globals?: boolean
  ignores?: IgnoresOptions | boolean
  gitignore?: GitIgnoreOptions | boolean
  tsOptions?: TsOptions
  stylisticOptions?: StylisticOptions
  renameRules?: boolean
}

Details

• Rules for ts and vue will be automatically enabled if related packages are locally installed.

• Rules for json, yml, markdown, jsdoc and stylistic are enabled by default.

• Use the appropiate option to explicitly enable or disable them.

• Use the sort option if you want to disable sort related rules.

• Use the globals option if you do not want to include the predefined set of globals.

• Use the ignores option if you need to disable, extend or override the predefined set of excluded globs.

• eslint-config-flat-gitignore package is supported through the gitignore option (disabled by default).

• To enable type aware linting use the tsOptions object. The preset does not include any of these rules by default. Check docs for details.

• Customize quotes, semi and indentation using the stylisticOptions object.

• Both tsOptions and stylisticOptions objects have no effect if ts or stylistic options are explicitly disabled.

Supported plugins

| Plugin | Rules's prefix | | --- | --- | | @stylistic/eslint-plugin | stylistic/* | | @typescript-eslint/eslint-plugin | ts/* | | eslint-config-flat-gitignore | - | | eslint-plugin-antfu | antfu/* | | eslint-plugin-eslint-comments | eslint-comments/* | | eslint-plugin-i | import/* | | eslint-plugin-jsdoc | jsdoc/* | | eslint-plugin-jsonc | jsonc/* | | eslint-plugin-markdown | - | | eslint-plugin-n | node/* | | eslint-plugin-perfectionist | perfectionist/* | | eslint-plugin-sort-exports | sort-exports/* | | eslint-plugin-unicorn | unicorn/* | | eslint-plugin-unused-imports | unused-imports/* | | eslint-plugin-vue | vue/* | | eslint-plugin-yml | yml/* |

Set renameRules to false in case you want to use @stylistic and @typescript-eslint instead.

This option does not apply to any other plugin.

Wiki

You can read more about the rationale behind not using prettier in this great post from Anthony Fu.

Also, there is a great utility package for debugging your ESLint flat config (Anthony, again :astonished:).

All credit to his outstanding and inspirational work.

Check also

• @paro-paro/dotfiles - My dotfiles.

• @paro-paro/vscode - My VS Code setup.

• @paro-paro/paro-paro-solarized-dark - My VS Code theme.

License

MIT License © 2023-PRESENT Antonio Parody