이 글은 VSCode의 실용적인 프런트엔드 플러그인을 요약하고 추천합니다. 모두에게 도움이 되기를 바랍니다!
생산성을 확실히 향상시킬 수 있는 프런트엔드 개발을 위한 필수 플러그인을 추천해 주세요. 남은 시간을 여기저기 돌아다니는 것이 좋지 않을까요? [추천 학습: "vscode 튜토리얼"]
플러그인 이름: Alias path jump
사용 지침: Alias path 점프 플러그인, 모든 프로젝트 지원,
사용 시나리오: 페이지를 개발할 때 별칭 경로로 가져온 구성 요소를 클릭하려고 합니다(아래 데모)
settinas.json에서 편집하세요. code><li>
<code>settinas.json中编辑// 文件名别名跳转
"alias-skip.mappings": {
"~@/": "/src",
"views": "/src/views",
"assets": "/src/assets",
"network": "/src/network",
"common": "/src/common"
}, "163391840030048VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
path-alias
 "163391841476940VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
indent-rainbow
Bracket Pair Colorizer 2
Auto Rename Tag
Code Spell Checker
 "163391856166557VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
Code Runner
 "163391856672649VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
Debugger for Chrome
 "163391857281935VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
Live ServerPP
 "163391869975899VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
Svg Preview
 "163391979897895VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
Tabninerrreee "163391840030048VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
 "163391876616391VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
path-alias🎜🎜시나리오: 구성 요소를 가져올 때 🎜별칭 경로를 사용합니까? 프롬프트 사용 시🎜(별명 경로 점프와 함께 사용할 수 있으며 충돌 없음)🎜🎜자세한 사용법 튜토리얼(매우 간단함)🎜🎜🎜 "163391841029769VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
🎜🎜 "163391841476940VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
🎜indent-rainbow🎜🎜기능: Rainbow indent🎜🎜🎜 "163391841910603VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
🎜Bracket 쌍 Colorizer 2 🎜🎜기능: 일치하는 괄호() 또는 개체 {}에 해당 색상을 추가하여 구별🎜🎜 태그 자동 이름 바꾸기🎜🎜기능: 태그 이름 자동 바꾸기🎜🎜🎜 "163391852072105VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
🎜Code Spell Checker code>🎜🎜기능: 단어 철자가 틀렸는지 확인하세요(영어 지원)🎜🎜🎜<img src="https:/%20/img.php.cn/upload/image/898/258/996/163391856166557VSCode%EC%9D%98%20%EC%8B%A4%EC%9A%A9%EC%A0%81%EC%9D%B8%20%ED%94%84%EB%9F%B0%ED%8A%B8%EC%97%94%EB%93%9C%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%20%EC%B6%94%EC%B2%9C(%EC%9A%94%EC%95%BD)" title=" 163391856166557VSCode의 실용적인 프런트엔드 플러그인 추천(요약)" alt="VSCode의 실용적인 프런트엔드 플러그인 추천(요약)">🎜<h3 data-id="heading-12"> 🎜Code Runner🎜🎜🎜🎜플러그인 이름: <code>Code Runner🎜🎜기능: 1 다양한 언어 코드를 실행하는 키(일반적으로 테스트에 사용됨) 🎜🎜🎜 "163391856672649VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
🎜Chrome용 디버거🎜🎜기능: VSCode 측, 디버깅 코드 🎜🎜🎜 "163391857281935VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
🎜Live ServerPP🎜🎜기능: 서버 측에서 파일을 열고 실시간으로 수정 사항을 표시합니다. 코드 🎜🎜는 웹 소켓 클라이언트를 디버깅하는 데 사용할 수 있는 웹 소켓 메시징 서비스를 지원합니다 🎜 🎜 서버 측 API 인터페이스를 시뮬레이션하는 데 사용할 수 있는 프로그래밍 가능한 가상 파일을 지원합니다. 🎜🎜🎜🎜🎜%20 "163391869975899VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
🎜Svg Preview🎜🎜기능: SVG 사진을 표시하고 편집할 수 있습니다🎜🎜🎜 "1633919798978958 .gif")
🎜Tabnine🎜🎜기능: 작성하려는 코드를 예측하고 메시지를 표시할 수 있는 지능형 코드 프롬프트🎜🎜🎜🎜🎜템플릿 문자열 변환기Template String Converter
vscode-pigments
 "163391883068624VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
