@jcamp/eslint-config

This is my personal ESLint Config.

It extends @antfu's eslint-config.

It starts with his vue config and makes these changes:

• Uses only the vue config, omitting react
• Adds my Prettier config
• Adds the official TailwindCSS Prettier plugin
• Disables the antfu/if-newline rule as it will clash with Prettier
• Follows Prettier's recommended configuration with ESLint:
  • It only integrates the eslint-config-prettier to disable conflicting rules
  • It does not integrate the eslint-plugin-prettier to show the Prettier rules as ESLint warnings.

Usage

Install

pnpm add -D eslint prettier @jcamp/eslint-config

Config eslint.config.js

import config from '@jcamp/eslint-config'

export default config

.eslintignore is no longer supported by eslint flatconfig.

config.push({
  ignores: ['temp.js', '**/vendor/*.js'],
})

Config .prettierrc.js

import baseConfig from '@jcamp/eslint-config/prettier'

export default {
  ...baseConfig,
  /* make any changes here */
  singleAttributePerLine: false,
}

Add script for package.json

For example:

{
  "scripts": {
    "lint": "eslint .",
    "fix": "eslint . --fix",
    "format": "prettier . --check",
    "clean": "prettier . --write"
  }
}

Config VS Code auto fix

Create .vscode/settings.json

{
  "prettier.enable": true,
  // Enable the ESlint flat config support
  "eslint.experimental.useFlatConfig": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  }
}

License

MIT License © 2023-PRESENT John Campion