분류 기타

VS 코드에서 ESLint를 사용한 린팅(Linting) 및 서식

컨텐츠 정보

  • 조회 440 (작성일 )

본문

JavaScript 용 툴링은 특히 Visual Studio Code와 쌍을 이룰 때 활용하기에는 너무 좋습니다! 최근 기사에서 Visual Studio Code의 Prettier를 사용한 코드 형식 지정에 대해 게시하여 자동으로 코드 형식을 지정할 수 있도록 하였습니다. ESLint는 그 이상을 할 수 있습니다!


https://scotch.io/tutorials/linting-and-formatting-with-eslint-in-vs-code 


ESLint는 코드를 포맷하고 더 나은 방법을 알려줄 수 있습니다!


ESLint는 코드를 형식화 할 수 있을 뿐만 아니라 코드를 분석하고 개선 방법을 제안 할 수도 있습니다. ESLint는 구성 가능하므로 원하는 형식 문제를 선택할 수 있습니다. 한 번 보겠습니다!


프로젝트 설정 


간단한 프로젝트부터 시작하겠습니다. 시작할 JavaScript 파일이 하나 있습니다. 형식화 관점에서 보기에 좋지 않은 것이 몇 가지 있습니다.

  • 일관되지 않은 따옴표 사용
  • 세미콜론의 일관성 없는 사용
  • 간격

ingy5gpfzvjbkil8qoxj.png 


JavaScript 파일이 완성되면 npm init를 실행하여 이 프로젝트를 NPM 프로젝트로 초기화해야 합니다. 모든 기본값을 그대로 사용하겠습니다.

xmimewi1cgvcr9azvoy8.png 


ESLint 설정 


JavaScript 파일이 포함 된 NPM 프로젝트를 사용하여 ESLint 설정을 시작할 수 있습니다. 먼저 npm install -g eslint를 실행하여 시스템에 전역으로 설치해야 합니다.


nqcpddnig4trlgniipof.png 


이제 eslint --init를 실행하여 해당 패키지를 사용하여 ESLint 구성을 초기화 할 수 있습니다. 최상의 구성을 만들기 위해 프로젝트에 대한 몇 가지 다른 질문이 표시됩니다.


어떤 스타일 가이드를 따르고 싶은지에 대한 질문이 있습니다. 즉, 새로 시작하거나 기존 구성 템플릿을 사용 하시겠습니까? 엄청나게 인기 있는 것은 에어 비앤비 (Airbnb)에서 내가 선택한 것입니다.


cubil4tc2ra35g4avhvk.png 


추가 패키지를 설치하라는 메시지도 표시됩니다. 예를 선택하십시오.


fffroctypdrtp1yy1pp8.png 


완료되면 프로젝트에 새로운 .eslintrc 파일이 있어야 합니다. 광산은 초기화 중 내 대답을 기반으로 하는 JSON 파일입니다.

bpzicbfjtmxpxfmrehag.png 


ESLint 작동 


구성 파일이 있으면 여전히 우리를 위해 아무것도 하지 않는 것에 놀랄 수 있습니다. JavaScript 파일을 백업하면 여전히 동일하게 보입니다.


ingy5gpfzvjbkil8qoxj.png 


ESLint를 Visual Studio Code에 통합하려면 Visual Studio Code 용 ESLint 확장을 설치해야 합니다.


wc6ntggbhutxy3atrwmf.png 


이제 JavaScript 파일을 다시 살펴보면 화려한 색채가 모두 나타납니다. Suigglies는 심각도에 따라 색상으로 구분됩니다. 몇 가지 문제를 살펴 보겠습니다.


znfp8pgp1iboeppw66fx.png 


첫 번째 줄에서는 큰 따옴표 대신 작은 따옴표를 사용해야 한다고 알려줍니다. 이 문제를 잠시 후에 수정하겠습니다.


vqttokycaesiu3c9qa1o.png 


다음 줄 5에서 코드에 console.log() 메시지를 남겨 두지 말아야 한다는 메시지가 나타납니다.


