@kouts/eslint-config

Custom ESLint and Prettier config with Vue.js support and sensible defaults

[!NOTE]
Starting from v1, this ESLint config uses the ESLint Flat config and is only compatible with ESLint v9 or v8.50.0+.
If you're looking for the previous version, checkout the README here.

Installation

pnpm i -D @kouts/eslint-config eslint prettier

Usage

ESLint config

Add an eslint.config.js (or eslint.config.cjs if your project is CommonJS) that imports the config function:

import { config } from '@kouts/eslint-config'

export default [
  ...config(),
  {
    // Add custom rules here
  },
]

Customizing the config

The configuration comes with default settings that extend the neostandard config. You can further customize it by passing an object to the config function:

Config settings defaults:

| Option | Type | Description | Default | | ---------- | ---------- | ----------------------------- | ------- | | ts | boolean | Enable TypeScript support | true | | noJsx | boolean | No jsx rules will be added | true | | noStyle | boolean | No style rules will be added | true | | semi | boolean | Use semicolons | false | | vue | boolean | Enable Vue.js support | true | | vueVersion | 2 or 3 | Specify the version of Vue.js | 3 | | vitest | boolean | Enable Vitest support | true |

Example:

config({
  ts: false,
  vue: true
  vueVersion: 3,
  vitest: false,
})

Prettier config

Create a prettier.config.js file with the following content:

import prettierConfig from '@kouts/eslint-config/prettier'

export default prettierConfig

package.json scripts

Add the following ESLint commands to your .package-json for linting and autofixing:

{
  "lint": "eslint \"**/*.{vue,ts,js}\"",
  "lint-fix": "eslint --fix \"**/*.{vue,ts,js}\""
}

VS Code settings

Ad the following settings to your VS Code project settings for autofix on save:

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Features

• Based on neostandard
• Prettier for code formatting
• Plugins
  • eslint-plugin-html for linting inline scripts contained in HTML files
  • eslint-plugin-vue for linting Vue.js files
  • eslint-config-prettier for disabling all rules that conflict with Prettier
  • eslint-plugin-prettier for using Prettier as a code formatter with eslint --fix
  • eslint-plugin-simple-import-sort for auto-fixing imports order
  • eslint-plugin-import-x for auto-fixing import/export syntax, and prevent issues with misspelling of file paths and import names
  • eslint-plugin-vitest for linting Vitest test files

License

MIT