VSCode의 실용적인 프런트엔드 플러그인 추천(요약)

이 글은 VSCode의 실용적인 프런트엔드 플러그인을 요약하고 추천합니다. 모두에게 도움이 되기를 바랍니다!

생산성을 확실히 향상시킬 수 있는 프런트엔드 개발을 위한 필수 플러그인을 추천해 주세요. 남은 시간을 여기저기 돌아다니는 것이 좋지 않을까요? [추천 학습: "vscode 튜토리얼"]

개발을 위한 종합 권장 사항

Alias ​​​​path jump

플러그인 이름: 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"
    },

效果展示

路径别名智能提示

• 插件名：path-alias
• 场景: 在导入组件的时候，使用别名路径没用提示时 (可和别名路径跳转同时使用, 无冲突)
• 详细使用教程(贼简单)

安装效果和功能

indent-rainbow

• 插件名: indent-rainbow
• 功能：彩虹缩进

Bracket Pair Colorizer 2

• 插件名: Bracket Pair Colorizer 2
• 功能：给匹配的括号() 或者 对象{}.. 添加对应的颜色用于区分

Auto Rename Tag

• 插件名:  Auto Rename Tag
• 功能：自动重命名标签

Code Spell Checker

• 插件名：Code Spell Checker
• 功能：检查单词拼写是否错误（支持英语）

Code Runner

• 插件名：Code Runner
• 功能：一键执行各种语言代码（常用于测试）

Debugger for Chrome

• 插件名：Debugger for Chrome
• 功能：在VSCode端，调试代码

Live ServerPP

• 插件名：Live ServerPP
• 功能：在服务器端打开你的文件，实时显示你修改的代码
  • 支持websocket 消息服务，可以用于调试websocket 客户端
  • 支持可编程虚拟文件，可用于模拟服务端API接口

Svg Preview

• 插件名：Svg Preview
• 功能：可以显示你的SVG图片，还可以编辑

Tabnine

• 插件名：Tabninerrreee
효과 표시

🎜경로 별칭 스마트 프롬프트🎜🎜🎜🎜플러그인 이름: path-alias🎜🎜시나리오: 구성 요소를 가져올 때 🎜별칭 경로를 사용합니까? 프롬프트 사용 시🎜(별명 경로 점프와 함께 사용할 수 있으며 충돌 없음)🎜🎜자세한 사용법 튜토리얼(매우 간단함)🎜🎜🎜

🎜설치 효과 및 기능🎜🎜🎜🎜🎜 🎜

🎜indent-rainbow🎜🎜🎜🎜 플러그인 이름: indent-rainbow🎜🎜기능: Rainbow indent🎜🎜🎜🎜

🎜Bracket 쌍 Colorizer 2🎜🎜🎜🎜플러그인 이름: Bracket 쌍 Colorizer 2 🎜🎜기능: 일치하는 괄호() 또는 개체 {}에 해당 색상을 추가하여 구별🎜🎜

🎜태그 자동 이름 바꾸기🎜🎜🎜🎜플러그인 이름: 태그 자동 이름 바꾸기🎜🎜기능: 태그 이름 자동 바꾸기🎜🎜🎜🎜

🎜Code Spell Checker🎜🎜🎜🎜플러그인 이름: Code Spell Checker code>🎜🎜기능: 단어 철자가 틀렸는지 확인하세요(영어 지원)🎜🎜🎜<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/638/773/227/1633918842816160.gif?x-oss-process=image/resize,p_40" class="lazy" title=" 163391856166557VSCode의 실용적인 프런트엔드 플러그인 추천(요약)" alt="VSCode의 실용적인 프런트엔드 플러그인 추천(요약)">🎜<h3 data-id="heading-12"> 🎜Code Runner🎜🎜🎜🎜플러그인 이름: <code>Code Runner🎜🎜기능: 1 다양한 언어 코드를 실행하는 키(일반적으로 테스트에 사용됨) 🎜🎜🎜🎜

🎜 Chrome용 디버거🎜🎜🎜🎜플러그인 이름: Chrome용 디버거🎜🎜기능: VSCode 측, 디버깅 코드 🎜🎜🎜🎜

🎜Live ServerPP🎜🎜🎜🎜 플러그인 이름: Live ServerPP🎜🎜기능: 서버 측에서 파일을 열고 실시간으로 수정 사항을 표시합니다. 코드 🎜🎜는 웹 소켓 클라이언트를 디버깅하는 데 사용할 수 있는 웹 소켓 메시징 서비스를 지원합니다 🎜 🎜 서버 측 API 인터페이스를 시뮬레이션하는 데 사용할 수 있는 프로그래밍 가능한 가상 파일을 지원합니다. 🎜🎜🎜🎜🎜🎜

🎜Svg Preview🎜🎜🎜🎜 플러그인 이름: Svg Preview🎜🎜기능: SVG 사진을 표시하고 편집할 수 있습니다🎜🎜🎜🎜

🎜Tabnine🎜🎜🎜🎜플러그인 이름: Tabnine🎜🎜기능: 작성하려는 코드를 예측하고 메시지를 표시할 수 있는 지능형 코드 프롬프트🎜🎜🎜🎜🎜

