JavaScript 확장 파트 2
2016년 10월 31일, Wade Anderson 작성, @waderyan_
Visual Studio Code는 기본적으로 JavaScript를 훌륭하게 지원합니다. 다른 언어와 마찬가지로 JavaScript도 언어 서비스에 의해 구동됩니다. JavaScript 언어 서비스는 TypeScript 팀에서 구현하여 JavaScript 개발자가 최고의 IntelliSense 경험을 활용할 수 있도록 합니다.
하지만 VS Code로 어떤 추가 기능을 사용할 수 있을까요? VS Code는 풍부한 확장성을 갖추고 있으며 많은 기능이 VS Code 확장 프로그램을 통해 제공됩니다. 이 게시물은 JavaScript 확장 프로그램에 대한 제 이전 게시물에 대한 후속편입니다.
팁: 확장 프로그램 보기 버튼을 클릭하고 검색 상자에 확장 프로그램 이름을 입력한 후 **설치**를 클릭하여 이러한 확장 프로그램 중 하나를 설치하세요. 확장 프로그램 탐색에서 자세히 알아보세요.
Chrome용 디버거
Marketplace - Chrome용 디버거
게시자 - Microsoft
프런트엔드를 개발할 때 편집기에서 통합 디버거의 가치를 못 느낄 수도 있습니다. 브라우저의 디버거를 사용하죠? 여기서 Chrome용 디버거 확장 프로그램이 유용합니다. 이 확장 프로그램을 사용하면 VS Code를 벗어나지 않고도 Google Chrome 브라우저 또는 Chrome 디버깅 프로토콜을 지원하는 기타 대상에서 JavaScript 코드를 디버깅할 수 있습니다. 더 이상 디버깅을 위해 컨텍스트를 전환할 필요가 없습니다!
다른 브라우저로 디버깅하는 것을 선호하시나요? Edge 및 Firefox용 확장 프로그램도 찾을 수 있습니다.
Git 프로젝트 관리자
Marketplace - Git 프로젝트 관리자
게시자 - Felipe Caputo
반드시 JavaScript 확장 프로그램은 아니지만, Git 프로젝트 관리자는 VS Code 팀에서 선호하는 확장 프로그램입니다. 이 확장 프로그램은 디렉터리(또는 여러 디렉터리)를 스캔하여 Git 저장소를 찾고 쉽게 전환할 수 있도록 합니다.
이 확장 프로그램을 사용하려면 먼저 설치한 다음 settings.json 파일에 다음 구성을 추가하세요.
"gitProjectManager.baseProjectsFolders": [
"/path/to/your/base/project/folders"
]
Beautify
Marketplace - Beautify
게시자 - HookyQR
내부적으로 VS Code는 js-beautify를 사용합니다. 이 확장 프로그램을 사용하면 .jsbeautifyrc 파일을 지정하여 JavaScript, CSS, Sass 및 HTML 코드의 형식 스타일을 지정할 수 있습니다.
새로운 포맷터 카테고리를 사용하여 Marketplace에서 더 많은 포맷터를 검색할 수 있습니다.
참고: 확장 프로그램 작성자를 위해 소스 코드 포맷터 모범 사례에 대한 블로그 게시물을 작업 중입니다. 곧 게시될 예정이니 계속 지켜봐 주세요.
Sublime Text 및 Atom용 키맵
이 섹션에는 두 개의 확장 프로그램이 있습니다. 하나는 Atom용이고 다른 하나는 Sublime Text용입니다. 이 편집기들을 사용해 본 적이 있다면 키보드 단축키를 기억하고 있을 것입니다. 이 확장 프로그램들은 Atom 및 Sublime Text의 키보드 단축키를 VS Code로 가져옵니다.
이 확장 프로그램들은 피드백을 받기 위해 미리 보기 상태입니다. 포함해야 할 단축키가 아직 많이 있으며, 놓친 부분이 있다면 쉽게 추가할 수 있습니다.
- 확장 프로그램의 GitHub 리포지토리로 이동하세요 (Atom 및 Sublime Text).
package.json파일을 엽니다 (Atom 및 Sublime Text).- 아래와 같이
package.json의contributes.keybindings섹션에 JSON 객체를 추가합니다 (Atom 및 Sublime Text). - 풀 리퀘스트를 엽니다.
{
"mac": "<keyboard shortcut for mac>",
"linux": "<keyboard shortcut for linux",
"win": "<keyboard shortcut for windows",
"key": "<default keyboard shortcut>",
"command": "<name of the command in VS Code"
}
다른 편집기나 IDE에 대한 키맵을 만들고 싶으신가요? contributes.keybindings 섹션 및 키 바인딩 문서의 지침을 따르기만 하면 됩니다.
키보드 단축키 비
VS Code에 Atom, Sublime Text 또는 다른 제품의 키보드 단축키 기능이 없다고 생각되시면, 이 GitHub 이슈 중 하나에 댓글을 남기거나 (Atom 및 Sublime Text) 새로운 이슈를 생성해주세요.
또한, 유용한 키보드 단축키를 추가하는 많은 확장 프로그램이 Marketplace에 있습니다.
자신만의 JavaScript 확장 프로그램 만들기
필요에 맞는 확장 프로그램을 찾지 못하셨나요? JavaScript 또는 TypeScript로 직접 만들 수 있습니다! 자세한 내용은 문서를 확인하세요.
Wade Anderson, VS Code 팀원
@waderyan_