자바스크립트 프로젝트를 세팅하다 보면 ESLint 설정하고, Prettier 설정하고, 둘이 충돌하지 않게 연동하고... 이런 과정이 꽤 번거롭죠? 거기에 Stylelint까지 더하면 설정 파일만 서너 개가 됩니다. 🤯 이런 불편함을 해결하려는 도구가 바로 Biome입니다. 포맷터와 린터를 하나의 도구로 합쳐서, 설정도 간단하고 속도도 빠른 올인원 웹 개발 도구를 표방하고 있는데요. 이번 글에서는 Biome이 어떤 도구인지, 어떻게 설치하고 사용하는지, 기존의 ESLint/Prettier와 비교하면 어떤 차이가 있는지 살펴보겠습니
CSS 코드를 작성하다 보면 "이 속성 순서가 맞나?", "컬러 값을 hex로 쓸까 rgb로 쓸까?", "이 선택자는 너무 복잡한 거 아닌가?" 같은 고민을 하게 되는데요. 특히 여러 명이 함께 작업하는 프로젝트에서는 각자 선호하는 CSS 작성 스타일이 달라서 코드 리뷰 때마다 사소한 의견 차이로 시간을 낭비하기 일쑤입니다. 🤔 자바스크립트에는 ESLint라는 훌륭한 린터가 있어서 코드 품질을 자동으로 검사하고 일관된 스타일을 유지할 수 있는데요. CSS에도 이와 똑같은 역할을 해주는 도구가 있습니다. 바로 Stylelint입니다
많은 자바스크립트 프로젝트에서 ESLint를 사용하여 코드에 문제가 없는지 검사를 하고 있습니다. 이번 포스팅에서는 ESLint를 어떻게 설정하는지에 대해서 각 옵션 별로 좀 자세히 알아보겠습니다. ESLint에 대한 기본적인 사용법은 관련 포스팅를 참고 바랍니다. 설정 파일 형식 ESLint는 JSON, YAML, JavaScript와 같이 다양한 형식의 설정 파일을 지원하는데요. 설정 파일의 이름은 항상 .eslintrc가 되야하며, 원하는 포맷에 따른 파일 확장자를 사용해야 합니다. 예를 들어, JSON 파일 포맷을 사용하고
최근에 가장 많이 쓰이는 자바스크립트 린터(linter)인 ESLint에서 대해서 알아보겠습니다. Lint? ESLint? 프로그래밍에서 린트(lint)라는 개념이 생소한 분들을 위해서 lint가 무엇인지에 대해서 먼저 짚고 넘어가겠습니다. 린트(lint)는 소스 코드에 문제가 있는지 탐색하는 작업을 의미하며, 린터(linter)는 이 작업을 도와주는 소프트웨어 도구를 의미합니다. 자바스크립트와 같이 컴파일 과정이 없는 인터프리터 언어의 경우, 런타임 에러가 발생할 확률이 높기 때문에, 이 린트 작업을 통해 사전에 에러를 최대한 잡