<div id="readability-page-1" class="page"><div>
      
        <header>
          
          

  <p>
    

    

    
      
      

      <span>
        
        
          1 minute read
        
      </span>
    
  </p>


        </header>
      

      <section itemprop="text">
        
        <p>eslint와 prettier의 개발 경험은 불쾌하다. 그 이유는</p>

<h2 id="역할-중복">역할 중복</h2>
<p>eslint와 prettier의 역할이 중복된다. 그래서 <a href="https://github.com/prettier/eslint-config-prettier">eslint-config-prettier</a>와 <a href="https://prettier.io/docs/en/integrating-with-linters.html">eslint-plugin-prettier</a>를 사용한다. 이 두 라이브러리는 eslint의 prettier의 설정으로 덮어 써준다.</p>

<p>하지만 <a href="https://prettier.io/docs/en/integrating-with-linters.html">eslint-plugin-prettier</a>를 사용하지 말 것을 <a href="https://prettier.io/docs/en/integrating-with-linters.html">권장한다</a>. eslint를 사용할 필요가 없다나? 그래서 eslint-plugin-prettier를 삭제하면 어떻게 되느냐? IDE와 prettier가 따로 논다. 특히 intelllJ 계열 IDE(Webstorm)에서 그렇다.</p>

<p>결론부터 말하자면 Webstorm은 prettier를 제대로 지원하지 못한다. Webstorm에는 파일 수정 후 저장시, 자동으로 eslint와 prettier를 돌려서 파일을 수정해주는 기능이 있다. 들여쓰기나 import sorting이 자동으로 되니 편리하고, 무엇보다 협업을 할 때 띄어쓰기 변경 등으로 인한 git log 혼돈을 예방할 수 있다. 하지만 이건 이론상으로만 그렇다. eslint와 prettier의 설정을 수정하다 보면 Webstorm은 prettier의 설정을 따를지, eslint의 설정을 따를지 혼돈스러워 한다. 무슨 짓을 해도 import sorting이 안 되는 꼬라지를 보고 있으면 화가 치밀어 오른다. visual studio code에서는 이런 일이 없는 것 같으나… intelliJ 계열 IDE는 버림받았다.</p>

<h2 id="biome">Biome</h2>
<p>eslint/prettier 조합이 제대로 안 돌아가고, 불편해서 대안이 <a href="https://github.com/biomejs/biome">Biome</a>이다. Biome는 eslint와 prettier가 하는 역할을 모두 한다. 그리고 Webstorm 연동 플러그인도 잘 돌아간다. 파일 저장시 formatter가 잘 동작하고, lint도 잘 표시해준다!</p>

<h2 id="migration">migration</h2>
<p>eslint/prettier에서 Biome로 이관하는 방법은 간단하다.</p>

<div><pre><code>npx @biomejs/biome migrate
</code></pre></div>

<p>그런데 대부분의 rule이 eslint/prettier와 호환되기 때문에 나는 위 기능을 사용하지 않고 수작업으로 이관해도 충분했다.</p>

<h2 id="장점">장점</h2>
<ul>
  <li>Webstorm을 잘 지원한다. lint와 formatter가 잘 동작한다!</li>
  <li>typescript와 jsx, tsx를 기본 지원한다. 말이 필요없다.</li>
  <li>React를 잘 지원한다.</li>
  <li>설정이 간단하다. <code>eslint + prettier + @type</code> 을 설치할 필요가 없다.</li>
  <li>cli가 정상 동작한다.</li>
  <li>bun을 잘 지원한다. Node.js가 필요없다.</li>
</ul>

<h2 id="단점">단점</h2>
<ul>
  <li>불안정한 Webstorm 지원. v1.0 플러그인이 현재 nightly 버전이다. 하지만 잘 돌아간다.</li>
  <li>부족한 레퍼런스. 검색해도 잘 안 나온다.</li>
  <li>프로젝트가 언제 망할지 모른다.</li>
  <li>css와 html, vue, markdown은 향후 지원 예정이다.</li>
