stylelint를 사용하여 CSS_StyleLint_Basics를 확인하세요.

CSS 코드를 많이 작성하다 보면 하나 이상의 오류가 발생할 수 있습니다. CSS 작성 오류를 방지하려면 도구가 필요할 수 있습니다.

아마도 때로는 귀하의 오류가 실제로 버그일 수도 있습니다. 아니면 일관성이 없거나 엉성함으로 인한 코딩 스타일이 불분명할 수도 있습니다. 어쩌면 그들 중 다수가 사소해 보일 수도 있지만(당신의 기질에 따라), 코드 기반이 커지고 시간이 지남에 따라 많은 사람들이 그것을 사용할 때 추악한 일을하게 될 것입니다. 문제의 결과는 당신의 상상을 초월합니다.

당신은 자신을 통제하려고 노력합니다. 동료들도 도와주고, 방황할 때 실수를 바로 바로잡아줍니다. 그러나 당신과 당신의 동료들은 실수를 저지르는 사람들이기 때문에 결국 어느 정도 실패는 불가피합니다. 나중에 귀하 또는 다른 사람이 페이지의 CSS 오류로 인해 발생한 문제를 해결해야 합니다.

당신이나 당신의 동료 모두 당신의 실수가 부끄럽기 때문에 토론하는 것을 좋아하지 않습니다. 때로는 좌절감을 주거나 감정적으로 해를 끼칠 수도 있습니다. 일관된 작성 스타일과 같은 특정 분야는 코드 기반을 유지하는 데 도움이 되는 경우가 있는데, 이는 수동으로 구현할 때 약간 현학적이고 지루해 보일 수 있습니다. 그렇지 않으면 당신이 평소 좋아하는 강압적이고 완고한 요소가 드러날 것입니다.

또한 코드 검토 후 다른 사람이 오류를 지적할 때까지 기다리기보다는 제때에 오류를 수정하고 직접 수정한 후 다시는 이러한 오류를 일으키지 않겠다고 선언하는 것을 선호할 수도 있습니다. CSS에 오류가 있는 경우 적시에 피드백을 제공하면 많은 시간을 절약하는 데 도움이 됩니다.

당신에게 필요한 것은 오류를 방지하는 기계입니다

CSS를 이해하고 귀하의 의도, 선호도, 아이디어 및 약점을 이해하는 버그 방지 시스템이 필요합니다.

이 기계에는 제한이 있습니다. 모든 것이 완벽하지는 않습니다. 그러나 이 제한은 귀하와 귀하의 동료마다 다릅니다. 오류를 방지할 수 있는 한, 오류를 지속적으로 방지할 것입니다. 동시에 귀하와 귀하의 동료는 항상 기계를 개선하여 기능을 확장하고 한계를 약화시킬 수 있습니다. 이는 오픈 소스이며 전 세계 사람들이 참여하여 자신의 역할을 수행할 수 있습니다. CSS 작성 오류를 스스로 방지하려는 다른 작성자도 있습니다.

다른 모든 것과 마찬가지로 CSS 작성자에게도 린터가 필요합니다

우리는 이러한 오류를 방지하는 프로그램을 "린터"라고 부릅니다. Javascript에는 더 나은 린터가 몇 가지 있습니다. 특히 ESLint는 기적처럼 작동하며 좋은 린터가 얼마나 유용할 수 있는지 보여줍니다. 그러나 CSS에서는 운이 좋지 않으며 옵션이 매우 제한적입니다. 특수 전처리기를 갖춘 Ruby 기반 scss-lint와 이전 CSS Lint입니다.

