웹 개발을 위한 22개의 실용적인 VSCode 플러그인

관련 권장 사항: "vscode 기본 튜토리얼"

1.chrome용 디버거

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

저를 믿으십시오. JavaScript 디버깅은 단순히 console.log()를 작성하는 것 이상입니다(이 방법이 가장 일반적으로 사용됨). Chrome에는 더 나은 디버깅 환경을 위한 몇 가지 기능이 내장되어 있습니다. 이 플러그인을 사용하면vscode에서 이러한 디버깅 기능을 전부(또는 거의 모두) 사용할 수 있습니다.

자세한 내용은 다음을 참조하세요.

"Chrome 및 Visual Studio 코드에서 JavaScript 디버깅":

https://scotch.io/tutorials/debugging-javascript-in-google-chrome-and -visual-studio-code

2. Javascript(ES6) 코드 조각

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

나는 조각 플러그인을 좋아합니다. 동일한 코드를 반복해서 입력할 필요가 없다고 생각합니다. 이 플러그인은 널리 사용되는(ES6) JavaScript 코드 조각을 제공합니다.

참고...es6javascript 기능을 사용하지 않는 경우 지금 사용하세요!

3. ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

더 나은 코드를 작성하고 싶으신가요? 팀 전체가 일관된 형식을 사용해야 합니까? ESLint를 설치합니다. 이 플러그인은 자동으로 코드 형식을 지정하고 오류나 경고를 표시하도록 구성할 수 있습니다. 적절한 구성을 갖춘 VS Code는 이러한 팁을 표시할 수 있습니다.

4. 라이브 서버

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

코드 편집기에서 변경하고, 브라우저로 전환하고, 새로 고쳐 변경 사항을 확인하세요. . 개발자에게는 끝없는 루프입니다. 하지만 변경 사항을 적용할 때 브라우저가 자동으로 새로 고쳐지면 어떻게 될까요? 라이브 서버가 들어오는 곳입니다!

또한 로컬 서버에서 애플리케이션을 실행합니다. 일부 사항은 애플리케이션이 서버에서 실행 중일 때만 테스트할 수 있으므로 이는 장점입니다.

5. 브래킷 쌍 Colorizor

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

브래킷은 개발자의 생존을 방해하는 재앙입니다. 중첩된 코드가 많으면 어떤 대괄호가 서로 일치하는지 확인하는 것이 거의 불가능합니다. 브래킷 쌍 Colorizor(예상대로)는 브래킷 색상을 일치시켜 코드를 더 읽기 쉽게 만듭니다. 나를 믿으십시오. 당신은 그것을 원합니다!

6. 태그 자동 이름 바꾸기

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

HTML에서 요소의 이름을 바꿔야 합니까? "자동 이름 바꾸기 태그"를 사용하면 시작 또는 끝 태그의 이름만 바꾸면 나머지 태그의 이름은 자동으로 변경됩니다. 간단하지만 효과적입니다!

7. Quokka

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

JavaScript를 테스트할 빠른 장소가 필요하십니까? 나는 Chrome에서 콘솔을 열고 거기에 몇 가지 코드를 입력하곤 했지만 단점이 많습니다. Quokka는 VS Code에서 JavaScript(및 TypeScript) 스크래치패드를 제공합니다. 즉, 즐겨 사용하는 편집기에서 코드 조각을 테스트할 수 있습니다!

8. Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

대규모 프로젝트에서는 특정 파일 이름과 파일 위치를 기억하세요. 디렉토리는 번거로울 수 있습니다. 이 플러그인은 스마트 팁을 제공합니다. 따옴표 안에 경로를 입력하기 시작하면 디렉터리 및 파일 이름에 대한 스마트 프롬프트가 표시됩니다. 이렇게 하면 파일을 탐색하는 데 많은 시간을 절약할 수 있습니다 :)

9. 프로젝트 관리자

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

제가 싫어하는 한 가지는 VS Code에서 프로젝트 간에 전환하는 것입니다. 파일 탐색기를 열고 내 컴퓨터에서 항목을 찾아야 할 때마다. 그러나 이는 Project Manager를 적용하면 달라집니다. 이 플러그인을 사용하면 프로젝트의 사이드 메뉴에서 추가 메뉴를 열 수 있습니다. 프로젝트 간을 빠르게 전환하고, 즐겨찾기를 저장하고, 파일 시스템에서 Git 프로젝트를 자동으로 감지할 수 있습니다.

여러 프로젝트를 개발하는 경우 이는 정리된 상태를 유지하고 효율성을 높이는 좋은 방법입니다. 편집기 구성이 지원됩니다. 작동 방식은 다음과 같습니다. 편집기에서 지원하는 저장소에 구성 파일을 저장합니다. 이 경우 이러한 프로필을 준수하도록 VS Code에 확장을 추가해야 합니다. 설정이 매우 쉽고 팀 프로젝트에 적합합니다.

11. Sublime Text Keymap

https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