</ul>

<h2 id="거짓말">거짓말(?)</h2>
<ul>
  <li>rust로 만들어서 속도가 대단히 빠르다… 고 홍보하는데 m1 pro macbook 환경에서 체감은 되지 않았다. eslint와 prettier도 제법 빠르다보니…</li>
</ul>

<h2 id="tmi">TMI</h2>
<p>Biome는 통합 빌드 도구를 표방하다가 망해버린 <a href="https://github.com/rome/tools">Rome</a>의 후계자다. 과연 안 망하고 버틸 수 있을 것인가.</p>

<p>20240220</p>

        
      </section>

      

      


      
  

    </div></div>

Never test

eslint와 prettier의 개발 경험은 불쾌하다. 그 이유는
역할 중복
eslint와 prettier의 역할이 중복된다. 그래서 eslint-config-prettier와 eslint-plugin-prettier를 사용한다. 이 두 라이브러리는 eslint의 prettier의 설정으로 덮어 써준다.
하지만 eslint-plugin-prettier를 사용하지 말 것을 권장한다. eslint를 사용할 필요가 없다나? 그래서 eslint-plugin-prettier를 삭제하면 어떻게 되느냐? IDE와 prettier가 따로 논다. 특히 intelllJ 계열 IDE(Webstorm)에서 그렇다.
결론부터 말하자면 Webstorm은 prettier를 제대로 지원하지 못한다. Webstorm에는 파일 수정 후 저장시, 자동으로 eslint와 prettier를 돌려서 파일을 수정해주는 기능이 있다. 들여쓰기나 import sorting이 자동으로 되니 편리하고, 무엇보다 협업을 할 때 띄어쓰기 변경 등으로 인한 git log 혼돈을 예방할 수 있다. 하지만 이건 이론상으로만 그렇다. eslint와 prettier의 설정을 수정하다 보면 Webstorm은 prettier의 설정을 따를지, eslint의 설정을 따를지 혼돈스러워 한다. 무슨 짓을 해도 import sorting이 안 되는 꼬라지를 보고 있으면 화가 치밀어 오른다. visual studio code에서는 이런 일이 없는 것 같으나… intelliJ 계열 IDE는 버림받았다.
Biome
eslint/prettier 조합이 제대로 안 돌아가고, 불편해서 대안이 Biome이다. Biome는 eslint와 prettier가 하는 역할을 모두 한다. 그리고 Webstorm 연동 플러그인도 잘 돌아간다. 파일 저장시 formatter가 잘 동작하고, lint도 잘 표시해준다!
migration
eslint/prettier에서 Biome로 이관하는 방법은 간단하다.
npx @biomejs/biome migrate
그런데 대부분의 rule이 eslint/prettier와 호환되기 때문에 나는 위 기능을 사용하지 않고 수작업으로 이관해도 충분했다.
장점
Webstorm을 잘 지원한다. lint와 formatter가 잘 동작한다!
typescript와 jsx, tsx를 기본 지원한다. 말이 필요없다.
React를 잘 지원한다.
설정이 간단하다. eslint + prettier + @type 을 설치할 필요가 없다.
cli가 정상 동작한다.
bun을 잘 지원한다. Node.js가 필요없다.
단점
불안정한 Webstorm 지원. v1.0 플러그인이 현재 nightly 버전이다. 하지만 잘 돌아간다.
부족한 레퍼런스. 검색해도 잘 안 나온다.
프로젝트가 언제 망할지 모른다.
css와 html, vue, markdown은 향후 지원 예정이다.
거짓말(?)
rust로 만들어서 속도가 대단히 빠르다… 고 홍보하는데 m1 pro macbook 환경에서 체감은 되지 않았다. eslint와 prettier도 제법 빠르다보니…
TMI
Biome는 통합 빌드 도구를 표방하다가 망해버린 Rome의 후계자다. 과연 안 망하고 버틸 수 있을 것인가.
20240220

eslint/prettier 못 쓰겠다. Biome로 갈아보자

댓글