SCSS-Lint를 시작합니다

SCSS-LINT : SASS 코드를 깔끔하고 일관성있게 유지하는 무기

이 기사는 SASS 코드 기반의 깔끔함과 일관성을 유지하기 위해 강력한 루비 보석 도구 인 SCSS-Lint를 사용하는 방법을 소개합니다. 의심스러운 사용을 태그하고 스타일 시트를 쉽게 읽을 수 있도록하여이를 수행합니다.

코어 포인트 :

SCSS-Lint는 의심스러운 사용을 표시하고 스타일 시트를 쉽게 읽을 수 있도록 SASS 코드 기반의 깔끔함과 일관성을 유지하는 데 도움이되는 강력한 Ruby Gem 도구입니다. 사용하기 전에 설치해야하며 명령 줄 도구의 이름이

입니다. SCSS-Lint의 구성에는 프로젝트 루트 디렉토리의 YAML 파일을 통해 따라야 할 규칙을 정의하는 것이 포함됩니다. 이 파일은 일반적으로 라는 이름이 지정되며 모든 코드 스타일 확인 구성이 포함되어 있습니다. 코드 스타일 점검 프로세스를 사용자 정의하기 위해 와 같은 옵션을 SCSS-Lint로 전달할 수 있습니다.

코드를 깔끔하게 유지하기 위해 원격 저장소에 커밋하기 전에 사전 커밋 후크를 사용하여 코드를 확인하는 것이 좋습니다. 파일을 통해 GIT 후크를 지원하는 가벼운 NPM 패키지로 설정할 수 있습니다. 이 프로세스 중에 SCSS-Lint가 오류를 반환하면 커밋이 중단되고 커밋을 통과하려면 코드를 수정해야합니다.

