나만의 코드 규칙 작성

반응형

프로젝트에서는 코드베이스를 보호하기 위해 툴링에 투자할 가치가 있는 때가 있습니다. 언제 어떻게 분명하게 말해야 할지는 잘 모르겠지만, 프로젝트가 장기적이고 험난한 양상을 보이기 시작한 후, 그리고 상황이 완전히 엉망진창으로 느껴지기 전에 어딘가입니다. 너무 이른 최적화는 피하되 성체 후 최적화는 피하십시오.

이러한 툴링 중 일부는 구현이 매우 쉬우며, 종종 바로 앞에서 수행됩니다. 저는 코드 포맷터인 "예쁜이"가 생각나네요. 코드 포맷을 할 때 보통 코드처럼 정확합니다. 접근성 보푸라기, 호환성 보푸라기, 보안 보푸라기 등과 같이 "코딩하는 대로" 버킷에 넣을 수 있는 모든 도구가 있습니다. Webhint는 이것들을 함께 묶어서 아마도 볼 가치가 있을 것이다.

그리고 당신이 작성해야 하는 더 많은 코드를 통해 당신의 코드를 보호하는 툴이 있다. 테스트는 여기에서 가장 중요한 역할을 하며, 코드대로 실행하도록 설정할 수도 있습니다. 이러한 기능은 코드가 의도한 바를 수행하는지 확인하고 많은 가치를 제공하는 것입니다.

여러분이 작성한 더 많은 코드로 여러분의 코드를 보호하는 것이 제가 원하는 것입니다. 전통적인 테스트가 아닌 맞춤형 보풀 처리 규칙입니다. 최근 제 책상에 맞춤형 보푸라기에 대한 두 가지 다른 게시물이 올라왔을 때 생각했습니다.

• 베네딕트 퀸의 "맞춤형 ESLint 규칙 작성 방법"
• Omri Lavi의 "맞춤형 스타일린트 규칙 - 첫 번째 규칙 작성"

 

I was interested as a user of both ESLint and Stylelint in my main codebase. But fair warning, I found the process for writing custom rules in both of those pretty difficult. You gotta know you way around an Abstract Syntax Tree. It’s nothing like `if (rules.find.selector.startsWith("old")) throw("Deprecated selector.")` or something easy like that.

저는 이 모든 것이 저에게 다가온 흥미로운 질문과 관련이 있다는 것을 발견했습니다.

저는 오래된 프로젝트에서 일하는 개발 팀에서 일하는데, 가장 오래되고 버그가 많은 CSS 선택기들을 없애고 싶습니다. 예를 들어 HTML 파일을 열어 클래스 이름이 '비사용 선택기'인 요소를 볼 수 있습니다. 우리의 목표는 IDE를 말 그대로 보풀 오류로 표시하고 "이것은 사용되지 않는 선택기입니다. 대신 .ui-fresh_selector를 사용하십시오."라고 말하는 것입니다.

가장 먼저 생각한 것은 사용자 정의 Stylelint 규칙입니다. 이 규칙은 사용자 정의 Stylelint 규칙을 통해 사용자 정의 팀이 더 이상 사용되지 않는 것으로 알고 경고할 수 있는 선택자를 찾습니다. 하지만 안타깝게도 Stylelint는 CSS 보풀을 만드는 데 쓰이고, 여기서 주된 문제는 HTML인 것 같습니다. html 검사자가 자신만의 규칙을 쓸 수 있는 방법을 가지고 있다는 것은 알고 있습니다. 하지만 HTML 검사자가 자신의 규칙을 쓸 수 있는 방법이 있다는 것은 알고 있습니다. 그래서 저는 그 방법을 찾을 수 있을지 없을지 모르겠습니다.