nodejs가 콘솔에 강조 표시된 코드를 인쇄하는 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

nodejs가 콘솔에 강조 표시된 코드를 인쇄하는 방법에 대한 자세한 설명

青灯夜游

풀어 주다： 2021-05-12 10:46:28

앞으로

2443명이 탐색했습니다.

이 글에서는 nodejs가 강조 표시된 코드를 콘솔에 인쇄하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

nodejs가 콘솔에 강조 표시된 코드를 인쇄하는 방법에 대한 자세한 설명

코드가 실행되고 오류가 보고되면 오류를 인쇄합니다. 오류에는 스택 정보가 있으며 해당 코드 위치를 찾을 수 있습니다. 하지만 때로는 오류 위치의 코드를 더 직접적이고 정확하게 인쇄하고 싶을 때가 있습니다. [추천 학습: "nodejs tutorial"]

예:

nodejs가 콘솔에 강조 표시된 코드를 인쇄하는 방법에 대한 자세한 설명

이 작업은 @babel/code-frames를 사용하여 수행할 수 있습니다.

const { codeFrameColumns } = require(&#39;@babel/code-frame&#39;);

const res = codeFrameColumns(code, {
  start: { line: 2, column: 1 },
  end: { line: 3, column: 5 },
}, {
  highlightCode: true,
  message: &#39;这里出错了&#39;
});

console.log(res);

로그인 후 복사

더 마법적인 느낌이 드시나요? 인쇄는 무엇인가요? 위 코드의 코드 프레임은 무엇입니까?

이 글에서는 원리를 살펴보겠습니다.

주로 세 가지 질문에 답변해 드립니다.

해당 위치 코드를 표시하는 코드 프레임을 인쇄하는 방법(위 그림의 인쇄 형식)
구문 강조 구현 방법
색상 인쇄 방법 console

코드 프레임 인쇄 방법

먼저 강조 표시를 무시하고 다음 형식으로 인쇄를 구현해 보겠습니다.

nodejs가 콘솔에 강조 표시된 코드를 인쇄하는 방법에 대한 자세한 설명

어떤 아이디어가 있나요?

사실 소스 코드와 마크의 시작과 끝의 행과 열 번호를 전달하면 어느 행에 마커(마커)가 표시되는지, 어느 열에 표시되는지 계산할 수 있습니다. 그런 다음 각 행을 차례로 수행합니다. 이 줄에 표시가 없으면 그대로 유지됩니다. 이 줄에 표시가 있으면 시작 부분에 표시가 인쇄됩니다. “>”，并且在下面打印一行 marker "^", 마지막으로 표시된 줄에 오류 메시지가 인쇄됩니다.

@babel/code-frame의 구현을 살펴보겠습니다.

먼저 문자열을 각 줄의 배열로 분할한 다음 전달된 위치를 기준으로 마커의 위치를 계산합니다.

예를 들어 사진에서 두 번째 행의 1~12열, 세 번째 행의 0~5열입니다.

nodejs가 콘솔에 강조 표시된 코드를 인쇄하는 방법에 대한 자세한 설명

그런 다음 각 줄을 처리하면 이 줄에 표시가 있으면 마커 + 여백(줄 번호) + 코드 형식이 됩니다. 다음으로 마커 줄, 마지막 마커 줄을 인쇄합니다. 메시지를 인쇄합니다. 태그가 처리되지 않습니다.

nodejs가 콘솔에 강조 표시된 코드를 인쇄하는 방법에 대한 자세한 설명

최종 코드 프레임은 다음과 같습니다.

nodejs가 콘솔에 강조 표시된 코드를 인쇄하는 방법에 대한 자세한 설명

코드 프레임의 스플라이싱을 구현하고 당분간 강조 표시를 무시했습니다. 그러면 구문 강조를 어떻게 해야 할까요?

구문 강조 구현 방법

구문 강조를 구현하려면 코드에 대한 이해가 필요하지만, 단순히 강조만 한다면 어휘 분석이면 충분합니다. Babel은 동일한 작업을 수행하며 코드 강조 논리는 @babel/highlight 패키지에서 완성됩니다.

먼저 효과를 살펴보겠습니다.

const a = 1;
const b = 2;
console.log(a + b);

로그인 후 복사

위 소스코드는 토큰 배열로 나누어져 있습니다.

[
  [ &#39;whitespace&#39;, &#39;\n&#39; ], [ &#39;keyword&#39;, &#39;const&#39; ],
  [ &#39;whitespace&#39;, &#39; &#39; ],  [ &#39;name&#39;, &#39;a&#39; ],
  [ &#39;whitespace&#39;, &#39; &#39; ],  [ &#39;punctuator&#39;, &#39;=&#39; ],
  [ &#39;whitespace&#39;, &#39; &#39; ],  [ &#39;number&#39;, &#39;1&#39; ],
  [ &#39;punctuator&#39;, &#39;;&#39; ],  [ &#39;whitespace&#39;, &#39;\n&#39; ],
  [ &#39;keyword&#39;, &#39;const&#39; ], [ &#39;whitespace&#39;, &#39; &#39; ],
  [ &#39;name&#39;, &#39;b&#39; ],        [ &#39;whitespace&#39;, &#39; &#39; ],
  [ &#39;punctuator&#39;, &#39;=&#39; ],  [ &#39;whitespace&#39;, &#39; &#39; ],
  [ &#39;number&#39;, &#39;2&#39; ],      [ &#39;punctuator&#39;, &#39;;&#39; ],
  [ &#39;whitespace&#39;, &#39;\n&#39; ], [ &#39;name&#39;, &#39;console&#39; ],
  [ &#39;punctuator&#39;, &#39;.&#39; ],  [ &#39;name&#39;, &#39;log&#39; ],
  [ &#39;bracket&#39;, &#39;(&#39; ],     [ &#39;name&#39;, &#39;a&#39; ],
  [ &#39;whitespace&#39;, &#39; &#39; ],  [ &#39;punctuator&#39;, &#39;+&#39; ],
  [ &#39;whitespace&#39;, &#39; &#39; ],  [ &#39;name&#39;, &#39;b&#39; ],
  [ &#39;bracket&#39;, &#39;)&#39; ],     [ &#39;punctuator&#39;, &#39;;&#39; ],
  [ &#39;whitespace&#39;, &#39;\n&#39; ]
]

로그인 후 복사

토큰은 어떻게 나누어지나요?

일반적으로 어휘 분석은 유한 상태 자동 장치(DFA)이지만 여기서의 구현은 정규 일치를 통해 비교적 간단합니다.

js-tokens 이 패키지는 정규 표현식과 함수를 노출하며 정규 표현식은 다음 작업에 사용됩니다. 토큰 식별 , 많은 그룹이 있으며 함수는 다양한 그룹 첨자에 대해 다양한 유형을 반환하므로 토큰 식별 및 분류가 완료될 수 있습니다.

nodejs가 콘솔에 강조 표시된 코드를 인쇄하는 방법에 대한 자세한 설명