ultracite

울트라사이트

Ultracite는 Biome을 기반으로 구축된 최신 TypeScript 앱을 위한 강력한 Linting 구성입니다. 이는 믿을 수 없을 만큼 독선적이고 엄격하며, 최대한의 유형 안전성과 코드 품질을 시행합니다. Ultracite가 설정되면 저장 시 자동으로 코드를 린트하고 수정하고 형식을 지정합니다.

설치

Ultracite를 설치하려면 아래 명령을 실행하세요.

pnpm add -D --save-exact ultracite @biomejs/biome

VS Code를 실행하는 경우 다음 확장이 설치되어 있는지 확인하세요.

code --install-extension biomejs.biome
code --install-extension bradlc.vscode-tailwindcss

설정

다음 내용으로 biome.json 을 만듭니다.

{ "extends" : [ " ultracite " ] }

Ultracite는 VS Code와 함께 사용하도록 설계되었습니다. 전체 서식 지정 및 저장 시 수정을 활성화하려면 다음 내용으로 .vscode/settings.json 파일을 만듭니다.

{
  "typescript.tsdk" : " node_modules/typescript/lib " ,
  "editor.defaultFormatter" : " biomejs.biome " ,
  "editor.formatOnSave" : true ,
  "editor.formatOnPaste" : true ,
  "emmet.showExpandedAbbreviation" : " never " ,
  "editor.codeActionsOnSave" : {
    "quickfix.biome" : " explicit " ,
    "source.organizeImports.biome" : " explicit "
  },
  "[typescript]" : {
    "editor.defaultFormatter" : " biomejs.biome "
  },
  "[json]" : {
    "editor.defaultFormatter" : " biomejs.biome "
  },
  "[javascript]" : {
    "editor.defaultFormatter" : " biomejs.biome "
  },
  "[jsonc]" : {
    "editor.defaultFormatter" : " biomejs.biome "
  },
  "[typescriptreact]" : {
    "editor.defaultFormatter" : " biomejs.biome "
  }
}

마지막으로 tsconfig.json (존재하는 경우)에 새 ESLint 구성이 포함되어 있고 strictNullChecks 활성화되어 있는지 확인하세요.

{
  "compilerOptions" : {
    "strictNullChecks" : true
  }
}

용법

Ultracite는 저장 시 코드를 자동으로 보푸라기, 수정 및 형식화합니다. Ultracite를 수동으로 실행하려면 다음 명령을 사용하면 됩니다:

npx ultracite

구성

Ultracite는 구성이 필요 없도록 설계되었지만 biome.json 파일에서 원하는 대로 수정할 수 있습니다. 예를 들어 noAutofocus 규칙을 활성화하려면 다음을 수행하면 됩니다.

{
  "extends" : [ " ultracite " ],
  "linter" : {
    "rules" : {
      "a11y" : {
        "noAutofocus" : " off "
      }
    }
  }
}

줄 끝에 설명을 추가하여 줄별로 규칙을 비활성화할 수도 있습니다.

 // biome-ignore lint/security/noDangerouslySetInnerHtml: I do what I want mate.
< div dangerouslySetInnerHTML = { { ... } } / > 

메모

Ultracite는 이전에 ESLint, Prettier 및 Stylelint를 기반으로 구축되었습니다. 해당 스택을 사용하려면 다음 명령을 사용하여 호환되는 Ultracite 버전을 설치할 수 있습니다.

pnpm add -D ultracite@3 eslint@8 prettier stylelint typescript jest