Parameter Hints
 "163391883697907VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
Quokka.js
ctrl+shift+p输入Quokka new JavaScr..即可使用
Highlight Matching Tag
 "163391884841462VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
BookmarksESLintPrettier - Code formatterProject ManagerPath IntellisenseImage previewGitLensgit功能，支持在VSCode查看作者、修改时间等等open in browservue-component
 "163391921719220VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
 "163391922377704VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
 "163391922887962VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
Vetur
插件名：Vue 3 Snippets
基本必备：很多Vue的代码段，很方便开发
React Style Helper
React "163391882391678VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
vscode-pigments
 "163391883068624VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
플러그인 이름: 매개변수 힌트
 "163391883697907VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
🎜 "163391923338401VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
Quokka .js🎜🎜사용법: 플러그인을 설치한 후 ctrl+shift+p Quokka new JavaScr..를 입력합니다. to use🎜🎜기능: 실시간으로 인쇄물 표시, 더 많은 기능을 직접 탐색(테스트에 자주 사용됨) 🎜🎜🎜
🎜 일치하는 태그 강조 표시🎜🎜기능: 커서가 머무를 때 태그할 때 일치하는 태그 강조 표시🎜🎜🎜
🎜Bookmarks🎜🎜기능: 일반적으로 소스 코드를 읽어 줄을 표시하는 데 사용됩니다. 및 점프(코드 표시 빠른 점프)🎜🎜🎜🎜ESLint🎜🎜기능: 코드 사양 확인🎜🎜🎜🎜Prettier - 코드 포맷터🎜🎜기능: 코드 미화, 자동으로 표준 형식으로 포맷됨🎜🎜🎜🎜Project Manager🎜🎜 기능: 프로젝트 관리 플러그인, 여러 프로젝트를 개발할 때 빠르게 점프🎜🎜🎜🎜Path Intellisense 🎜🎜기능: 경로 지능형 프롬프트🎜🎜🎜🎜이미지 미리보기 🎜🎜기능: 가져오기 경로가 이미지인 경우 현재 이미지를 미리 볼 수 있습니다🎜🎜🎜🎜GitLens 🎜🎜기능: VSCode Time 등에서 작성자 보기 및 수정을 지원하는 향상된 git 기능🎜🎜🎜🎜브라우저에서 열기🎜🎜기능: 현재 파일을 browser🎜🎜🎜🎜 "163391921719220VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
🎜🎜 "163391922377704VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
🎜🎜%20 "163391922887962VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
🎜🎜Vetur🎜🎜🎜🎜플러그인 이름: Vetur🎜🎜Development Vue 필수사항🎜🎜Vue 3 Snippets🎜🎜🎜🎜기본 필수 사항: 다수Vue의 코드 조각은 개발에 매우 편리합니다🎜🎜 🎜React Style 도우미🎜🎜기능: React에서 인라인 스타일을 더 빠르게 작성하고 CSS, LESS, SASS 및 기타 스타일 파일을 편집합니다. 강력한 보조 개발 기능을 제공합니다.🎜🎜자동 완성🎜🎜스타일 및 변수 정의 위치🎜🎜JSX/TSX의 인라인 스타일 생성🎜🎜스타일 및 변수 내용 미리보기🎜🎜🎜🎜🎜🎜🎜🎜🎜인라인 스타일 자동 완성 포괄적이며 SASS 변수의 점프 및 미리보기를 지원합니다. 🎜🎜🎜🎜🎜ES7 React/Redux/React-Native/JS 스니펫ES7 React/Redux/React-Native/JS snippets
React的代码段，很方便开发vscode-styled-components
JS文件中写样式时，有智能提示 "163391935773352VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
vscode-styled-components
One Dark Pro
 "163391926240926VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
