CSS 디버깅을 stylelint로 수행

무엇을 할 수 있을까

이미지에는 .em_2em 라는 선택기가 두 개 있습니다.
그에 대해, 셀렉터 중복 금지의 룰을 설정하고 있으므로, 그 자리에서 지적되어 게다가 화면 아래의 PROBLEMS 탭에서도 주의해 줍니다.
이와 같이, CSS에 대해, 제공되고 있는 중에서 좋아하는 룰을 선택해, 자유롭게 추가해 가는 것으로, 잘못된 설명에 에러를 낼 수가 있습니다.

왜 이것을하고 싶었습니까?

HTML/CSS로 한번에 사이트를 만든 후, CSS의 셀렉터 등에 중복이 많이 있거나 하고, 이것 어떻게든 하고 싶다! 라고 생각했습니다. 그렇지만 수동으로 하는 것은 어쩐지 시원하지 않다고 생각하므로, 어쨌든 검색에 검색을 거듭한 정리입니다.

원래 디버깅은 뭐야?

MDN - HTML 디버깅

일반적으로 오류는 두 가지 유형으로 크게 나뉩니다.

로직 오류

구문 오류

로직 에러는 원래 코드를 만드는 방법, 생각이 잘못되어 있다는 것.

구문 오류는 HTML과 CSS 자체가 괴롭히기 어렵다. 왜냐하면 최근의 모던 브라우저가 구문 분석 에러가 있었다고 해도 그것을 어느 정도 공기를 읽어 화면에 좋은 느낌으로 표시해 버린다.

사실, 자신도 낡은 소스 개수로, 이런 HTML을 써 버리고 있었지만,

<table class="table_1">
　　<table class="table_2"></table>
</table>

본래는 이렇게.

<table class="table_1">
   <tr>
     <td>
        <table class="table_2"></table>
     </td>
   <tr>
</table>

하지만 크롬의 개발자 도구를 보면 좋은 느낌으로 표시해주고 있다(정말 사소하게 다른 곳은 있지만). 또한 잘못된 코드는 개발자 도구에서

<table class="table_1">
</table>
<table class="table_2"></table>

왠지 이런 느낌으로 표시되어 있었다.

즉, 이러한 것을 소스를 쓰는 것이 한 단락되면 개발자 도구라든가 말하기 전에 체크해 두고 싶지 않다는 것이라고 해석했습니다.

디버깅하기

MDN으로 디버깅 배우기

MDN - HTML 디버깅 의 페이지에서는 ,HTML/CSS 양쪽 모두, 샘플 파일을 다운로드해 , W3C 공식 사이트 로, 디버그를 실시하는 방법이 소개되고 있다.

소스 파일을 업로드하고 확인

소스 코드를 페이스로 확인

URI를 속도로 확인

라는 3가지 방법이 준비되어 있다.

vscode에 stylelint를 설치하고 디버깅 할 수 있습니다.

일일이 파일을 업로드하거나 하는 것은 현실적이지 않고, 에디터내에서 완결하는 편이 스마트한 생각이 들기 때문에, css디버그나 그런 느낌의 워드로 검색해 버린 결과 stylelint라고 하는 방법에 도착한다.

원래 lint는 무엇입니까? 라고 사람은(자신도 그 부류입니다만)

ESLint 첫걸음

요점은 문법 에러등을 체크해 주는 툴의 css판. scss용 등도 있는 것 같다.

stylelint에 대해서는 도입 방법이 크게 나누어 두 가지가 있다.

코드 편집기에 플러그인 설치

npm/yarn으로 설치 (node.js 기반)

나는 vscode 플러그인을 선택했기 때문에 그 방법을.

절차

1. vscode 플러그인

2.vscode 작업 공간 설정에 다음 추가

   {
       "stylelint.enable": true,
       "css.validate": false,
       "scss.validate": false
   }

3. 프로젝트 루트 디렉토리에 .stylelintrc 추가

4. .stylelintrc 에 필요한 규칙을 설명합니다.

   {
     "rules": {
       "ルール1": 値,
       "ルール2": 値
     }
   }

추가할 수 있는 규칙

결과

자신은 CSS의 셀렉터 중복이 싫었기 때문에 그것을 해소할 수 있었기 때문에 좋았다. 이것을 발판에, 규칙을 추가해, 좋은 느낌으로 해 가면 좋겠다,라고 생각했습니다.