@jcamp/eslint-config

@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

Note v2.0.0 is a breaking change, requires adjusting your setup.

For more eslint config details, see @antfu/eslint-config

Install

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

Config eslint.config.js

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

export default jcamp(
  // antfu options
  {},
  // additional rules to add
  {},
  // ignores
  {
    ignores: ['temp.js', '**/vendor/*.js'],
  }
)

.eslintignore is no longer supported by eslint flatconfig.

Config .prettierrc.js

import { jcPrettier } from '@jcamp/eslint-config'

export default {
  ...jcPrettier,
  /* 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": "explicit",
    "source.organizeImports": "never"
  }
}

License

MIT License © 2023-PRESENT John Campion