개요

IstanbulJS 생성된 HTML 보고서에 나열되지 않은 코드가 강조 표시되어 표시되지만 강조 표시되는 범위가 이상합니다.다양한 코드에 대한 HTML 보고서 생성, 각각의 하이라이트 범위에 대한 고찰은 다음과 같다.

환경

macOS 10.14.2

Node v11.1.0

React 16.7.0

create-react-app 2.1.2

간편하게 React 프로젝트에서 검증되었습니다.

저장소 복구

검증 환경을 재현하는 저장소는 다음과 같다.

JavaScript - [email protected]템플릿 사용

JavaScript - [email protected]템플릿 사용

TypeScript - [email protected]템플릿 사용

TypeScript - [email protected]템플릿 사용

코드 확인

HTML 보고서에서 하이라이트 대상이 된ステートメントブランチ関数에 대해 4가지 표기법의 코드를 사용하여 검증했다.

정규 축소와 줄 바꾸기를 적절하게 묘사한다.

Split-Normal에서 강조 표시된 부분을 여러 줄로 나누어 기술합니다.

네스티드 - ステートメント ブランチ 関数

Abuse-ステートメントブランチ関数를 한 줄로 묶고 같은 줄에 두 번 기술한다.

고찰

다음 아이콘 고찰JavaScript - [email protected]템플릿 사용에서 생성된 보고서의 내용을 사용합니다.

🤔 - 이상한 점을 느끼다.

💡 - 개선 방안을 제시하다.

🚫 - 검증할 수 없음을 나타냅니다.

Statement

Normal

Normal

🤔 문은 여러 문자를 강조 표시합니다.
💡 문장을 정확하게 강조표시합니다.

Split

Split

🤔 문장의 첫 줄만 강조 표시됩니다.
💡 여러 줄에 걸쳐 전체 문장을 강조 표시합니다.

Nested

Nested

🚫 중첩할 수 없습니다일반 강조 표시 위치. 따라서 검증할 수 없습니다.

Abuse

Abuse

🤔 💡 정규에서 언급한 내용와 같습니다.

Branch

Normal

Conditional Operator

🤔 문은 여러 문자를 강조 표시합니다.
💡 문장을 정확하게 강조표시합니다.

If

🤔 강조 표시else if 섹션의 첫 번째 줄만 표시됩니다.
💡 else if절의 전체if 키워드 이후)를 여러 줄에 걸쳐 강조 표시합니다.

ShortCircuitEvaluation

🤔 문은 여러 문자를 강조 표시합니다.
💡 문장을 정확하게 강조표시합니다.

Switch

🤔 case절과 default절은 모두 줄 끝에 강조 표시됩니다.
💡 : 이후의 공간과 평론은 절차로서 의미가 없기 때문에 :로 하이라이트를 끝낸다.

Split

Conditional Operator

🚫 분할할 수 없습니다일반 강조 표시 위치. 따라서 검증할 수 없습니다.

If

🤔 💡 정규에서 언급한 내용와 같습니다.

ShortCircuitEvaluation

🚫 분할할 수 없습니다일반 강조 표시 위치. 따라서 검증할 수 없습니다.

Switch

🤔 💡 정규에서 언급한 내용와 같습니다.

Nested

Conditional Operator

🤔 💡 정규에서 언급한 내용와 같습니다.

If

🤔 else 절이 강조표시되지 않습니다.
💡 if 전체 문장을 강조 표시합니다.

ShortCircuitEvaluation

🚫 중첩할 수 없습니다일반 강조 표시 위치. 따라서 검증할 수 없습니다.

Switch

🤔 default절이 없으면 case절이 강조 표시됩니다.
🤔 default절이 있으면 case절과 default절이 강조 표시되지 않습니다(노란색).
💡 여러 줄switch을 뛰어넘어 전체 문장을 강조 표시합니다.

Abuse

Conditional Operator

🤔 💡 정규에서 언급한 내용와 같습니다.

If

