프런트 엔드 개발 IDE를 만드는 데 도움이 되는 베어 VSCode용 11가지 필수 플러그인
VSCode 가볍고, 오픈 소스이며, 새로 다운로드한 VSCode는 쓸모없고 열악하며, 프로젝트 관리 기능조차 없습니다.
가벼운 VSCode는 백엔드 개발에는 다소 순진할 수 있지만, 프론트엔드 개발에는 딱 맞습니다. 결국 Docker, 데이터베이스 등이 필요하지 않습니다. VSCode 플러그인 두 개를 설치하고 열기만 하면 됩니다. 웹 페이지를 열고 작업을 시작할 수 있습니다.
이 글에서는 프런트엔드 친화적인 개발 IDE를 만들기 위해 프런트엔드 개발자의 관점에서 VSCode 필수 플러그인 몇 가지를 소개합니다. [추천 학습: vscode 튜토리얼, 프로그래밍 비디오]
1. Project Manager
Project Manager를 사용하면 VSCode에서 프로젝트 간을 빠르게 전환하는 데 도움이 됩니다. 레벨별로 파일 디렉토리를 살펴보고 최종적으로 원하는 프로젝트 파일을 선택하세요.
팔레트에 Save Project를 입력하고 Enter를 누르면 현재 프로젝트가 저장됩니다.
그러면 오른쪽 메뉴에서 추가한 항목을 볼 수 있고, 해당 항목을 클릭하면 해당 항목으로 전환할 수 있어 매우 편리합니다.
프로젝트를 세분화할 수 있는 태그 태그도 제공합니다.
2. GitLens
GitLens 이름에서 이 플러그인의 기능을 알 수 있으며 이 플러그인의 대화형 경험은 Webstorm보다 좋습니다.
코드 수정 정보를 쉽게 볼 수 있습니다.
특정 라인의 변경 정보를 확인할 수 있습니다
호버를 올리면 특정 정보도 확인할 수 있습니다
GitLens 소개 페이지에는 10,000 단어 이상이 있어 해당 기능이 완성되었음을 알 수 있습니다. 이므로 여기서는 자세히 설명하지 않겠습니다.
3. About
VSCode의 Tab 키는 기본적으로 출력됩니다.t 이는 WebStorm 및 Eclipse 사용에 익숙한 사람들에게는 매우 불편한 기능입니다. thisTabOut .
4. Live Server
Live Server도 잘 알려져 있으며 실시간으로 코드를 로드하고 업데이트할 수 있습니다.
실제로 Websocket은 코드 업데이트를 구현하는 데 사용됩니다. Live Server는 일부 테스트 HTML 페이지를 작성할 때 정말 유용합니다.
5. 코드 맞춤법 검사기
일부 변수 메소드의 철자를 입력할 때 단어 철자가 틀릴 수 있습니다. Code Spell Checker를 사용하면 실수를 감지하는 데 도움이 됩니다.
잘못된 단어가 감지되면 제공되는 단어 제안 중 일부를 확인할 수도 있습니다.
6 이미지 미리 보기
프로젝트에 여러 이미지 URL을 도입할 때 , 각 이미지를 미리 보는 것이 고통스럽다고 생각합니다. 이미지 미리 보기가 이 문제를 해결합니다.
7. 가져오기 비용
프런트 엔드 프로젝트에서는 다양한 종속성 패키지를 가져와야 하는 경우가 많습니다. 가져오기 비용을 통해 가져온 패키지의 크기를 확인하여 최적화할 수 있습니다.
8. 매개변수 힌트
매개변수 힌트는 함수의 매개변수 이름을 표시합니다.
9. 하이라이트 일치 태그
하이라이트 일치 태그는 HTML 및 JSX 코드 일치 기호를 강조 표시할 수 있습니다.
10. indent-rainbow
Indent-rainbow 코드를 들여쓰기하면 아름다운 무지개로 바뀔 수도 있죠?.
11. Blockman
Blockman은 현재 있는 코드 편집 블록을 강조 표시할 수 있습니다.
Postscript
VSCode의 경우 플러그인 수가 압도적입니다. 일반적인 개발 시나리오의 경우 해당 처리 플러그인이 많이 있으므로 사용해야 하는 경우 Marketplace에서 검색하면 됩니다. 리액트 프로젝트:
너무 많은 플러그인을 설치하는 것이 반드시 좋은 것은 아니라는 점은 주목할 가치가 있습니다. VSCode의 플러그인 메커니즘도 이벤트 중심입니다. 플러그인이 너무 많아서 발생하는 단점은 한편으로는 플러그 충돌입니다. -기능에서는 성능이 저하됩니다. 즉, VSCode가 중단됩니다.
VSCode에 대한 자세한 내용을 보려면 vscode 기본 튜토리얼을 방문하세요!
위 내용은 프런트 엔드 개발 IDE를 만드는 데 도움이 되는 베어 VSCode용 11가지 필수 플러그인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7325
9
1625
14
1350
46
1262
25
1209
29
vscode에서 word 문서 보는 방법 vscode에서 word 문서 보는 방법
May 09, 2024 am 09:37 AM
먼저 컴퓨터에서 vscode 소프트웨어를 열고 그림의 ①과 같이 왼쪽의 [확장] 아이콘을 클릭한 다음 그림의 ②와 같이 확장 인터페이스의 검색 상자에 [officeviewer]를 입력합니다. 그런 다음 검색 결과에서 [officeviewer]를 선택하여 그림의 ③과 같이 설치합니다. 마지막으로 아래와 같이 docx, pdf 등의 파일을 엽니다.
vscode로 순서도 그리는 방법 Visual_studio 코드로 순서도 그리는 방법
Apr 23, 2024 pm 02:13 PM
먼저 컴퓨터에서 Visual Studio 코드를 열고 왼쪽에 있는 네 개의 사각형 버튼을 클릭한 다음 검색 상자에 draw.io를 입력하여 플러그인을 쿼리하고 설치를 클릭한 후 새 test.drawio 파일을 생성합니다. test.drawio 파일을 선택하고 왼쪽의 편집 모드로 진입합니다. 측면에 다양한 그래픽이 있습니다. 드로잉 후 파일 → Embed → svg를 클릭한 다음 svg를 복사합니다. 복사한 svg 코드를 html 코드에 붙여넣으세요. html 웹페이지를 열면 해당 페이지의 그림을 클릭하시면 해당 페이지를 확대/축소하실 수 있습니다. 흐름도 여기서는 오른쪽 하단에 있는 연필 패턴을 클릭하여 웹 페이지로 이동합니다.
Vscode에서 Maude를 작성하는 방법_Vscode에서 Maude를 작성하는 방법
Apr 23, 2024 am 10:25 AM
먼저, vscode 플러그인 관리자에서 Maude 플러그인을 검색할 수 있습니다. 그런 다음, maude의 코드 조각과 구문 강조를 사용하려면 확장명이 maude인 새 파일을 만듭니다. 터미널 -> 새 터미널은 현재 폴더에 있는 vscode 내장 터미널을 열어 maude 또는 full-maude 프로그램을 실행할 수 있습니다. Maude의 공식 튜토리얼에는 그림과 같이 호출하고 실행할 수 있는 http 클라이언트의 예도 있습니다. 파일을 fm 확장자와 연결하려면 설정을 열고 사용자 설정에서 파일 연결을 검색한 다음 settings.json을 엽니다. 파일 연결에 항목, 즉 *.fm에서 maude까지 항목을 추가하기만 하면 됩니다. 그러나 가득 차있다
Caltech Chinese는 AI를 사용하여 수학적 증명을 뒤집습니다! 충격적인 Tao Zhexuan의 속도 5배 향상, 수학 단계의 80%가 완전 자동화됨
Apr 23, 2024 pm 03:01 PM
테렌스 타오(Terence Tao)를 비롯한 많은 수학자들이 극찬한 공식 수학 도구인 LeanCopilot이 다시 진화했다고요? 방금 Caltech 교수인 Anima Anandkumar는 팀이 LeanCopilot 논문의 확장 버전을 출시하고 코드 기반을 업데이트했다고 발표했습니다. 이미지 논문 주소: https://arxiv.org/pdf/2404.12534.pdf 최신 실험에 따르면 이 Copilot 도구는 수학적 증명 단계의 80% 이상을 자동화할 수 있는 것으로 나타났습니다! 이 기록은 이전 베이스라인 이솝보다 2.3배 향상된 기록이다. 그리고 이전과 마찬가지로 MIT 라이선스에 따른 오픈 소스입니다. 사진 속 그는 중국 소년 송페이양이다.
vscode에서 백그라운드 업데이트를 활성화하는 방법 vscode에서 백그라운드 업데이트를 활성화하는 방법
May 09, 2024 am 09:52 AM
1. 먼저 인터페이스를 연 후 왼쪽 상단에 있는 파일 메뉴를 클릭합니다. 2. 그런 다음 환경 설정 열에서 설정 버튼을 클릭합니다. 3. 그런 다음 이동하는 설정 페이지에서 업데이트 섹션을 찾습니다. 마지막으로 마우스를 클릭하여 확인하고 활성화합니다. Windows의 백그라운드에서 새 VSCode 버전 버튼을 다운로드하여 설치하고 프로그램을 다시 시작합니다.
vscode 작업 공간에 파일을 추가하는 방법 vscode 작업 공간에 파일을 추가하는 방법
May 09, 2024 am 09:43 AM
1. 먼저 vscode 소프트웨어를 열고 탐색기 아이콘을 클릭한 후 작업 공간 창을 찾습니다. 2. 그런 다음 왼쪽 상단 모서리에 있는 파일 메뉴를 클릭하고 작업 공간에 폴더 추가 옵션을 찾습니다. 3. 마지막으로 폴더 위치를 찾습니다. 로컬 디스크, 추가 버튼을 클릭하세요
vscode에서 wsl 구성 파일을 비활성화하는 방법 vscode에서 wsl 구성 파일을 비활성화하는 방법
May 09, 2024 am 10:30 AM
1. 먼저 설정 메뉴에서 설정 옵션을 엽니다. 2. 그런 다음 일반적으로 사용되는 페이지에서 터미널 열을 찾습니다. 3. 마지막으로 열 오른쪽에 있는 usewslprofiles 버튼을 선택 취소합니다.
VScode에서 애니메이션 부드러운 삽입을 설정하는 방법 VScode 튜토리얼에서 애니메이션 부드러운 삽입을 설정하는 방법
May 09, 2024 am 09:49 AM
1. 먼저 인터페이스를 연 후 작업 공간 인터페이스를 클릭합니다. 2. 그런 다음 열린 편집 패널에서 파일 메뉴를 클릭합니다. 3. 그런 다음 기본 설정 열 아래의 설정 버튼을 클릭합니다. 4. 마지막으로 마우스를 클릭하여 CursorSmoothCaretAnimation을 확인합니다. 버튼을 누르고 저장하면 됩니다.