• runnable 코드 작성은 웹 사이트, 응용 프로그램 또는 소프트웨어 개발 중 가장 쉬운 부분입니다. 전체 프로젝트를 확장 가능하고 테스트하고 적절하게 문서화하고 기여하기 쉬운 부분을 만드는 것은 어려운 부분입니다. scss-lint 그 중 일부는 깨끗하고 일관된 코드베이스를 갖는 것입니다. Clean, "이상한"코드를 유지하는 것은 코드 기반을 더 쉽고 빠르게 유지할 수 있기 때문에 확실히 즐거운 일이 아닙니다. 코드가 소프트웨어의 어느 곳에서나 동일하게 보이면 곧 쓰여진 방식에 익숙해집니다.
Sass쪽에는 코드를 깔끔하고 일관성있게 만들기 위해 할 수있는 일이 있습니다. 첫 번째는 CSS 가이드 및 SASS 가이드와 같은 일부 코딩 안내서를 따르는 것입니다. 또 다른 것은 코드 기반을 확인하는 것입니다.
• .scss-lint.yml check 에 익숙하지 않으면 wikipedia의 설명은 다음과 같습니다. --config 컴퓨터 프로그래밍에서 "Check"는 처음에 C 소스 코드에서 의심스럽고 포송 할 수없는 구조 (오류)를 표시하는 특정 프로그램을 나타냅니다. 이제이 용어는 종종 컴퓨터 언어로 작성된 소프트웨어에서 의심스러운 사용을 표시하는 도구를 참조하는 데 사용됩니다. --exclude
Sass의 의심스러운 사용법은 무엇입니까? 그것은 당신이 "의심스러운"을 정의하는 방법에 따라 다르지만, 더 광범위하게, 스타일 시트를 읽기 쉽고 복잡하지 않도록하는 것이 문제 일 수 있습니다. 예를 들어, 선택기 사용을 단일 레벨로 제한하십시오.
• SASS 코드 기반을 확인하기 위해 SCSS-Lint라는 훌륭한 도구가 있습니다. 이제 나쁜 소식에 대해 이야기합시다 : SCSS-LINT는 루비 보석이며, 어떻게 달리는 방법에 관계 없이이 보석을 미리 설치해야합니다 (Cli, Grunt, Gulp ...). 좋은 소식은 일부 사랑스러운 사람들이 현재 SCSS-Lint의 NPM 패키지 버전을 개발하고 있기 때문에 조만간이 지루한 추가 단계를 제거 할 수 있다는 것입니다. 좋아, 시작하자 :

  참고 : 이름 지정 이유로 인해 보석의 이름이 이지만 명령 줄 도구는 실제로 입니다. 라이브러리는 SCSS-Lint입니다. 충분히 복잡하지 않기 때문에… :)

  CLI 도구를 시작하는

  <code class="language-bash">$ gem install scss_lint</code>

  SCSS-Lint에는 많은 옵션이 있습니다. 사실, 처음에는 조금 압도 될 수 있습니다. 다행히도 많은 옵션을 자주 사용하지 않으므로 이러한 옵션을 살펴 보겠습니다. scss_lint scss-lint

  프로젝트에 따라 코드 스타일 확인 프로세스에서 특정 파일 또는 폴더를 제외하기 위해 또는 옵션을 사용하려고합니다. 예를 들어, 타사 라이브러리 또는 노드 모듈을 확인하고 싶지 않을 수 있습니다. 예를 들면 :

  보다 복잡한 를 사용하려면 를 통해 전달 된 구성 파일에서 정의 할 수 있습니다. 다른 옵션이 있지만, 이것이 시작하기에 충분하다고 생각합니다.

  첫 번째 매개 변수는

  로 전달 된 폴더입니다. 생략하면 기본값은

  , 즉 현재 폴더입니다. 특정 폴더를 지정하려면 다음을 수행 할 수 있습니다.

  -c 코드 스타일 검사 --config 구성 이제 SASS 코드 기반을 확인할 준비가되었으므로 따라야 할 규칙을 정의해야합니다. SCSS-Lint에는 많은 코드 스타일 검사관

  (호출)가 많기 때문에 여기에 나열된 모든 검사관이 너무 길다. 코드 스타일 검사기의 문서를 읽는 것이 좋습니다.

  <code class="language-bash">$ scss-lint . --config .scss-lint.yml</code>

  아이디어는 모든 코드 스타일 확인 구성으로 프로젝트 루트 디렉토리에 YAML 파일을 작성한다는 것입니다. 기본적으로 SCSS-Lint는 현재 폴더에서

  파일을 찾으려고하므로 파일의 이름을 이와 같이 이름을 지정하는 것이 좋습니다. 그러나 다른 이름을 선호하는 경우 -e 옵션으로 전달하십시오. --exclude Sass Guide는 프로젝트에서 사용할 수있는 기성품 구성 파일을 제공합니다. 무언가를 사용자 정의하려면 자세히 살펴보십시오. 그러나 전반적으로 문제를 해결해야합니다.

  <code class="language-bash">$ scss-lint . --exclude ./node_modules/**/*</code>

  를 제출할 때 코드 스타일을 확인하십시오 매우 좋은 것은 코드가 깨끗한 지 확인하기 위해 커미트 후크를 사용하는 것입니다 ( checked ). 이전 SitePoint 기사에서 SASS 테스트 및 사전 커밋 후크를 다루었습니다.

  사전 커밋 후크가 무엇인지 확실하지 않으면 기본적으로 커밋을 적용하기 전에 일부 작업을 실행하도록 설계된 메커니즘입니다. 수행 된 작업이 오류가 발생하면 커밋이 중단됩니다.

  원격 저장소에 커밋하기 전에 코드를 확인하십시오. 이것은 GIT 후크의 완벽한 사용 사례입니다. 이 섹션에서는 매우 간단한 방식으로 설정하는 방법을 볼 수 있습니다.

  이렇게하려면 파일을 통해 직접 git 후크를 지원하는 매우 가벼운 NPM 패키지를 사용합니다. 이를 수행 할 수있는 많은 라이브러리가 있지만 개인적으로

  를 선택했습니다. 아래에 표시된대로 :

  제출할 때 사전 커밋 후크는 Lint NPM 스크립트를 트리거하고 실행합니다 (와 정확히 동일). 코드에서 볼 수 있듯이 LINT NPM 스크립트는

  명령을 실행합니다. SCSS-Lint가 오류를 반환하면 커밋이 중단되고 커밋을 통과하려면 코드를 수정해야합니다. package.json Gulp, Grunt 또는 기타 도구를 통해 SCSS-Lint를 실행하면 바이너리를 직접 사용하는 대신 Lint NPM 스크립트에서 작업을 실행할 수 있습니다. 마찬가지로 pre-commit 또는 와 같은 옵션을 전달할 수 있습니다.

  <code class="language-bash">$ gem install scss_lint</code>

  최종 생각

  npm run lint 우리는 항상 더 잘할 수 있지만, 이것이 SCSS-Lint에 대한 훌륭한 소개라고 생각하며, 기존 및 새로운 프로젝트 모두 간단하고 강력한 방식으로 사용할 수 있습니다. scss-lint . 얘들 아, 더러운 코드를 계속 제출할 이유가없고, 밀기 전에 확인하십시오!

  (원본 텍스트의 FAQ 부분은 내용이 기사의 주제와 관련되어 있고 다시 쓰기 후에 정보가 손실되기 때문에 여기에 유지됩니다.

  SCSS Lint의 주요 목적은 무엇입니까? SCSS Lint는 개발자가 SCSS 코드를 분석하고 정의 된 코딩 표준의 모든 디자인을 플래그하는 도구입니다. SCSS Lint는 일관된 코딩 스타일을 시행함으로써 동일한 코드베이스. SCSS LINT를 어떻게 설치합니까? scss-lint SCSS Lint는 루비 보석이므로 루비를 사용하려면 루비를 설치해야합니다 , 당신은 명령 줄에서 scss 파일을 보풀로 실행할 수 있습니다. --config. SCSS LINT를 어떻게 구성합니까? SCSS Lint는 프로젝트의 루트 디렉토리에 --exclude 파일을 작성하면 특정 Linters를 활성화하거나 비활성화 할 수 있습니다 그리고 각 Linter에는 구성 할 수있는 고유 한 옵션 세트가 있습니다. 다른 도구와 함께 SCSS Lint를 사용할 수 있습니까? 예, SCSS Lint는 많은 인기있는 도구 및 편집자와 통합 될 수 있습니다. 예를 들어, Grunt 및 Gulp와 같은 작업 러너 또는 Sublime Text 및 Atom과 같은 코드 편집기와 함께 사용할 수 있습니다. 이를 통해 개발 워크 플로의 일부로 SCSS 파일을 자동으로 보충 할 수 있습니다. 일반적인 SCSS LINT 규칙은 무엇입니까?

  SCSS Lint에는 SCSS 코드에서 모범 사례를 시행하는 광범위한 규칙이 제공됩니다. 몇 가지 일반적인 규칙에는 일관된 계약 시행, 후행 공백을 허용하지 않으며 파일 끝에 새로운 라인이 필요합니다. ID 선택기 사용을 허용하지 않거나 규칙의 개방 버팀대 전에 공간이 필요한 것과 같은보다 구체적인 SCSS 기능에 대한 규칙도 있습니다. 특정 SCSS Lint 경고를 어떻게 무시합니까? 무시하려는 특정 경고가있는 경우 코드 라인 전에

  에 주석을 추가하여 그렇게 할 수 있습니다. 규칙을 다시 활성화하려면

  로 다른 주석을 추가 할 수 있습니다. 또한

  . CSS 파일과 함께 SCSS LINT를 사용할 수 있습니까? SCSS Lint는 CSS의 슈퍼 세트 인 SCSS 용으로 특별히 설계되었습니다. 이는 CSS 코드를 신고 할 수 있지만 일부 CSS 특이 적 구문을 이해하지 못할 수도 있음을 의미합니다. 주로 CSS와 함께 일하고 있다면 Stylelint와 같은 CSS 특유의 라이터를 사용하는 것을 고려할 수 있습니다. SCSS Lint를 어떻게 업데이트합니까?

  당신은 터미널에서 명령 를 실행하여 SCSS Lint를 업데이트 할 수 있습니다. 이것은 보석의 최신 버전을 다운로드하여 설치합니다. 최신 기능 및 버그 수정의 혜택을 받기 위해 도구를 최신 상태로 유지하는 것이 좋습니다. SCSS Lint의 대안은 무엇입니까? 스타일 린트, CSSLINT 및 SASS LINT를 포함하여 SCSS Lint에 대한 몇 가지 대안이 있습니다. 이러한 도구에는 비슷한 기능이 있지만 규칙이나 구성 옵션이 다를 수 있습니다. 귀하의 요구와 선호도에 가장 적합한 도구를 선택해야합니다.

  SCSS LINT를 어떻게 제거합니까? 더 이상 SCSS Lint가 필요하지 않으면 터미널에서 명령을 실행하여 제거 할 수 있습니다. 이것은 시스템에서 보석을 제거합니다. 나중에 다시 설치하려면 설치 명령을 다시 실행하여 그렇게 할 수 있습니다.

위 내용은 SCSS-Lint를 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!