당신은 열렬한 Sublime 사용자이며 전환하고 싶지 않습니다. VS 코드로? 이 확장 프로그램은 Sublime의 단축키와 일치하도록 모든 단축키를 변경하여 전환을 원활하게 만듭니다. 이제 전환하지 않은 이유는 무엇입니까?

12. 브라우저 미리보기

https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

저는 위에서 언급한 Live Server 확장을 좋아하지만, 측면에서는 편의상 이 확장은 한 단계 더 나아갑니다. VS Code 내에서 실시간 새로고침 미리보기를 제공합니다. 작은 변화를 보기 위해 더 이상 브라우저를 볼 필요가 없습니다!

13. Git Lens

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

많은 Git 플러그인이 있지만 그중 하나가 가장 강력하고 기능이 가장 많습니다. 경고, 행 및 파일 기록, 커밋 검색 등에 대한 정보를 얻을 수 있습니다. Git 워크플로우에 도움이 필요하다면 이 플러그인으로 시작해 보세요!

14. Polacode

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

블로그와 트위터에서 볼 수 있는 아름다운 코드 스크린샷을 아시나요? 글쎄, 아마도 그들은 Polacode에서 왔을 것입니다. 사용하기 매우 쉽습니다. 코드 조각을 클립보드에 복사하고, 확장 프로그램을 열고, 코드를 붙여넣고, 이미지 저장을 클릭하세요!

15. 더 예뻐짐

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

코드 포맷에 시간을 허비하지 마세요... 완료되었습니다. 앞서 서식 지정 및 검사를 제공하는 ESLint에 대해 언급했습니다. 린트 검사가 필요하지 않다면 Prettier를 선택하세요. 설정이 매우 쉽고 저장 시 자동으로 코드 형식을 지정하도록 구성할 수 있습니다.

16. Better Comments

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

이 플러그인은 다양한 유형의 댓글을 다양한 색상으로 표시합니다. 의미를 다르게 만들어 나머지 코드와 차별화되도록 만듭니다. 저는 이것을 팁으로 사용해왔습니다. 아직 완료되지 않은 작업이 있다는 큰 주황색 메시지를 무시하기는 어렵습니다.

질문, 알림, 하이라이트에 대한 색상 코드도 있습니다. 나만의 맞춤 항목을 추가할 수도 있습니다!

17. Git 링크

https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink

Github에서 작업 중인 파일을 보고 싶다면 이 플러그인이 적합합니다. 설치가 완료되면 파일을 마우스 오른쪽 버튼으로 클릭하면 Github에서 파일을 열 수 있는 옵션이 표시됩니다. Git Lens 플러그인을 사용하지 않는 경우 이 플러그인은 기록, 브랜치 버전 등을 확인하는 데 유용합니다.

18. VS Code 아이콘

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

VS Code에서 아이콘을 사용자 정의할 수 있다는 것을 알고 계셨나요? 설정을 보면 "파일 아이콘 테마" 옵션이 표시됩니다. 여기에서 사전 설치된 아이콘 중에서 선택하거나 아이콘 팩을 설치할 수 있습니다. 이 플러그인은 정말 귀여운 아이콘 팩을 제공하며 1,100만 명이 사용하고 있습니다!

19. 머티리얼 아이콘 테마

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Google 머티리얼 디자인의 팬이신가요? 자, 이 "재료 테마" 아이콘 팩을 확인해 보세요. 수백 가지의 다양한 아이콘이 있으며 보기에도 좋습니다!

20. 설정 동기화

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

개발자(저 포함)는 개발 환경을 맞춤화하는 데 많은 시간을 보냅니다. 특히 텍스트 편집기. "Settings Sync" 플러그인을 사용하면 Github에 설정을 저장할 수 있습니다. 그런 다음 단일 명령을 사용하여 모든 새 버전의 VS Code에 로드할 수 있습니다.

21. Better Align

https://marketplace.visualstudio.com/items?itemName=wwm.better-align

코드의 완벽한 정렬을 좋아하는 사람이라면 더 나은 정렬이 필요합니다. 여러 변수 선언, 후행 주석, 코드 조각 등을 정렬할 수 있습니다. 이 플러그인을 설치하고 사용해 보는 것보다 이 플러그인이 얼마나 훌륭한지 확인하는 더 좋은 방법은 없습니다!

22.VIM

https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

VIM을 깊이 있게 사용하시나요? 그렇다면 축하합니다. 모든 VIM 트릭을 VS Code에서 직접 사용할 수 있습니다. 저는 개인적으로 이 분야에 능숙하지는 않지만 VIM을 활용하여 훨씬 더 많은 기능을 제공하는 것이 얼마나 생산적인지 알고 있습니다.

원본 주소: https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development

원작자: James Quick

번역 주소: https:/ /segmentfault.com/a/1190000038478784

더 많은 프로그래밍 관련 지식을 보려면프로그래밍 교육을 방문하세요! !

위 내용은 웹 개발을 위한 22개의 실용적인 VSCode 플러그인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!