@kouts/eslint-config

@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