# Editor Setup

## VS Code CSS Variable Autocomplete

package는 VS Code CSS variable autocomplete 확장이 읽을 수 있는 foundation token index를 함께 배포합니다.

```text
node_modules/@orioncactuscorp/ui/dist/vscode/oc-ui-vars.css
```

consumer repository에서 `phoenisx.cssvar` 확장을 사용할 경우 `.vscode/settings.json`에 아래 설정을 추가합니다.

```json
{
  "editor.quickSuggestions": {
    "other": "on",
    "comments": "off",
    "strings": "off"
  },
  "editor.suggestOnTriggerCharacters": true,
  "editor.inlineSuggest.suppressSuggestions": false,
  "cssvar.files": [
    "./node_modules/@orioncactuscorp/ui/dist/vscode/oc-ui-vars.css"
  ],
  "cssvar.ignore": [],
  "cssvar.extensions": ["css", "scss", "sass", "js", "jsx", "ts", "tsx"]
}
```

기존 `cssvar.files`가 있다면 덮어쓰지 말고 위 경로를 추가합니다. 단, oc-ui token 자동완성용으로 `@orioncactuscorp/ui/scss/foundations/*` source file을 fallback처럼 함께 추가하지 않습니다. `color.theme.light.scss`와 `color.theme.dark.scss`는 같은 `--oc-color-theme-*` semantic token 이름을 theme별 값으로 다시 선언하므로, raw source file을 같이 읽으면 completion 후보가 중복됩니다.

`phoenisx.cssvar`의 기본 `cssvar.ignore`는 `**/node_modules/**`를 제외하므로, node_modules 안의 oc-ui index를 읽으려면 `cssvar.ignore`에서 해당 제외를 제거해야 합니다. 위 예시는 oc-ui index만 명시적으로 읽는 설정이므로 빈 배열을 사용합니다.

`phoenisx.cssvar`는 빈 CSS value 위치에서 전체 token 목록을 먼저 띄우지 않습니다. `padding: --`처럼 CSS variable 이름을 직접 입력하거나 `padding: var(--`처럼 `var()` 안에서 `--`를 입력하면 oc-ui token completion이 표시됩니다.

VS Code Insiders 또는 Copilot inline suggestion이 켜진 환경에서 token이 회색 inline suggestion으로만 보이고 completion popup이 열리지 않으면, 위 예시처럼 `editor.quickSuggestions`, `editor.suggestOnTriggerCharacters`, `editor.inlineSuggest.suppressSuggestions`를 함께 설정합니다.

이 파일은 `foundations.css`에서 생성되므로 설치된 `@orioncactuscorp/ui` package 버전의 `--oc-*` foundation token과 자동완성 목록이 함께 움직입니다. 자동완성 전용 index이므로 runtime stylesheet로 import하지 않습니다.

## oc-ui source repository에서의 설정

oc-ui source repository에서도 `.vscode/settings.json`은 `packages/ui/dist/vscode/oc-ui-vars.css`를 읽습니다. 이 index는 `foundations.css`에서 token 이름만 dedupe해 생성한 자동완성 전용 파일입니다. source checkout에서는 extension의 default CSS scan이나 이전 cache가 compiled CSS를 다시 읽지 않도록 `packages/ui/dist/styles.css`, `packages/ui/dist/foundations.css`, `packages/ui/dist/foundations/**`, `packages/ui/src/scss/foundations/**`를 `cssvar.ignore`에 둡니다. source checkout에서 index 파일이 없다면 `bun run --cwd packages/ui build:css`를 먼저 실행합니다.