• Usage
  • Installation
    • pnpm
    • yarn
    • npm
  • Setup
  • VSCode Support
• Features
  • Ignoring Files
  • React and Vue

Usage

Installation

pnpm

pnpm add -D @lqbach/eslint-config eslint

yarn

yarn add -D @lqbach/eslint-config eslint

npm

npm install -D @lqbach/eslint-config eslint

Setup

This configuration file uses the new flat ESLint Configuration. Setting this up can be as seamless as one line of code.

// eslint.config.js
import eslintConfig from "@lqbach/eslint-config"

export default eslintConfig()

[!WARNING]
ESLint flat configs don't really support .eslintignore files anymore. To ignore files, you should use the new global ignores that can be easily configured with this config library See ignoring files below.

VSCode Support

Visual Studio Code has an ESLint extension (or search dbaeumer.vscode-eslint in the Extension Marketplace search bar) that supports rich editing features. This will help lint file saves and provide linting documentation in the code. The following should be added to .vscode/settings.json at the root of your project:

{
  // Include the below if using Prettier
  //   "editor.formatOnSave": true,

  // Tell the ESLint plugin to run on save
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // To enable proper ESLint behavior with flat configurations
  "eslint.experimental.useFlatConfig": true
}

Features

Ignoring Files

You can ignore files by using the ignores parameter which accepts an array of strings. Reference the ignore patterns from the ESLint documentation for proper glob syntax.

// eslint.config.js
import eslintConfig from "@lqbach/eslint-config"

export default eslintConfig({
  ignores: ["./sanity", "./public/*.js"],
})

The above will ignore the sanity folder and all JavaScript files in the public folder.

React and Vue

If you are writing with React or Vue, you will need to toggle them on. Both vue and react parameters default to false until set by the user.

// eslint.config.js
import eslintConfig from "@lqbach/eslint-config"

export default eslintConfig({
  vue: true, // defaults to false

  // uncomment below and comment above to use react
  // react: true,
})