HTML 디버깅을 HTMLHint로 수행

무엇을 할 수 있을까

html 파일을 편집할 때 실수가 있으면 사용자 정의 가능한 규칙에 따라 그 자리에서 경고를 내게 되었습니다.

화상은, 본래는 이하와 같이 해야 할 곳을,

<article>スラッシュ忘れ</article>

다음과 같이 해 버리고있는 것 같은 (emmet 사용하면 일어나지 않는 실수입니다) 심플한 실패 예입니다.

<article>スラッシュ忘れ<article>

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

HTML/CSS로 한 번에 사이트를 만든 후, stylelint를 도입하고 CSS를 디버깅하여, 비슷한 일은 html에서도 할 수 있지 않나? 라고 생각하고 시도했습니다.

원래 디버깅이란 무엇입니까?

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에 HTMLHint를 설치하고 디버깅할 수 있도록 허용

애초에 어떻게든 린트란? 라고 사람은(자신도 그 부류입니다만)

ESLint 첫걸음

요점은 문법 에러등을 체크해 주는 툴의 html판.

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

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

npm으로 설치

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

절차

1. vscode 플러그인

2. 프로젝트 루트 디렉토리에 .htmlhintrc 추가

3. .htmlhintrc 에, 기본 규칙 를 기술.

* .htmlhintrc 는 추가하지 않고 HTMLHint가 작동합니다. 이 경우 기본 규칙이 적용되지만 규칙을 사용자 지정하려면 .htmlhintrc를 만들어야합니다. 자세한 내용은 공식 문서을 참조하십시오.

   {
  "tagname-lowercase": true,
  "attr-lowercase": true,
  "attr-value-double-quotes": true,
  "attr-value-not-empty": false,
  "attr-no-duplication": true,
  "doctype-first": true,
  "tag-pair": true,
  "empty-tag-not-self-closed": true,
  "spec-char-escape": true,
  "id-unique": true,
  "src-not-empty": true,
  "title-require": true,
  "alt-require": true,
  "doctype-html5": true,
  "id-class-value": "dash",
  "style-disabled": false,
  "inline-style-disabled": false,
  "inline-script-disabled": false,
  "space-tab-mixed-disabled": "space",
  "id-class-ad-disabled": false,
  "href-abs-or-rel": false,
  "attr-unsafe-chars": true,
  "head-script-disabled": true
}

결과

현시점에서 vscode 표준의 html.validate에서도 그렇게 불편은 하고 있지 않았지만, 의도적으로 넣었다는 점이 중요하다고 말하게 합니다. 웃음