하지만 이것은 PostCSS 이전이었습니다. 또한 PostCSS는 보다 대화형 CSS 도구를 구축할 수 있는 몇 가지 방법을 제공합니다. 분석 및 작업을 위해 CSS와 유사한 구문을 AST(추상 구문 트리) 플러그인으로 구문 분석할 수 있습니다. 그리고 사용자 정의 파서를 사용하면 PostCSS는 비표준 유효하지 않은 패턴(예: // 주석)

도 처리할 수 있습니다.

PostCSS의 강력한 기능을 기반으로 하고 scss-lint 및 ESLint의 최고의 기능에서 영감을 받아 더욱 강력한 기능을 갖춘 linter를 생산할 수 있는 조건이 무르익었습니다.

저는 여러 친구들과 함께 이 프로젝트를 진행하고 있는데 이제 우리가 개발한 도구인 stylelint를 소개하겠습니다.

stylelint로 할 수 있는 일

다음은 100개 이상의 규칙이 있고 확장성이 뛰어난 stylelint에서 시도한 기능을 요약한 것입니다.

이 시점에서 약간 조급해지면("좋아, 좋아: stylelint가 놀라운 효과를 발휘할 것이라고 믿습니다. 요약할 필요가 없습니다.") 몇 가지 문제를 해결하고 몇 가지 팁을 제공할 다음 섹션으로 건너뛰세요.

오류 잡기

일부 스타일린트 규칙은 주의가 산만하거나 눈이 충혈되어 발생한 철자 오류나 누락과 같은 명백한 오류를 포착하도록 설계되었습니다. 예를 들어 빈 블록, 유효하지 않은 16진수 값, 중복 선택기, 이름이 지정되지 않은 애니메이션 이름 및 잘못된 선형 그라데이션 구문을 억제할 수 있습니다.

다른 규칙은 더 미묘한 오류를 포착하기 위해 최선을 다하는 것입니다. 규칙은 다음과 같습니다. 해당 속성(예: margin-top)을 재정의하는 단축 속성(예: margin)을 사용할 때는 경고를 표시합니다. 이는 사용자의 실수일 수 있습니다. 또한 규칙 A가 규칙 B 앞에 나타나지만 규칙 A의 선택자가 더 높은 우선순위를 가지기 때문에 실제로 규칙 B를 재정의하는 등 혼란스러운 상황이 발생할 때 경고하는 규칙도 있습니다(예: 규칙 A는 다음과 같습니다). .foo.bar{···}, 규칙 B는 .foo{···})입니다. 이것은 매우 까다로운 상황입니다.

PostCSS의 douse 플러그인을 사용하여 브라우저가 이 스타일을 지원하는지 확인하는 규칙도 있습니다. 다른 하나는 CSS-colorguard 플러그인을 사용하여 혼동을 피하기 위해 색상의 유사성을 표시합니다. (참고: 이는 PostCSS 위에 있는 stylelint의 주요 장점 중 하나입니다. stylelint는 다른 PostCSS 플러그인에 비해 매우 적은 노력으로 메시지를 표시할 수 있습니다.)

모범 사례 시행

스타일시트에서 시스템 메소드를 사용하거나 코드에 대한 스타일 가이드를 설정하는 경우 이러한 패턴을 비활성화해야 합니다. stylelint는 이미 이러한 기능을 제공합니다.

먼저 선택자를 엄격하게 제어해야 합니다. 스타일린트를 사용하면 특정 구체성을 넘어서는 선택기를 비활성화하거나 중첩 깊이에 대한 제한을 설정할 수 있습니다. 카테고리 선택기(예: ID가 없는 선택기)를 억제하고 나머지 선택기에 대해 정규식 명명 규칙을 사용할 수 있습니다.

귀하의 브라우저가 지원하지 않는 !important 또는 브라우저 해킹의 사용을 비활성화할 수 있습니다. Autoprefixer를 사용하는 경우(또는 사용해야 하는 경우) 소스 스타일시트에서 공급업체 접두어 사용을 비활성화할 수 있습니다.

좀 더 엄격하게 하고 싶다면 절대적인 일관성을 보장하기 위해 구성에 시간을 할애할 수 있습니다. 스타일시트 속성의 순서를 강제하고 속성, 블랙리스트 값, 화이트리스트 값을 제공할 수 있습니다. 함수에도 단위가 있습니다.

코드 스타일 규칙 시행

stylelint는 코드 스타일 규칙을 자동으로 적용하므로 귀하와 팀원이 적극적으로 설정할 필요가 없습니다. 우리는 이러한 규칙을 더욱 포괄적이고 유연하게 만들기 위해 최선을 다하고 있습니다.

