웹 개발 속도를 향상시키는 22개의 VSCode 플러그인(수집할 가치가 있음)

이 기사에서는 웹 개발을 위한 최고의 VSCode플러그인 22개를 공유합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다. U 22 Visual Studio 코드 플러그인 공유

1. chrome용 디버거

https: //marketplace.visualstudio.com/items? 항목 이름 = msjsdiag.debugger-For- chrome

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

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

Chrome 및 Visual Studio Code에서 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

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

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

추천 학습: "vscode 튜토리얼

"

4. 라이브 서버

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

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

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

5. 브래킷 쌍 Colorizor

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

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

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

7.Quokka

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

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

8. 경로 인텔리전스 대규모 프로젝트에서는 특정 파일 이름과 파일이 있는 디렉터리를 기억하는 것이 어려울 수 있습니다. 이 플러그인은 스마트 팁을 제공합니다. 따옴표 안에 경로를 입력하기 시작하면 디렉터리 및 파일 이름에 대한 스마트 프롬프트가 표시됩니다. 이렇게 하면 파일을 탐색하는 데 많은 시간을 소비하지 않아도 됩니다 :)

9. Project Manager

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

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

여러 프로젝트를 개발하는 경우 이는 정리된 상태를 유지하고 효율성을 높이는 좋은 방법입니다.

10. 편집기 구성

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

코딩이 거의 없음 스타일 표준이며 모든 주요 텍스트 편집기/IDE에서 지원됩니다. 작동 방식은 다음과 같습니다. 편집기에서 지원하는 저장소에 구성 파일을 저장합니다. 이 경우 이러한 프로필을 준수하도록 VS Code에 확장을 추가해야 합니다. 설정이 매우 쉽고 팀 프로젝트에 적합합니다.

11. 숭고한 텍스트 키맵

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

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

12. 브라우저 미리보기

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

I 라이브 서버처럼 Extension (위에서 언급한) 확장 기능이지만 편의성 측면에서 한 단계 더 나아갔습니다. VS Code 내에서 실시간 새로고침 미리보기를 제공합니다. 작은 변화를 보기 위해 더 이상 브라우저를 볼 필요가 없습니다!

13. Git 렌즈

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

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

14. Polacode

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

아시죠? 그리고 트위터 참조 그 아름다운 코드 스크린샷이요? 글쎄, 아마도 그들은 Polacode에서 왔을 것입니다. 사용하기 매우 쉽습니다. 코드 조각을 클립보드에 복사하고, 확장 프로그램을 열고, 코드를 붙여넣고, 이미지 저장을 클릭하세요! 아니요. 시간을 들여 코드를 포맷하세요. 앞서 서식 지정 및 검사를 제공하는 ESLint에 대해 언급했습니다. 린트 검사가 필요하지 않다면 Prettier를 선택하세요. 설정이 매우 쉽고 저장 시 자동으로 코드 형식을 지정하도록 구성할 수 있습니다.

16. 더 나은 댓글

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

이 플러그 -in 모두에게 유용합니다. 각 주석 유형은 서로 다른 색상으로 표시되어 서로 다른 의미를 부여하고 나머지 코드와 차별화됩니다. 저는 이것을 팁으로 사용해왔습니다. 아직 완료되지 않은 작업이 있다는 큰 주황색 메시지를 무시하기는 어렵습니다.

질문, 알림, 하이라이트에 대한 색상 코드도 있습니다. 나만의 맞춤 항목을 추가할 수도 있습니다! 17. 허브 파일을 처리하는 경우 이 플러그인이 적합합니다. 설치가 완료되면 파일을 마우스 오른쪽 버튼으로 클릭하면 Github에서 파일을 열 수 있는 옵션이 표시됩니다. Git Lens 플러그인을 사용하지 않는 경우 이 플러그인은 기록, 브랜치 버전 등을 확인하는 데 유용합니다.

18. VS 코드 아이콘

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

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

19. 머티리얼 아이콘 테마

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

You are 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

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

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

원저자: James Quick 

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

더 많은 프로그래밍 관련 지식 , 방문해주세요:

프로그래밍 교육! !

위 내용은 웹 개발 속도를 향상시키는 22개의 VSCode 플러그인(수집할 가치가 있음)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!