---
title: "Editor & CI Integration"
description: "VS Code, Neovim, editor-specific disables, and pre-commit hooks via lint-staged."
---

> Documentation Index
> Fetch the complete documentation index at: https://code-style.pages.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor & CI Integration

## VS Code

Install the [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and add the following to `.vscode/settings.json`:

```jsonc title=".vscode/settings.json"
{
  // Let ESLint handle formatting; disable Prettier and formatOnSave
  "prettier.enable": false,
  "editor.formatOnSave": false,

  // Fix on save
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // Silence stylistic rules in the Problems panel but still auto-fix them
  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off", "fixable": true },
    { "rule": "format/*", "severity": "off", "fixable": true },
    { "rule": "*-indent", "severity": "off", "fixable": true },
    { "rule": "*-spacing", "severity": "off", "fixable": true },
    { "rule": "*-spaces", "severity": "off", "fixable": true },
    { "rule": "*-order", "severity": "off", "fixable": true },
    { "rule": "*-dangle", "severity": "off", "fixable": true },
    { "rule": "*-newline", "severity": "off", "fixable": true },
    { "rule": "*quotes", "severity": "off", "fixable": true },
    { "rule": "*semi", "severity": "off", "fixable": true }
  ],

  // Run ESLint on every supported language
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "svelte",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ]
}
```

The `rules.customizations` block is the key insight: stylistic rules stay **fixable** (so save still reformats) but don't clutter the Problems panel with squiggles you don't care about.

## Neovim

A few ways to get format-on-save in Neovim:

### `nvim-lspconfig`

Use the built-in `EslintFixAll` command and trigger it on `BufWritePre`:

```lua
lspconfig.eslint.setup({
  on_attach = function(client, bufnr)
    vim.api.nvim_create_autocmd('BufWritePre', {
      buffer = bufnr,
      command = 'EslintFixAll',
    })
  end,
})
```

### Alternatives

- [`conform.nvim`](https://github.com/stevearc/conform.nvim) — formatter runner with ESLint as a `formatter`
- [`none-ls.nvim`](https://github.com/nvimtools/none-ls.nvim) — exposes ESLint through the null-ls protocol
- [`nvim-lint`](https://github.com/mfussenegger/nvim-lint) — lightweight linter runner

## Editor Specific Disables

When ESLint runs inside a code editor, a handful of rules report as **non-fixable** so your editor doesn't aggressively rewrite code you're still typing:

- [`prefer-const`](https://eslint.org/docs/rules/prefer-const)
- [`test/no-only-tests`](https://github.com/levibuzolic/eslint-plugin-no-only-tests)
- [`unused-imports/no-unused-imports`](https://www.npmjs.com/package/eslint-plugin-unused-imports)
- `pnpm/json-enforce-catalog`, `pnpm/json-prefer-workspace-settings`, `pnpm/json-valid-catalog`

These rules still **report** in your editor, they just don't auto-fix. When you run `eslint` in the terminal or through [Lint Staged](#lint-staged), they behave normally.

Motivation: an unused import you just pasted shouldn't vanish the moment your editor auto-saves. If you'd rather have uniform behaviour across editor and CLI, opt out:

```ts title="eslint.config.ts"
import pleaseai from '@pleaseai/eslint-config'

export default pleaseai({
  isInEditor: false,
})
```

## Lint Staged

Run ESLint on changed files as a pre-commit hook so bad code never reaches `main`:

```json title="package.json"
{
  "simple-git-hooks": {
    "pre-commit": "bun lint-staged"
  },
  "lint-staged": {
    "*": "eslint --fix"
  }
}
```

```bash
bun add -D lint-staged simple-git-hooks
bunx simple-git-hooks
```

```bash
pnpm add -D lint-staged simple-git-hooks
pnpm exec simple-git-hooks
```

```bash
npm install -D lint-staged simple-git-hooks
npx simple-git-hooks
```

The second command wires the hook into your `.git/hooks` directory — you only need to run it once per clone.

Source: https://code-style.pages.dev/en/eslint-config/editor/index.mdx