이러한 규칙은 주로 공백에 중점을 두지만 따옴표, 대문자 및 소문자, 소수 앞에 0 쓰기, 키워드 사용 및 값 철자법 등과 같은 기타 세부정보에도 적용됩니다.

당신과 당신의 팀원이 형식 지정 규칙을 설정하고(예: 선언에서 콜론 뒤에 항상 공백을 남겨둡니다) 스타일린트 구성에서 이를 변경하면 다시 논의할 필요가 없게 되기를 바랍니다. 기계 왕국에서 실행되도록 하세요.

모든 것을 만들고 확장하세요

ESLint(및 CSS Lint)의 창시자인 Nicholas Zakas는 ESLint의 성공은 확장성에 있다고 썼습니다. stylelint는 ESLint의 선례를 따르고 CSS 작성자에게 확장 가능한 linter를 제공하려고 시도합니다.

자신만의 규칙 플러그인을 작성하고 게시할 수 있습니다. 현재 사용 가능한 플러그인이 많이 있으며 우리는 다른 사람들의 훌륭한 플러그인을 보고 싶습니다.

구성은 확장 가능하므로 공유할 수 있습니다. 플러그인의 경우 ESLint에서 이 기능의 가치를 배웠습니다. WordPress 및 SUITCSS 구성과 게시된 구성이 포함되어 있는지 확인하세요.

stylelint에 내장된 힌트가 마음에 들지 않으면 조직에 맞게 자신만의 스타일을 직접 만들 수 있습니다. 경고 메시지를 제공하는 데 사용되는 규칙을 사용자 정의할 수도 있습니다.

stylelint API를 사용하면 텍스트 컴파일러 플러그인을 생성하고 테스트하여 작업 흐름의 모든 측면에 stylelint를 통합할 수 있습니다.

stylelint 확장에 대한 아이디어가 있으면 알려주세요!

예상 질문에 대한 답변

몇 가지 질문이 떠오를 수 있습니다. 가장 일반적인 질문에 대한 설명은 다음과 같습니다.

SCSS 이하에서 stylelint를 사용할 수 있나요?

대답은 '예'입니다. SCSS에서 stylelint를 사용할 수 있으며 Less에서도 지원됩니다! PostCSS는 사용자 정의 파서를 허용하므로 stylelint는 다양한 비표준 구문을 쉽게 지원할 수 있습니다. 구문 분석을 위해 PostCSS 파서를 사용자 정의할 수 있습니다.

PostCSS 파서 덕분에 stylelint는 SCSS, Less 및 새로운 SugarSS를 지원합니다. 다른 사용자 정의 구문 지원을 구현하려면 PostLess를 통해 구현할 수 있습니다!