vscode-icons
VSCode文件夹&文件图标 "163391926762151VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
vscode-icons
css属性时插件名：Draw.io Integration
功能：在VSCode中画图，支持多人协作编辑图表..
插件名：echarts-vscode-extension
使用：安装插件后，ctrl+shift+p输入active Echars即可开启智能提示
功能：提示各种Echar中Option 的属性，挺强大的
插件名：A-super-translate
 "163391927110859VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
React 코드 스니펫, 개발에 매우 편리함vscode-styled-comComponents
vscode-styled-comComponents
JS파일에 스타일을 작성할 때 스마트 프롬프트가 있습니다<li>
<p></p>
<img src="https://img.php.cn/upload/image/195/828/341/163391935773352VSCode%EC%9D%98%20%EC%8B%A4%EC%9A%A9%EC%A0%81%EC%9D%B8%20%ED%94%84%EB%9F%B0%ED%8A%B8%EC%97%94%EB%93%9C%20%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%20%EC%B6%94%EC%B2%9C(%EC%9A%94%EC%95%BD)" title="1633919357733527 .gif" alt="VSCode의 실용적인 프런트엔드 플러그인 추천(요약)"><ul>
<h2 data-id="heading-32">테마 클래스</h2>
<li>
<h3 data-id="heading-33"></h3>
<p>Dracula 공식</p>
</li>
</ul>
</li>플러그인 이름: <code>vscode -styled-comComponents
 "1633919257226134 .gif")
One Dark Pro "163391941835956VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
 "163391926240926VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
vscode-icons🎜🎜VSCode 폴더 및 파일 아이콘🎜🎜🎜🎜vscode-icons🎜🎜기능: 커서가 css 속성에 있을 때 각 CSS 속성의 초기 값을 표시합니다🎜🎜🎜🎜Draw.io 통합🎜🎜🎜🎜기능: VSCode에서 그림 그리기, 지원 여러 사람이 공동으로 차트를 편집합니다..🎜🎜🎜🎜
🎜echarts-vscode-extension 🎜🎜🎜🎜사용법: 플러그인을 설치한 후 ctrl+shift+p active Echars를 입력하면 스마트 프롬프트를 켤 수 있습니다🎜🎜🎜🎜기능: 다양한 속성 프롬프트 Echar의 옵션은 매우 강력합니다🎜🎜🎜🎜 "163391928179527VSCode의 실용적인 프런트엔드 플러그인 추천(요약)")
🎜A-super-translate 🎜🎜🎜🎜사용법: 줄을 선택하고 Ctrl+Shift+p로 번역을 입력합니다🎜🎜🎜ctrl+`를 입력한 후 Ctrl+를 누릅니다. 1 번역할 선택한 영역을 직접 바꿉니다. 🎜🎜🎜🎜🎜 기능: 번역 읽기를 방해하지 않고 인식 코드에 주석 부분을 추가합니다. 다양한 언어, 한 줄 및 여러 줄 주석 지원, 🎜🎜🎜🎜 사용자 문자열 및 변수 번역 지원, 낙타 대소문자 분할 지원 🎜🎜🎜🎜🎜🎜 요약(모든 플러그인 그림 포함) 🎜🎜🎜 필요에 따라 , 해당 플러그인을 설치할 수 있습니다. 하지만 (너무 많은 플러그인을 설치하면 VSCode가 중단됩니다.) 🎜🎜물론 컴퓨터 구성은 제가 말하지 않은 것처럼 충분히 강력합니다. 🎜🎜🎜🎜🎜🎜 프로그래밍 관련 지식을 더 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜위 내용은 VSCode의 실용적인 프런트엔드 플러그인 추천(요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