템플릿 문자열 변환기

• 플러그인 이름: 템플릿 문자열 변환기Template String Converter
• 功能：在字符串中输入$触发，将字符串转换为模板字符串

vscode-pigments

• 插件名：vscode-pigments
• 功能：实时预览设置的颜色

Parameter Hints

• 插件名：Parameter Hints
• 功能：提示函数的参数类型及消息

Quokka.js

• 插件名：Quokka.js
• 使用：安装插件后，ctrl+shift+p输入Quokka  new JavaScr..即可使用
• 功能：实时显示打印输出，更多功能自行探索（常用于测试）

Highlight Matching Tag

• 插件名：Highlight Matching Tag
• 功能：当光标停留在标签时，高亮匹配的标签

大众类插件

• 基本都有安装就不详细介绍了

插件

• Bookmarks
  • 功能：常用于读源码进行标记行，跳转（代码标记快速跳转）
• ESLint
  • 功能：代码规范检查
• Prettier - Code formatter
  • 功能：代码美化，自动格式化成规范格式
• Project Manager
  • 功能：项目管理插件，当开发多个项目时，可以快速跳转
• Path Intellisense
  • 功能：路径智能提示
• Image preview
  • 功能：当引入路径为图片时，可以预览当前图片
• GitLens
  • 功能：增强了git功能，支持在VSCode查看作者、修改时间等等
• open in browser
  • 功能：在浏览器打开当前文件

Vue 开发推荐

vue-component

• 插件名：vue-component
• 功能：输入组件名称自动导入找到的组件，自动导入路径和组件
  • 选中后自动输入组件名（包含必填属性）、import语句、components属性

Vetur

• 插件名：Vetur
• 开发 Vue 必备

Vue 3 Snippets

• 插件名：Vue 3 Snippets

• 基本必备：很多Vue的代码段，很方便开发

React 开发推荐

React Style Helper

• 插件名：React Style Helper
• 功能：在React
  기능: 문자열에 $를 입력하여 문자열을 트리거하고 템플릿 문자열로 변환합니다
  • 
  • vscode-pigments
  플러그인 이름: vscode-pigments

기능: 설정된 색상을 실시간으로 미리보기

• 매개변수 힌트

플러그인 이름: 매개변수 힌트

🎜기능: 프롬프트 함수 매개변수 유형 및 메시지🎜🎜🎜🎜

🎜Quokka.js🎜🎜🎜🎜플러그 -in 이름: Quokka .js🎜🎜사용법: 플러그인을 설치한 후 ctrl+shift+p Quokka new JavaScr..를 입력합니다. to use🎜🎜기능: 실시간으로 인쇄물 표시, 더 많은 기능을 직접 탐색(테스트에 자주 사용됨) 🎜🎜🎜🎜

🎜하이라이트 일치 태그🎜🎜🎜🎜플러그인 이름: 일치하는 태그 강조 표시🎜🎜기능: 커서가 머무를 때 태그할 때 일치하는 태그 강조 표시🎜🎜🎜🎜

🎜인기 플러그인🎜🎜🎜🎜기본적으로 다 설치되어 있으니 해볼께요. 자세히 알아보지 마세요🎜🎜

🎜Plug-in🎜

🎜🎜Bookmarks🎜🎜기능: 일반적으로 소스 코드를 읽어 줄을 표시하는 데 사용됩니다. 및 점프(코드 표시 빠른 점프)🎜🎜🎜🎜ESLint🎜🎜기능: 코드 사양 확인🎜🎜🎜🎜Prettier - 코드 포맷터🎜🎜기능: 코드 미화, 자동으로 표준 형식으로 포맷됨🎜🎜🎜🎜Project Manager🎜🎜 기능: 프로젝트 관리 플러그인, 여러 프로젝트를 개발할 때 빠르게 점프🎜🎜🎜🎜Path Intellisense 🎜🎜기능: 경로 지능형 프롬프트🎜🎜🎜🎜이미지 미리보기 🎜🎜기능: 가져오기 경로가 이미지인 경우 현재 이미지를 미리 볼 수 있습니다🎜🎜🎜🎜GitLens 🎜🎜기능: VSCode Time 등에서 작성자 보기 및 수정을 지원하는 향상된 git 기능🎜🎜🎜🎜브라우저에서 열기🎜🎜기능: 현재 파일을 browser🎜🎜🎜🎜

Vue 개발 권장 사항

🎜vue-comComponent🎜🎜🎜🎜플러그인 이름: vue-comComponent

🎜🎜기능: 🎜찾은 컴포넌트를 자동으로 가져오려면 컴포넌트 이름을 입력하고 자동으로 경로를 가져옵니다. 🎜🎜🎜 컴포넌트를 선택한 후 컴포넌트 이름(필수 속성 포함)을 자동으로 입력하고 import 문 및 구성 요소 속성 🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜Vetur🎜🎜🎜🎜플러그인 이름: Vetur🎜🎜Development Vue 필수사항🎜🎜