물론 비표준 구문을 방해하는 특정 규칙이 있습니다(예: Sass ID 선택기를 혼동하는 #{$interpolation}). stylelint는 스타일 시트의 스타일을 가리려고 시도하기 때문에 어떤 사람들은 표준 CSS를 사용하고 어떤 사람들은 SCSS와 같은 확장 언어를 사용하고 어떤 사람들은 이상한 사용자 정의 속성을 사용하는 등 필연적으로 채워야 할 몇 가지 구멍을 만듭니다. 그러나 우리는 이러한 버그를 발견할 때마다 지속적으로 작업하고 있습니다. 그 동안의 모든 규칙은 스타일시트별로 또는 행별로 완전히 해제되거나 비활성화될 수 있습니다.

stylelint가 향후 CSS 구문을 사용할 수 있나요?

그렇습니다! 위에 언급된 답변과 유사합니다. stylelint는 향후 CSS 구문 활성화(아마도 PostCSS 플러그인을 통해)를 포함하여 PostCSS가 이해하는 모든 것을 이해할 수 있습니다. 실제로 일부 stylelint 규칙은 향후 CSS 구문과 일부 사용자 정의 속성을 구체적으로 처리합니다.

stylelint 구성이 엄청납니다. 어디서부터 시작해야 하나요?

세 가지 구성 방법을 권장합니다.

게시된 구성을 확장합니다. 우리는 사용자에게 일관된 기준을 제공하기 위해 stylelint 구성 표준을 유지합니다. 그리고 많은 구성도 발표되었습니다. 처음부터 시작하여 한 번에 하나의 규칙을 추가하세요. 기본적으로 어떤 규칙도 활성화되어 있지 않으므로 규칙을 수동으로 추가하면 어떤 규칙이 시행될지 알 수 있고 추가한 각 규칙을 이해할 수 있습니다. 복사-붙여넣기 구성을 활성화하고 사용할 옵션을 결정한 후 선택적으로 제거합니다.

다행히 거대한 스타일린트 구성을 반복해서 작성할 필요가 없습니다. 원하는 스타일을 선택하여 어디서나 사용할 수 있습니다.

stylelint를 실행하는 가장 쉬운 방법은 무엇입니까?

대부분의 사람들에게 가장 쉬운 방법은 명령줄을 이용하는 것입니다.

gulp 플러그인을 선호한다면 gulp-stylelint를 사용할 수 있습니다. 웹팩의 경우 선택할 수 있는 옵션이 많습니다. 이 플러그인이 여러분이 Grunt와 같은 다른 stylelint 플러그인을 만드는 데 영감을 주기를 바랍니다. (오픈소스 프로젝트에서 만나보실 수 있습니다!)

플러그인에 포함된 모든 항목을 포함하여 PostCSS 플러그인을 사용하여 stylelint를 실행할 수도 있습니다. 이는 PostCSS(거의 모든 컴파일 도구를 포함)를 사용할 수 있는 모든 곳에서 stylelint를 사용할 수 있다는 것을 의미합니다!

또한 가장 빠른 피드백을 제공하기 위해 Atom, Sublime Text 및 VS Code용 stylelint 텍스트 컴파일 플러그인도 있습니다. 자세한 내용은 stylelint 웹사이트의 보완 도구 목록을 확인하세요.

아래 표시된 대로 명령줄에 표시될 것으로 예상되는 결과는 다음과 같습니다.

은 Atom에서 다음과 같이 표시됩니다.

stylelint가 내 오류를 수정할 수 있나요?

아니요. 하지만 stylefmt라는 또 다른 서비스가 바로 이를 목표로 하고 있습니다. Linting에 사용하는 것과 매우 유사한 stylelint 구성이 필요하며 오류를 수정할 수 있습니다. 커뮤니티의 기여를 통해 stylelint가 stylelint 규칙을 위반하는 버그를 자동으로 패치하도록 발전할 수 있기를 바랍니다. 그들이 이 목표를 달성할 수 있도록 도와주세요!

또한 CSScomb 또는 stylelint와 결합된 Perfectlist와 같은 다른 도구를 사용하여 자동으로 수정하고 자동으로 중단을 강제할 수도 있습니다.

제약조건 보완을 위해 린팅 사용

좋은 CSS에는 엄청난 제약이 있습니다. 이것이 바로 우리가 SMACSS, ACSS, BEM, SUITCSS, ITCSS 등과 같은 방법을 논의하는 데 많은 시간을 소비하는 이유입니다. 우리 모두는 나쁜 CSS를 작성하는 것이 얼마나 쉬운지 알고 있습니다. 따라서 CSS 스타일 작성을 더 이상 두려워하지 않는다면 작업에서 지능적인 전략을 수립하고 이를 용감하게 고수해야 합니다.

stylelint의 목표는 실행을 자동화하는 것입니다. 즉, CSS 작성자가 자신의 전략을 구현하는 데 사용할 수 있는 핵심 규칙 세트와 플러그형 프레임워크를 제공하는 것입니다.

한 번 시도해 보고 어떤 효과가 있는지 알려주세요. 기여 규칙, 개선 사항, 테스트, 버그 수정, 문서화, 새로운 아이디어 또는 단순한 피드백 등 더 나은 개선을 위한 아이디어가 있으면 연락주세요! 이는 모든 수준의 개발자에게 할 일을 제공합니다.