🤔 else if 절은 } 앞에 강조표시되고 아이콘 [E]은 강조표시됩니다.
💡 else if에서 }절의 고광선을 끝낸다.

ShortCircuitEvaluation

🤔 💡 정규에서 언급한 내용와 같습니다.

Switch

🤔 case절과 default절의 고광(노란색)은 문장의 고광(빨간색)으로 덮어씌워진다.
💡 case절과 default절의 고광은 :에서 끝난다.
🤔 두 문장을 한데 모아 강조표시합니다.
💡 각 문장을 독립적으로 강조 표시합니다.

Function

함수의 정의 부분을 설명합니다.

Normal

ArrowFunction

하면, 만약, 만약...
🤔 ( 에는 두 문자만 강조 표시됩니다.
💡 (에서 )로 강조 표시됩니다.
괄호 없음
🤔 매개변수 이름에서 시작하는 두 문자만 강조 표시됩니다.
💡 전체 매개변수 이름을 강조 표시합니다.

ClassMethod

🤔 클래스 메소드 이름의 시작 문자만 강조 표시됩니다.
💡 클래스 메소드 이름에서 )로 강조 표시됩니다.

FunctionDeclaration

🤔 함수 이름에서 ( 까지만 강조표시됩니다.
💡 function 키워드에서 )로 강조 표시됩니다.

FunctionExpression

무명 함수
🤔 function 키워드가 시작되는 두 문자만 강조 표시됩니다.
💡 function 키워드에서 )로 강조 표시됩니다.
명명 함수의 경우
🤔 함수 이름에서 ( 까지만 강조표시됩니다.
💡 function 키워드에서 )로 강조 표시됩니다.

Split

ArrowFunction

하면, 만약, 만약...
🤔 (부터 첫 번째 줄만 강조표시됩니다.
💡 (부터 )까지 여러 줄에 걸쳐 모두 강조표시됩니다.
괄호 없음
🚫 분할할 수 없습니다일반 강조 표시 위치. 따라서 검증할 수 없습니다.

ClassMethod

🤔 클래스 메소드 이름의 시작 문자만 강조 표시됩니다.
💡 클래스 메소드 이름부터 )까지 여러 줄을 뛰어넘어 모두 강조표시됩니다.

FunctionDeclaration

🤔 함수 이름에서 시작하는 첫 줄만 강조 표시됩니다.
💡 function 키워드부터 )까지 여러 줄에서 모두 강조표시됩니다.

FunctionExpression

무명 함수
🤔 function 키워드가 시작되는 두 문자만 강조 표시됩니다.
💡 function 키워드부터 )까지 여러 줄에서 모두 강조표시됩니다.
명명 함수의 경우
🤔 함수 이름에서 시작하는 첫 줄만 강조 표시됩니다.
💡 function 키워드부터 )까지 여러 줄에서 모두 강조표시됩니다.

Nested

ArrowFunction

🤔 문장의 첫 줄만 강조 표시됩니다.
💡 여러 줄에 걸쳐 전체 문장을 강조 표시합니다.

ClassMethod

🚫 클래스 방법을 삽입할 수 없기 때문에 검증할 수 없습니다.

FunctionDeclaration

🤔 문장의 첫 줄만 강조 표시됩니다.
💡 여러 줄에 걸쳐 전체 문장을 강조 표시합니다.

FunctionExpression

🤔 문장의 첫 줄만 강조 표시됩니다.
💡 여러 줄에 걸쳐 전체 문장을 강조 표시합니다.

Abuse

ArrowFunction

🤔 💡 정규에서 언급한 내용와 같습니다.

ClassMethod

🤔 💡 정규에서 언급한 내용와 같습니다.

FunctionDeclaration

🤔 💡 정규에서 언급한 내용와 같습니다.

FunctionExpression

🤔 💡 정규에서 언급한 내용와 같습니다.

총결산

본고는 IstanbulJS가 생성한 HTML 보고서의 하이라이트 문제를 검증하였다.다음 부기에서는 고광 범위의 대체 방안과 이 방안을 실현하는 코드를 표시했다.