JavaScript는 빠르게 발전하고 있으며 이를 둘러싼 도구 생태계도 마찬가지입니다.

개발자로서 귀하는 작업 흐름을 최대한 효율적이고 원활하게 만들고 싶어합니다. 이것이 Visual Studio Code(VS Code)가 들어오는 곳입니다.

저는 JavaScript 개발 경험을 크게 향상시켜 줄 VS Code 확장 5개를 직접 선택했습니다. 각 확장 프로그램이 기본을 넘어 코딩을 강화하는 방법을 자세히 살펴보겠습니다.

1. Quokka.js: 실시간 코드 피드백
편집기와 브라우저 사이를 계속 전환하지 않고도 코드에 대한 즉각적인 피드백을 보고 싶다면 이것이 바로 그것입니다. Quokka.js는 VS Code를 대화형 놀이터로 바꿔 편집기에 직접 실시간 결과를 표시합니다.

• VS Code 내에서 실시간 로깅이 가능하므로 더 이상 console.log가 복잡해지지 않습니다.
• 코드에 런타임 값을 직접 표시하여 디버그 속도를 높이는 데 도움이 됩니다.
• 모든 것을 다시 실행하지 않고 테스트 출력을 표시하므로 TDD(테스트 기반 개발)에 적합합니다.

제 팁은 소규모 코드 실험, 특히 새로운 JavaScript 기능을 테스트할 때 Quokka를 사용하는 것입니다. 환경을 오가며 소요되는 시간이 너무 많이 절약됩니다.

2. ESLint: 깨끗한 코드, 항상
이것은 당연하게 들릴 수도 있지만 ESLint를 사용하지 않는다면 Linting 이상의 기능을 놓치게 됩니다. 구성 가능한 규칙을 통해 버그를 조기에 포착하고 팀 전체에 일관된 코딩 표준을 적용할 수 있습니다.

• 일반적으로 배포 후에만 발견할 수 있는 일반적인 버그(우발적인 전역 변수 등)를 포착합니다.
• 엄격하거나 편안한 코딩 환경을 위한 사용자 정의 가능한 규칙입니다.
• Prettier와 잘 통합되므로 서식 지정과 Linting 중 하나를 선택할 필요가 없습니다.
• ESLint를 Airbnb의 JavaScript 스타일 가이드와 결합하여 가장 널리 인정받는 코딩 표준 중 하나를 즉시 시행하세요.

3. Path Intellisense: 가져오기에 더 이상 오타가 없습니다
긴 파일 경로를 입력하는 데 지치셨나요? 경로 Intellisense는 입력 시 파일 경로를 자동 완성하여 JavaScript 모듈의 가져오기 오류와 오타를 최소화합니다.

제 생각에는 이것이 생명의 은인이라고 생각합니다.

• 파일이나 이미지를 가져올 때 실시간으로 경로를 자동 완성합니다.
• 오타를 잡아서 가져오기가 중단될 위험을 줄입니다.
• jsconfig.json 또는 tsconfig.json에 정의된 별칭 및 사용자 정의 경로와 함께 작동합니다.

전문가 팁: 대규모 프로젝트의 경우 이를 작업공간 상대 경로와 결합하세요. 폴더 간을 매우 빠르게 탐색할 수 있습니다!

4. 브래킷 쌍 컬러라이저 2: 코드를 체계적으로 정리하세요
JavaScript는 중첩된 콜백, 프라미스, 화살표 함수로 인해 꽤 지저분해질 수 있습니다. 브래킷 쌍 컬러라이저 2개의 색상 코드가 브래킷과 일치하여 코드 블록을 더 쉽게 추적할 수 있습니다.

다음과 같은 이유로 설치할 가치가 있습니다.

• 중첩된 괄호 간의 시각적 구별.
• 테마에 맞게 색상을 맞춤 설정할 수 있습니다.
• 깊게 중첩된 개체나 함수와 같은 복잡한 코드 구조로 작업할 때 인지 부하를 줄입니다.

프로 팁: 단순한 괄호 이상으로 색상을 지정하도록 설정을 구성하세요. 이 도구는 대괄호, 중괄호 등을 처리할 수 있습니다!

5. 터보 콘솔 로그: 하나의 단축키를 사용한 빠른 디버깅
단순한 문제를 디버깅하기 위해 어디에나 console.log를 수동으로 입력하는 것은 구식입니다. Turbo Console Log는 키 입력을 통해 자동으로 삽입하고 쉽게 제거합니다.

시간이 절약되는 이유:

• 변수, 함수 매개변수 또는 표현식에 대한 console.log 문을 자동으로 생성합니다.
• 코드를 푸시하기 전에 모든 디버그 로그를 한 번의 클릭으로 정리하세요.
• 코드를 복잡하게 하지 않고 객체 속성이나 함수 출력을 빠르게 검사하는 데 적합합니다.

전문가 팁: 최고의 실시간 디버깅 및 피드백을 위해 Quokka.js와 함께 이 기능을 사용하세요.

다음 중 어떤 확장 프로그램을 사용하시나요? JavaScript 개발자가 좋아하는 다른 것이 있나요? 아래에 댓글을 남겨주세요!