21kDiscord

Linters and Code Quality

Last updated March 20, 2026

Set up ESLint and Prettier for code quality

Linters and formatters help maintain code quality and consistency in your project.

ESLint - Code Quality

ESLint helps find and fix problems in your JavaScript code.

Installation

npm install --save-dev eslint
npx eslint --init

Follow the interactive setup to configure ESLint for your project.

Basic Configuration

Create .eslintrc.json:

{
  "env": {
    "node": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "warn",
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

Usage

Check your code:

npx eslint src/

Fix automatically:

npx eslint src/ --fix

Common Rules

  • no-console: Warn about console.log statements
  • no-unused-vars: Warn about unused variables
  • semi: Require semicolons
  • quotes: Enforce single or double quotes
  • indent: Enforce indentation style

Prettier - Code Formatting

Prettier automatically formats your code for consistency.

Installation

npm install --save-dev prettier

Basic Configuration

Create .prettierrc.json:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80
}

Usage

Format a file:

npx prettier --write src/index.js

Format all files:

npx prettier --write src/

Check formatting:

npx prettier --check src/

Setup Scripts in package.json

Add convenient scripts to your package.json:

{
  "scripts": {
    "lint": "eslint src/",
    "lint:fix": "eslint src/ --fix",
    "format": "prettier --write src/",
    "format:check": "prettier --check src/"
  }
}

Now you can run:

npm run lint          # Check for issues
npm run lint:fix      # Fix issues
npm run format        # Format code
npm run format:check  # Check formatting

Configure Git Hooks with Husky

Automatically run linters before committing:

npm install --save-dev husky
npx husky install
npx husky add .husky/pre-commit "npm run lint:fix && npm run format"

Now ESLint and Prettier run automatically before each commit.

Install additional plugins for more checks:

For Node.js

npm install --save-dev eslint-plugin-node

Update .eslintrc.json:

{
  "extends": ["eslint:recommended", "plugin:node/recommended"]
}

For Security

npm install --save-dev eslint-plugin-security

VS Code Integration

Install the ESLint and Prettier extensions in VS Code:

  • ESLint extension by Dirk Baeumer
  • Prettier - Code formatter by Prettier

Add to your .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Now code auto-formats on save.

Best Practices

  1. Start simple: Use recommended configurations first
  2. Be consistent: Apply same rules to all files
  3. Team agreement: Discuss rules with team members
  4. Document: Document any custom rules
  5. Gradual fixes: Don't fix all issues at once on large projects
  6. Pre-commit: Use hooks to prevent bad commits

Troubleshooting

ESLint Not Finding Files

npx eslint src/ --debug

Prettier Conflicts with ESLint

Install both compatible:

npm install --save-dev eslint-config-prettier

Update .eslintrc.json:

{
  "extends": ["eslint:recommended", "prettier"]
}

Git Hook Not Running

Ensure Husky is installed:

npx husky install

Next Steps

With linting configured, you're ready to start building your bot with confidence. Check out core concepts to learn more.