웹 개발자를 위한 16가지 상위 VS 코드 확장

Microsoft Visual Studio Code(VS Code)는 소프트웨어 개발자를 위한 최고의 코드 편집기 중 하나입니다. 출시 이후, 그 인기는 안정적인 플랫폼을 제공할 뿐만 아니라 Microsoft가 기본적으로 제공하는 확장성 덕분에 급증했습니다. 확장 마켓플레이스는 개발자가 VS Code를 자신의 꿈의 개발 환경으로 사용자 지정할 수 있는 추가 기능 및 기능의 풍요로움입니다. 오늘 사용할 수 있는 최고의 VS Code 확장 기능 중 일부를 놓치지 않도록 분류해 보겠습니다.

1. Sublime Text Keymap 및 설정 가져오기

Sublime Text Keymap and Settings Importer라는 적절한 제목이 우리 목록의 최상위에 있습니다. 제목이 충분히 설명적이지 않은 경우 이 확장을 통해 기존 Sublime Text 키맵 및 설정을 가져와서 VS Code를 기본값으로 사용하도록 원활하게 전환할 수 있습니다. 많은 사람들이 Sublime을 사랑하고 몇 년을 사용했기 때문에 VS Code가 해당 편집기에서 얻은 근육 메모리를 유지하도록 하는 것이 매우 합리적입니다.

2. 자바스크립트(ES6) 코드 조각

동일한 스니펫을 계속해서 반복하면 JavaScript(또는 모든 코드)를 입력하는 것이 번거로울 수 있습니다. 이 확장을 사용하면 기본적으로 자주 사용하는 코드 조각에 대한 바로 가기를 작성할 수 있습니다. 트리거되면 스니펫은 단순히 텍스트를 대체하고 문서에 직접 삽입합니다.

3. 브라켓 페어 컬러라이저 2

코딩하는 언어에 관계없이 대괄호는 아마도 그 언어의 주요 부분이 될 것입니다. 그리고 그것들을 똑바로 유지하는 것은 두통이 될 수 있습니다. 그러나 이 VS Code 확장을 사용하면 일치하는 쌍을 색상으로 구분하여 문제를 완화하고 편집기가 아닌 코드 자체가 작동하도록 할 수 있습니다.

4. ESLint

여러 가지면에서 ESLint 자바 스크립트에 대한 린터입니다. 오류를 포착하고 즉각적인 피드백과 경고를 제공하는 것은 팀의 코드를 깨끗하게 유지하는 데 필수적이며 ESLint보다 JS에서 이를 수행하는 더 좋은 방법은 없습니다. 가능한 한 빨리 이것을 설치하는 것이 좋습니다.

5. 프로젝트 매니저

꽤 자주 발생하는 VS Code의 문제는 서로 다른 프로젝트 간에 교환하는 방법입니다. 기본적으로 흐름은 가장 직관적이지 않습니다. 따라서 프로젝트 관리자는 사이드바에 메뉴를 제공하여 다른 폴더와 Git 프로젝트를 쉽게 교환할 수 있도록 저장하는 데 사용할 수 있는 메뉴를 제공하여 해당 문제를 해결합니다. 이것은 삶의 질을 향상시키는 것만큼 편집기 개선이 아닙니다.

6. 브라우저 미리보기

웹 개발의 더 불쾌한 요소 중 하나는 테스트를 위해 다른 브라우저에서 콘텐츠를 로드하고 새로 고치는 것입니다. 브라우저 미리보기는 새로운 Chrome 프로세스에서 VS Code 내부의 작업에 대한 확실한 미리보기를 제공하여 이 작업을 수행하는 데 필요한 양을 제한하는 데 도움이 됩니다.

7. 더 예쁘다

우리 모두는 더 예쁜 코드를 원합니다. 따라서 우리는 모두 Prettier를 설치하여 이를 처리해야 합니다. 설명에서는 Prettier를 "의견이 있는 코드 포맷터로, 코드를 구문 분석하고 필요한 경우 코드를 래핑하는 최대 줄 길이를 고려하는 자체 규칙으로 코드를 다시 인쇄하여 일관된 스타일을 적용합니다."라고 설명합니다. 모든 언어 또는 프로젝트에 사용하고 싶지 않을 수 있으므로 원하는 대로 사용자 지정할 수 있도록 구성 설정이 많이 있습니다.

8. 깃링크

우리는 단순성 때문에 gitlink를 좋아합니다. Git 확장 기능이 많이 있지만 gitlink의 장점 중 하나는 간단하고 한 가지만 수행한다는 것입니다. 그리고 그것은 잘합니다. 코드 조각을 강조 표시하기만 하면 gitlink가 해당 특정 조각의 온라인 리포지토리로 이동합니다. 원격으로 호스팅되는 위치에 관계없이 리포지토리로 빠르게 이동하는 것은 매우 유용합니다.

9. 더 나은 댓글

