웹 프로젝트를 위한 툴

Prettier와 동일한 방식으로 코드 포맷팅, 시간 절약

Biome는 빠른 포맷터 로서 JavaScript, TypeScript, JSX, TSX, JSON, CSS, _GraphQL_에 대해 사용할 수 있으며, Prettier와 97% 호환성 을 제공하여 개발자와 CI 환경의 시간을 절약합니다.

Biome는 선호하는 에디터에서 코드를 작성하는 중에도 잘못된 구문을 포함한 코드도 포맷팅할 수 있습니다.

코드

function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {

  if(!greeting){return null};

      // TODO: Don't use random in render
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/.d+/ig, "")

  return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>

    <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
    {greeting.endsWith(",") ? " " : <span style={{color: 'grey'}}>", "</span> }
    <em>
  { greeted }
    </em>
    { (silent)
      ? "."
      : "!"}

    </div>;
}

출력

function HelloWorld({
  greeting = "hello",
  greeted = '"World"',
  silent = false,
  onMouseOver,
}) {
  if (!greeting) {
    return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1E+7)
    .toString()
    .replace(/.d+/gi, "");

  return (
    <div
      className="HelloWorld"
      title={`You are visitor number ${num}`}
      onMouseOver={onMouseOver}
    >
      <strong>
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      </strong>
      {greeting.endsWith(",") ? (
        " "
      ) : (
        <span style={{ color: "grey" }}>", "</span>
      )}
      <em>{greeted}</em>
      {silent ? "." : "!"}
    </div>
  );
}

성능

Biome

0.41s

Prettier

14.35s

~35배

Intel Core i7 1270P 기준으로 2,104개 파일, 총 171,127줄의 코드를 포맷팅할 때 Prettier보다 빠릅니다.

Biome 포맷터를 플레이그라운드에서 직접 시험하거나, 당신의 프로젝트에서 바로 사용해 보세요:

npm i -D --save-exact @biomejs/biome
npx @biomejs/biome format --write ./src

문제 수정 및 최고 실천법 학습

Biome는 고성능 린터 로서 JavaScript, TypeScript, JSX, CSS, _GraphQL_에 대해 사용할 수 있으며, 454개의 규칙 을 포함하고 있으며, ESLint, TypeScript ESLint 및 기타 소스로부터 가져왔습니다.

Biome는 상세하고 맥락을 반영한 진단 정보를 제공하여 코드 품질을 향상시키고 더 나은 프로그래머가 되도록 도와줍니다!

complexity/useFlatMap.js:2:1 lint/complexity/useFlatMap  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The call chain .map().flat() can be replaced with a single .flatMap() call.

    1 │ const array = ["split", "the text", "into words"];
  > 2 │ array.map(sentence => sentence.split(' ')).flat();
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ 

  ℹ Safe fix: Replace the chain with .flatMap().

    1 1 │   const array = ["split", "the text", "into words"];
    2   │ - array.map(sentence·=>·sentence.split('·')).flat();
      2 │ + array.flatMap(sentence·=>·sentence.split('·'));
    3 3 │   

Biome 린터를 플레이그라운드에서 직접 시험하거나, 당신의 프로젝트에서 바로 사용해 보세요:

npm i -D --save-exact @biomejs/biome
npx @biomejs/biome lint --write ./src

모든 것을 한 번에

코드를 별도로 포맷팅하고 분석하는 것뿐 아니라, 하나의 명령어로 모든 작업을 동시에 수행할 수 있습니다!

각 도구는 서로 완벽하게 통합되어 웹 프로젝트를 위한 통합된 도구 체인을 만듭니다.

check 명령어로 모든 도구를 실행하세요:

npm i -D --save-exact @biomejs/biome
npx @biomejs/biome check --write ./src

빠르다

Rust로 구현되었으며, rust-analyzer를 영감으로 받은 혁신적인 아키텍처를 사용합니다.

간편하다

시작하기 위해 별도의 설정이 필요 없습니다. 필요할 때 사용 가능한 다양한 옵션이 있습니다.

확장성 있음

어떤 크기의 코드베이스도 관리할 수 있도록 설계되었습니다. 도구가 아닌 프로젝트 성장에 집중하세요.

실용적이고 정보 중심

어두운 오류 메시지를 피하세요. 문제가 발생하면 정확히 어디서 문제 발생했고 어떻게 해결해야 하는지 알려드립니다.

내장 패키지

오늘날 널리 사용되는 모든 언어 기능에 즉시 대응됩니다. TypeScript 및 JSX에 대한 첫 번째 클래스 호환성을 제공합니다.

기업 지원

필요한 조직을 위해 비즈니스 지원을 제공하며, 커뮤니티 참여자들을 통해 운영됩니다.

Biome 사용해 보기

선호하는 패키지 매니저를 사용하여 Biome를 설치하고, 에디터에 통합하세요.

패키지 매니저로 설치하기

Biome을 에디터에 통합하기

주요 기관의 신뢰를 받습니다

프로덕션 환경에서 Biome 을 사용하는 수천 명의 개발자와 기업에 참여하세요

AWS

Canonical

Cloudflare

Coinbase

Comcast

Discord

Google

Microsoft

n8n

Node.js

Slack

Socket

Uniswap

Vercel

Astro

View all users

커뮤니티

오픈소스 기여자들의 열정이 이끄는 커뮤니티입니다

Discord

GitHub

BlueSky

Mastodon

후원사