ek9x54f605dagslx3uz0.png 


마지막으로, 7 행에서 절대 사용되지 않는 변수 (화살표 함수)를 정의했다는 메시지가 표시됩니다. 코드가 어디에도 사용되지 않으면 제거해야 합니다. 이런 종류의 메시지는 죽은 코드를 찾아서 제거하는 데 좋습니다!


jiui4pk1rgmi7dskoyhx.png 


저장시 포맷 


저장할 때마다 코드를 포맷 하도록 ESLint를 설정하십시오!


이제 구불 구불 한 메시지 중 일부를 읽었으므로 VS Code를 조정하여 ESLint에 저장할 때마다 발생할 수 있는 모든 문제 (주로 형식화)를 수정하도록 할 수 있습니다. 설정 메뉴를 열려면 왼쪽 하단의 톱니 바퀴 아이콘을 누른 다음 설정을 선택할 수 있습니다.


설정 메뉴와 함께 eslint를 검색 할 수 있습니다. 결과에 ESLint : 자동 수정시 저장 확인란이 표시됩니다. 이것이 체크되어 있는지 확인하십시오.


mycmb9lgf1joqvp6r9jq.png 


이제 JavaScript 파일로 돌아가서 저장하십시오. 몇 가지 변경 사항이 표시되고 구불 구불 한 부분이 사라졌습니다. 다음은 수정 된 형식 중 일부입니다.

  • 작은 따옴표의 일관된 사용
  • 함수 내부의 적절한 들여 쓰기
  • 세미콜론의 일관된 사용

p29vcbdux0celdw22ubx.png 


ESLint 구성 사용자 정의 


ESLint 구성을 사용자 및 팀 요구에 맞게 사용자 정의 할 수 있습니다!


말할 것도 없이, 우리는 여전히 몇 가지 구불 구불 한 메시지를 남겼습니다. 하나는 console.log () 메시지입니다. Node 앱이므로 나중에 디버깅을 위해 로그 문을 남겨두고 싶습니다. 이를 허용하도록 ESLint 구성 파일을 사용자 정의 할 수 있습니다.


규칙 섹션으로 이동하여 구성을 사용자 정의 할 수 있습니다. 키-> 값 쌍을 입력해야 합니다. 여기서 키는 규칙의 이름입니다.


VS 코드는 규칙 이름 입력을 시작할 때 지능을 제공하기 때문에 훌륭합니다. 예를 들어 콘솔을 입력하기 시작하면 콘솔 없음 옵션 팝업이 나타납니다.


dwdnnlhn7xgj7tifg1eq.png 


그러면 값이 문제의 심각도 수준이 됩니다. 세 가지 선택이 있습니다.

  • error
  • off
  • warn

예상 한대로 오류는 빨간색 구불 구불로 이어지고 노란색으로 경고하고 아무 것도 표시하지 않습니다. 이 규칙을 해제하겠습니다.


jz61gccjdbjqssl3ammo.png 


예이! 더 이상 우리의 통나무 설명 아래에 구불 구불 한 소리가 없습니다!


nxd68nsmzh3hcmoos34f.png 


일부 규칙은 심각도 수준과 값이라는 두 가지 정보가 필요한 경우 좀 더 복잡합니다. 작은 따옴표와 큰 따옴표를 선택하는 것이 한 예입니다. 선택한 따옴표 유형과 심각도 수준을 모두 전달하기 위해 두 문자열을 배열에 넣을 수 있습니다.


vzzmdkmuxpomgrykkz2h.png 


마무리 


특히 Visual Studio Code와 함께 JavaScript 용 툴링에 대해 글을 쓰는 것을 좋아합니다. 툴이 코드의 정말 지루한 부분을 자동화하는 동시에 모범 사례를 확인하는 것이 매우 흥미롭습니다. 이것이 더 나은 코드를 더 빨리 작성하는 데 도움이 되기를 바랍니다.