웹 프로젝트의 형식을 지정하고 린트하기 위한 툴체인 Biome.js

t3-env가 Linting 목적으로 Biomejs를 사용하는 것을 발견했습니다. 이 글은 Biomejs의 개요와 t3-env에서의 사용법을 제공합니다.

Biome.js

Biome.js는 웹 프로젝트를 위한 툴체인입니다. 프로젝트 서식을 지정하고 린팅하는 데 도움이 됩니다.

빠른 시작

1. 설치

npm install - save-dev - save-exact @biomejs/biome

2. 구성

npx @biomejs/biome init

위 명령어를 실행하면 biome.json 파일이 자동으로 생성됩니다. 아래는

실행 시 기본적으로 생성되는 코드입니다. biome.json에서 위 명령을 실행하세요.

{
 "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
 "vcs": {
 "enabled": false,
 "clientKind": "git",
 "useIgnoreFile": false
 },
 "files": { "ignoreUnknown": false, "ignore": [] },
 "formatter": { "enabled": true, "indentStyle": "tab" },
 "organizeImports": { "enabled": true },
 "linter": {
 "enabled": true,
 "rules": { "recommended": true }
 },
 "javascript": { "formatter": { "quoteStyle": "double" } }
}

linter.enabled: true는 linter를 활성화하고 rule.recommended: true는 권장 규칙을 활성화합니다. 이는 기본 설정에 해당합니다.

형식 지정은 기본적으로 활성화되어 있지만 formatter.enabled: false를 사용하여 명시적으로 비활성화할 수 있습니다.

3. 생물 군계 명령

아. 형식

- 쓰기 옵션과 함께 format 명령을 사용하여 파일과 디렉터리의 형식을 지정할 수 있습니다.

npx @biomejs/biome format - write <files>

ㄴ. 린트

lint 명령과 — 쓰기 옵션을 사용하여 파일 및 디렉터리에 안전한 수정 사항을 적용하고 린트할 수 있습니다.

npx @biomejs/biome lint - write <files>

ㄷ. 확인

check 명령을 활용하여 포맷과 링크를 모두 실행할 수 있습니다.

npx @biomejs/biome check - write <files>

t3-env의 Biome.js 사용법

1. package.json의 스크립트

"lint": "biome check .",
"lint:fix": "biome check . - apply",

포맷과 린팅을 적용하는 check CLI 명령어를 사용하고 있는 것으로 확인됩니다. 변형이 있지만 Lint는 Linting 문제만 확인하지만 lint:fix를 수행하면 — Apply로 실행됩니다.

— 적용 — 별칭 — 쓰기, 안전한 수정 사항 작성, 서식 지정 및 가져오기 정렬(더 이상 사용되지 않음, 사용 — 쓰기)

2. biome.json

{
 "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
 "organizeImports": {
 "enabled": true
 },
 "formatter": {
 "enabled": true,
 "indentWidth": 2,
 "indentStyle": "space"
 },
 "linter": {
 "enabled": true,
 "rules": {
 "recommended": true,
 "a11y": {
 "noSvgWithoutTitle": "off",
 "useButtonType": "off",
 "useAltText": "off"
 },
 "complexity": {
 "noBannedTypes": "off"
 },
 "style": {
 "useImportType": "error",
 "useExportType": "error"
 }
 }
 },
 "overrides": [
 {
 "include": ["**/*.test.ts"],
 "linter": {
 "rules": {
 "suspicious": {
 "noExplicitAny": "off"
 }
 }
 }
 }
 ],
 "vcs": {
 "enabled": true,
 "clientKind": "git",
 "useIgnoreFile": true
 }
}

회사 소개:

Thinkthroo에서는 대규모 오픈소스 프로젝트를 연구하고 아키텍처 가이드를 제공합니다. 우리는 귀하의 프로젝트에서 사용할 수 있는 tailwind로 구축된 재사용 가능한 구성 요소를 개발했습니다. Next.js, React, Node 개발 서비스를 제공합니다.

귀하의 프로젝트에 대해 논의하려면 회의를 예약하세요.

참고자료:

1. https://biomejs.dev/

2. https://github.com/t3-oss/t3-env/blob/main/biome.json

3. https://github.com/t3-oss/t3-env/blob/main/package.json#L10

위 내용은 웹 프로젝트의 형식을 지정하고 린트하기 위한 툴체인 Biome.js의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!