@leedomjs/eslint-config

Inspired by @antfu/eslint-config

• Support Vue 2 & 3
• Single quotes, no semi
• Auto fix for formatting
• Also lint for TypeScript, json
• Order tailwindcss classnames
• Only one-line of config

Usage

Install

pnpm add -D eslint @leedomjs/eslint-config

Config .eslintrc

{
  "extends": "@leedomjs"
}

Add scripts for package.json

For example:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

VS Code support (auto fix)

Install VS Code ESLint extension

Add the following settings to your settings.json:

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

  // The following is optional.
  // It's better to put under project setting `.vscode/settings.json`
  // to avoid conflicts with working with different eslint configs.
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "vue-html",
    "jsx",
    "json",
    "jsonc",
    "json5",
    "markdown",
    "yaml"
  ]
}

Lint and auto-fix before every commit

If you want to apply lint and auto-fix before every commit, you could do this:

1. husky + lint-staged

pnpm dlx husky-init && pnpm install -D husky lint-staged

and add the following to your package.json:

{
  "scripts": {
    // This script will be added automatically when husky is installed successfully.
    "prepare": "husky install"
  },
  "lint-staged": {
    "*": "eslint --fix"
  }
}

then add the following to your pre-commit:

.husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# remove the default script
# npx test

# add this script
npx lint-staged

2. simple-git-hooks + lint-staged

If your project is small-sized, and you need quickly set up hooks and forget about it, simple-git-hook will be a good choice.

pnpm install -D simple-git-hooks lint-staged

and add the following to your package.json:

{
  "simple-git-hooks": {
    "pre-commit": "npx lint-staged"
  },
  "lint-staged": {
    "*": "eslint . --fix"
  }
}

then run the CLI script to update the git hooks with the commands from the config:

# [Optional] These 2 steps can be skipped for non-husky users
git config core.hooksPath .git/hooks/
rm -rf .git/hooks

# Update ./git/hooks
npx simple-git-hooks

Tips

You can override the rules in your .eslintrc file.

{
  "extends": "@leedomjs",
  "rules": {
    // your rules...
  }
}

No framework used, just for javascript, you can also use the package @leedomjs/eslint-config-basic

// .eslintrc
{
  "extends": "@leedomjs/eslint-config-basic"
}

If you are using tailwindcss , you can also add the package @leedomjs/eslint-config-tailwindcss which depend on eslint-plugin-tailwindcss , so you don't need to add prettier-plugin-tailwindcss and prettier extra.

// .eslintrc
{
  "extends": [
    "@leedomjs/eslint-config-tailwindcss",
    ...
  ]
}

License

MIT License © 2023-present Leedom