코드에 주석을 추가하는 것은 개발자가 가질 수 있는 가장 중요한 습관 중 하나입니다. 그 이상으로 코드를 잘 주석 처리하는 것은 모든 컴퓨터 공학 교실과 코딩 부트캠프에서 가르쳐야 하는 기술입니다. 즉, Better Comments는 모든 사람이 필요로 하는 VS Code Extensions 중 하나입니다. 이름을 믿으면 코드에 더 나은 주석 을 남길 수 있기 때문입니다. 질문, 느낌표, 주석 처리된 코드, 쿼리, 경고, 하이라이트 및 TODO를 구분할 수 있는 바로 가기를 통해 이 확장 기능은 당신의 삶을 더 쉽게 만들 뿐만 아니라 팀의 삶을 더 쉽게 만들어 줄 것입니다. 그리고 프로젝트에서 당신을 뒤따르는 모든 개발자. 우리는 이것을 충분히 추천할 수 없습니다.

10. VS 코드 아이콘

확장을 사용하여 VS Code를 사용자 지정하는 주요 부분은 실제 사용자 지정입니다. 기능 변경뿐만이 아닙니다. VS Code 아이콘을 사용하면 편집기가 좀 더 다채롭고 탐색하기 쉬워집니다. 파일 시스템은 다양한 파일 형식을 나타내는 아이콘으로 표시되며, 문서 탭 자체뿐만 아니라 탐색기에도 표시됩니다. 복잡한 파일 시스템을 통해 작업을 훨씬 쉽게 하고 두통을 덜 수 있습니다. 말 그대로 가끔. 아이콘이 읽기 쉽기 때문에 눈의 피로와 두통을 예방할 수 있습니다. 따라서 건강을 위해 VS Code 아이콘을 설치하십시오.

11. 자동 닫기 태그

우리일 수도 있지만 모든 언어에 대해 닫는 태그를 입력하는 것은 매우 번거로운 작업이 됩니다. 키 입력을 약간 느슨하게 만드는 끝에 추가하는 것이 있습니다. 절대 두려워하지 마. 자동 닫기 태그는 우리의 삶을 더 쉽게 만들어줍니다. 그래서 우리는 당신을 더 쉽게 만들고 싶습니다. 그것은 간단하고 쉽습니다. 그리고 당신은 그들 사이에 계속해서 타이핑을 할 수 있고 단순히 다음 줄이나 그 줄의 끝으로 가는 방법을 키스트로크할 수 있습니다. 이것을 설치하고 수동으로 태그를 닫는 체조에서 손가락을 쉬십시오.

12. 채색하다

CSS는 훌륭합니다. CSS에서 색상을 선택하는 것은 아닙니다. 16진법 코드와 RGBA 값을 다룰 때 사이트에 대해 설정한 팔레트에 대한 정신적인 그림을 얻는 것이 때때로 어렵습니다. 이 확장은 파일 내부에서 사용하는 모든 색상 코드에 대한 시각적 메모를 제공하여 이를 완화하는 데 도움이 됩니다. 텍스트 자체 내에서 사용 중인 색상을 하이라이트로 볼 수 있으므로 견본 및 색상 선택기 등에서 계속 앞뒤로 교체할 필요가 없습니다.

13. 폴라코드

Polacode는 코드 편집기를 위한 Polaroid 카메라와 같습니다. 코드 스냅샷을 더 깔끔하고 쉽게 만들 수 있도록 설계된 이 기능은 올바른 코드를 원하는 모든 튜토리얼 작성자에게 필수입니다.

14. 깃렌즈

무엇이 GitLens를 그렇게 훌륭하게 만드는지 완전히 설명하기는 어렵습니다. Git과 VS Code가 서로를 염두에 두고 설계된 것처럼 작동하며 명령줄 계층 구조를 통해 작업하는 대신 팀 Git 작업에서 많은 혼란을 없애주는 시각화와 통찰력을 얻을 수 있습니다. 호버를 통해 사물을 보고, 최근 변경 사항 및 주석, VS Code 자체 내 비교 보기, 히트맵, 라인 기록 등을 볼 수 있습니다. 기본적으로 완벽한 Git 확장이며 즉시 설치해야 한다고 생각합니다.

15. 라이브 서버

IDE 내에서 로컬 개발 서버를 시작하고 실시간으로 작업하고 싶었던 적이 있습니까? 그 질문에 어떻게 답했든 간에 Live Server에 기회를 주고 싶을 것입니다. 그것이 바로 당신이 그것으로 할 수 있는 일이기 때문입니다. Local by Flywheel 및 MAMP와 같은 제품의 필요성을 완전히 제거하지는 못하지만 많은 상황에서 제품의 필요성을 확실히 줄입니다.

16. 미화하다

Beautify는 인기 있는 js-beautify 를 사용하여 JavaScript를 멋지고 깔끔하게 유지합니다. 파선과 이상한 간격 및 들여쓰기에 대해 걱정하지 마십시오. 버튼을 클릭하기만 하면 모든 코드가 클로즈업될 준비가 됩니다(위에서 Polacode를 사용할 수도 있음).

결론

이 목록은 수천 개의 항목이 될 수 있습니다. 사실, 다른 시간에 활성화 및 비활성화하는 수백 개의 다른 확장이 설치되어 있는 사람이 있을 것입니다. 그러나 우리는 이것이 설치하고 시장을 더 깊이 파고들면서 원하는 것을 배울 수 있는 VS Code 확장이라고 생각합니다.

VS Code 확장은 무엇을 사용합니까? 댓글로 알려주세요!

SVIATLANA SHEINA/Shutterstock.com의 기사 특집 이미지