VS CODE에서 ESLINT를 사용한 린트 및 서식 지정

JavaScript 도구는 훌륭합니다! 이 기사에서는 ESLint 및 Visual Studio Code를 사용하여 코드 형식을 지정하고 개선 방법에 대한 제안을 제공하는 방법을 알아봅니다!

ESLint는 코드의 형식을 지정하고 코드를 개선하는 방법을 알려줍니다!

프로젝트 설정

간단한 프로젝트를 시작해 보겠습니다. 나는 하나가있다 자바스크립트 파일을 시작합니다. 서식의 관점에서 보면 좋지 않은 몇 가지가 있음을 알 수 있습니다.

따옴표의 일관성 없는 사용
세미콜론의 일관성 없는 사용
간격

JavaScript 파일이 있으면 이제 이 프로젝트를 다음으로 초기화해야 합니다. NPM 프로젝트 실행하여 npm 초기화 . 모든 기본값을 수락하겠습니다.

ESLint 설정

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

환자 (ptoy)

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

한 가지 질문은 당신이 따르고 싶은 스타일 가이드가 될 것입니다. 즉, 새로 시작하시겠습니까, 아니면 기존 구성 템플릿을 사용하시겠습니까? 엄청나게 인기 있는 곳은 제가 아래에서 선택한 에어비앤비입니다.

또한 추가 패키지를 설치하라는 메시지가 표시됩니다. 예를 선택합니다.

완료 후 새 제품이 있어야 합니다. .eslintrc 프로젝트의 파일입니다. 내 것은 JSON 초기화하는 동안 내 대답을 기반으로 파일.

작동 중인 ESLint

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

ESLint를 통합하려면 비주얼 스튜디오 코드 , Visual Studio Code용 ESLint 확장을 설치해야 합니다.

이제 JavaScript 파일을 다시 보면 다채로운 구불구불한 부분이 모두 눈에 띕니다. suigglies는 심각도에 따라 색상으로 구분됩니다. 몇 가지 문제를 살펴보겠습니다.

첫 번째 줄에는 큰따옴표 대신 작은따옴표를 사용해야 한다고 나와 있습니다. 잠시 후 이 문제를 해결하겠습니다.

다음 줄 5에서 나는 console.log() 메시지를 코드에 남겨서는 안 된다는 메시지를 받았습니다.

마지막으로 7행에서 절대 사용되지 않는 변수(화살표 함수)를 정의했다는 메시지가 나타납니다. 코드가 어디에도 사용되지 않는다면 제거해야 합니다. 이러한 종류의 메시지는 데드 코드를 찾고 제거하는 데 유용합니다!

저장 시 서식 지정

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

설정 메뉴에서 검색할 수 있습니다. 슬링 . 결과에 다음 확인란이 표시되어야 합니다. ESLint: 저장 시 자동 수정. 이 항목이 선택되어 있는지 확인하십시오.

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

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

ESLint 구성 사용자 정의

귀하와 귀하의 팀 요구 사항에 맞게 ESLint 구성을 완전히 사용자 정의할 수 있습니다!
말할 필요도 없이 우리는 여전히 console.log() 메시지에 대한 몇 개의 구불구불한 메시지가 남아 있습니다. 이것이 Node 앱이고 나중에 디버깅을 위해 로그 문을 남겨두고 싶기 때문에 그것에 대해 별로 신경 쓰지 않는다고 가정해 봅시다. 이를 허용하도록 ESLint 구성 파일을 사용자 정의할 수 있습니다.

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

VS Code는 규칙 이름 입력을 시작할 때 지능을 제공하기 때문에 훌륭합니다. 예를 들어 입력하기 시작합니다. 콘솔 그리고 나는 본다 아니요 - 콘솔 옵션 팝업;

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

오류
끄다
경고하다

예상할 수 있듯이 오류는 빨간색 구불구불한 모양으로 표시되고 경고는 노란색으로 표시되고 아무 것도 표시되지 않습니다. 이 규칙을 해제합시다.

야! 로그 문 아래에 더 이상 구불구불한 부분이 없습니다!

일부 규칙은 심각도 수준과 값의 두 가지 정보가 필요한 경우 조금 더 복잡합니다. 한 가지 예는 작은 따옴표와 큰 따옴표 중에서 선택하는 것입니다. 선택한 유형의 따옴표와 심각도 수준을 모두 전달하려면 두 문자열을 다음과 같이 배열에 넣을 수 있습니다.

마무리

저는 특히 Visual Studio Code와 함께 JavaScript용 도구에 대해 쓰는 것을 좋아합니다. 도구가 코드의 정말 지루한 부분을 자동화하는 동시에 모범 사례를 확인할 수 있다는 사실은 매우 흥미진진합니다. 더 나은 코드를 더 빨리 작성하는 데 도움이 되길 바랍니다!

#비주얼 스튜디오 #자바스크립트 #웹 개발

Planet Alpha

VS Code에서 ESLint를 사용한 린트 및 서식 지정