---
title: "에디터 & CI 통합"
description: "VS Code, Neovim, 에디터 전용 비활성화, lint-staged를 통한 pre-commit 훅."
---

> 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.

# 에디터 & CI 통합

## VS Code

[VS Code ESLint 확장](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)을 설치하고 `.vscode/settings.json`에 다음을 추가하세요:

```jsonc title=".vscode/settings.json"
{
  // ESLint가 포매팅을 담당하도록 Prettier와 formatOnSave 비활성화
  "prettier.enable": false,
  "editor.formatOnSave": false,

  // 저장 시 자동 수정
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // Problems 패널에서 스타일 규칙은 조용히 하되 여전히 자동 수정
  "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 }
  ],

  // 지원하는 모든 언어에서 ESLint 실행
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "svelte",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ]
}
```

`rules.customizations` 블록이 핵심 포인트입니다: 스타일 규칙은 **수정 가능**한 상태를 유지하므로 저장 시 여전히 재포매팅되지만, 관심 없는 경고로 Problems 패널을 어지럽히지 않습니다.

## Neovim

Neovim에서 저장 시 포맷팅을 받는 몇 가지 방법:

### `nvim-lspconfig`

내장 `EslintFixAll` 명령을 `BufWritePre`에서 트리거하세요:

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

### 대안

- [`conform.nvim`](https://github.com/stevearc/conform.nvim) — ESLint를 `formatter`로 사용하는 포매터 러너
- [`none-ls.nvim`](https://github.com/nvimtools/none-ls.nvim) — null-ls 프로토콜을 통해 ESLint 노출
- [`nvim-lint`](https://github.com/mfussenegger/nvim-lint) — 가벼운 린터 러너

## 에디터 전용 비활성화

ESLint가 코드 에디터 안에서 실행될 때, 일부 규칙은 에디터가 작성 중인 코드를 공격적으로 다시 쓰지 않도록 **수정 불가(non-fixable)** 로 리포트됩니다:

- [`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`

이 규칙들은 에디터에서 여전히 **리포트**되지만 자동 수정되지 않습니다. 터미널에서 `eslint`를 실행하거나 [Lint Staged](#lint-staged)를 통해 실행될 때는 정상적으로 동작합니다.

동기: 방금 붙여넣은 미사용 import가 에디터 자동 저장 순간 사라져서는 안 됩니다. 에디터와 CLI에서 동일한 동작을 원한다면 opt-out 할 수 있습니다:

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

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

## Lint Staged

변경된 파일에 pre-commit 훅으로 ESLint를 실행해서 잘못된 코드가 `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
```

두 번째 명령이 `.git/hooks` 디렉토리에 훅을 연결합니다 — 클론당 한 번만 실행하면 됩니다.

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