🎜 Vue 3 Snippets🎜🎜🎜🎜🎜플러그인 이름: Vue 3 Snippets🎜🎜🎜🎜기본 필수 사항: 다수Vue의 코드 조각은 개발에 매우 ​​편리합니다🎜🎜 🎜

React 개발 권장 사항

🎜React 스타일 도우미🎜🎜🎜🎜플러그인 이름: React Style 도우미🎜🎜기능: React에서 인라인 스타일을 더 빠르게 작성하고 CSS, LESS, SASS 및 기타 스타일 파일을 편집합니다. 강력한 보조 개발 기능을 제공합니다.🎜🎜자동 완성🎜🎜스타일 및 변수 정의 위치🎜🎜JSX/TSX의 인라인 스타일 생성🎜🎜스타일 및 변수 내용 미리보기🎜🎜🎜🎜🎜🎜🎜🎜🎜인라인 스타일 자동 완성 포괄적이며 SASS 변수의 점프 및 미리보기를 지원합니다. 🎜🎜🎜🎜🎜

ES7 Reactsnippets

• 플러그인 이름: ES7 React/Redux/React-Native/JS 스니펫ES7 React/Redux/React-Native/JS snippets
• 功能：很多React的代码段，很方便开发

vscode-styled-components

• 插件名：vscode-styled-components
• 功能：在JS文件中写样式时，有智能提示

主题类

Dracula Official

• 插件名：vscode-styled-components

One Dark Pro

• 插件名：One Dark Pro

vscode-icons

• 插件名：vscode-icons
• VSCode文件夹&文件图标

其他推荐

• 以下插件，可能不常用，大家感兴趣可以试试

CSS Initial Value

• 插件名：vscode-icons
• 功能：显示每个CSS属性的初始值，当光标停留在css属性时

画板作图

• 插件名：Draw.io Integration

• 功能：在VSCode中画图，支持多人协作编辑图表..

Echars 智能提示插件

• 插件名：echarts-vscode-extension

• 使用：安装插件后，ctrl+shift+p输入active Echars即可开启智能提示

• 功能：提示各种Echar中Option 的属性，挺强大的

翻译插件

• 插件名：A-super-translate

  기능: 많은 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)?x-oss-process=image/resize,p_40" title="1633919357733527 .gif" alt="VSCode의 실용적인 프런트엔드 플러그인 추천(요약)"><ul> <h2 id="테마-클래스">테마 클래스</h2> <li> <h3 data-id="heading-33"></h3> <p>Dracula 공식</p> </li> </ul> </li>플러그인 이름: <code>vscode -styled-comComponents

• One Dark Pro

플러그인 이름: One Dark Pro

vscode-icons🎜🎜플러그인 이름: vscode-icons🎜🎜VSCode 폴더 및 파일 아이콘🎜🎜🎜🎜

기타 권장 사항 🎜🎜🎜다음 플러그인은 일반적으로 사용되지 않을 수 있습니다. 관심이 있으시면 사용해 보세요🎜🎜

🎜CSS 초기 값 🎜🎜🎜🎜플러그인 이름: vscode-icons🎜🎜기능: 커서가 css 속성에 있을 때 각 CSS 속성의 초기 값을 표시합니다🎜🎜🎜🎜

🎜페인트 드로잉🎜🎜🎜🎜🎜플러그인 이름 ：Draw.io 통합🎜🎜🎜🎜기능: VSCode에서 그림 그리기, 지원 여러 사람이 공동으로 차트를 편집합니다..🎜🎜🎜🎜🎜

🎜Echars 스마트 프롬프트 플러그인🎜🎜🎜🎜🎜플러그인 이름: echarts-vscode-extension 🎜🎜🎜🎜사용법: 플러그인을 설치한 후 ctrl+shift+p active Echars를 입력하면 스마트 프롬프트를 켤 수 있습니다🎜🎜🎜🎜기능: 다양한 속성 프롬프트 Echar의 옵션은 매우 강력합니다🎜🎜🎜🎜🎜

🎜 번역 플러그인🎜🎜🎜🎜🎜플러그인 이름: A-super-translate 🎜🎜🎜🎜사용법: 줄을 선택하고 Ctrl+Shift+p로 번역을 입력합니다🎜🎜🎜ctrl+`를 입력한 후 Ctrl+를 누릅니다. 1 번역할 선택한 영역을 직접 바꿉니다. 🎜🎜🎜🎜🎜 기능: 번역 읽기를 방해하지 않고 인식 코드에 주석 부분을 추가합니다. 다양한 언어, 한 줄 및 여러 줄 주석 지원, 🎜🎜🎜🎜 사용자 문자열 및 변수 번역 지원, 낙타 대소문자 분할 지원 🎜🎜🎜🎜🎜🎜 요약(모든 플러그인 그림 포함) 🎜🎜🎜 필요에 따라 , 해당 플러그인을 설치할 수 있습니다. 하지만 (너무 많은 플러그인을 설치하면 VSCode가 중단됩니다.) 🎜🎜물론 컴퓨터 구성은 제가 말하지 않은 것처럼 충분히 강력합니다. 🎜🎜🎜🎜🎜🎜 프로그래밍 관련 지식을 더 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 VSCode의 실용적인 프런트엔드 플러그인 추천(요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!