Tailwind CSS IntelliSense 린팅 기능 소개
- Date
Brad Cornes
오늘 우리는 Visual Studio Code용 Tailwind CSS IntelliSense 확장 프로그램의 새 버전을 출시합니다. 이 버전은 CSS와 마크업 모두에 Tailwind 전용 린팅 기능을 추가합니다.
CSS 오류 감지하기
Tailwind는 이미 CSS 오류를 감지합니다. 예를 들어 @screen 지시문에서 화면 이름을 잘못 입력했을 때를 감지할 수 있습니다. Tailwind CSS IntelliSense의 린팅 기능은 이러한 오류를 감지하고 에디터 내에서 바로 컨텍스트에 맞게 표시합니다. 린터는 @tailwind, @screen, @variants, @apply 지시문과 theme 함수 호출을 검증합니다.
HTML에서 충돌 잡아내기
템플릿 파일의 클래스 목록을 분석하여 유틸리티 간 충돌이 발생하는 부분을 강조해주는 린트 규칙이 하나 더 있습니다. 예를 들어, 동일한 클래스 목록에 mt-4와 mt-6이 함께 있는 경우는 의도하지 않았을 가능성이 높습니다!
빠른 수정 기능 포함
문제를 최대한 쉽게 해결할 수 있도록, 모든 린트 규칙에는 Visual Studio Code 내에서 직접 트리거할 수 있는 “빠른 수정” 기능이 포함되어 있습니다. 예를 들어, 실수로 @screen sm 대신 @screen small을 입력했다면, 에디터가 자동으로 small을 sm으로 바꿔줄 수 있습니다!
단순한 텍스트 교체뿐만 아니라, 더 복잡한 린트 규칙을 위한 흥미로운 빠른 수정 기능도 있습니다. 예를 들어, 잘못된 @apply 지시문을 자동으로 리팩토링하는 방법을 확인해 보세요:
설정
새로운 린트 기능이 마음에 들 거라 생각하지만, 그렇지 않거나 일부 동작을 조정하고 싶다면 걱정하지 마세요. 각 규칙 위반을 어떻게 처리할지 결정할 수 있습니다. error로 처리할지, warning으로 할지, 아니면 규칙을 완전히 ignore할지 선택할 수 있습니다. 정말 원한다면 새로운 tailwindCSS.validate 설정을 사용해 린트 기능을 완전히 비활성화할 수도 있습니다.
워크플로우에 맞게 린트 규칙을 설정하는 방법에 대한 자세한 내용은 확장 프로그램 README를 확인하세요.
결론
Tailwind CSS IntelliSense의 v0.4.0 버전에서 린팅 기능이 추가되었습니다! 이미 이 확장 프로그램을 설치했다면 업데이트를 받기 위해 Visual Studio Code를 다시 시작해야 할 수 있습니다. 아직 설치하지 않았다면 확장 프로그램 마켓플레이스에서 설치할 수 있습니다.
이 기능은 첫 번째 버전이므로 여러분의 피드백을 기다리고 있습니다! 새로운 린트 규칙에 대한 아이디어가 있다면 알려주세요!
이 글에 대해 이야기하고 싶으신가요? GitHub에서 토론하기 →