VSCODE通用插件+vue插件+react插件（2024版本

最新推荐文章于 2024-12-22 19:24:05 发布
最新推荐文章于 2024-12-22 19:24:05 发布
阅读量1.2k 收藏 12
点赞数 27
分类专栏： 2024年程序员学习 文章标签： vscode vue.js react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54513737/article/details/137339232
版权
本文列举了一系列适用于VSCode的插件，包括Live ServerPP用于实时代码调试，Svg Preview显示和编辑SVG，Tabnine智能代码提示，Vue开发推荐的Vetur和Vue 3 Snippets，以及React开发的React Style Helper和ES7 Reactsnippets。此外，还推荐了一些通用插件如代码高亮、格式化和项目管理工具，帮助前端开发者提高工作效率。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • 插件名：Debugger for Chrome

  • 功能：在VSCode端，调试代码

Live ServerPP

  • 插件名：Live ServerPP

  • 功能：在服务器端打开你的文件，实时显示你修改的代码

  • 支持websocket 消息服务，可以用于调试websocket 客户端

  • 支持可编程虚拟文件，可用于模拟服务端API接口

Svg Preview

  • 插件名：Svg Preview

  • 功能：可以显示你的SVG图片，还可以编辑

Tabnine

  • 插件名：Tabnine

  • 功能：智能提示代码，可以预测你将要写的代码进行提示

Template String Converter

  • 插件名：Template String Converter

  • 功能：在字符串中输入$触发，将字符串转换为模板字符串

vscode-pigments

  • 插件名：vscode-pigments

  • 功能：实时预览设置的颜色

Parameter Hints

  • 插件名：Parame

最低0.47元/天 解锁文章
【VSCode插件开发】集成 React 18（十）
编码世界
12-18 4万+
在开发VSCode插件时可以使用流行的前端框架，比如Vue、React、Svelte等，本文讲解一下，如何集成React 18。页面显示主要是在Webview，那么我们做的就是将 React 页面正确嵌入到 Webview 中。
五分钟快速入门：使用 Trae 开发你的第一个VS Code插件
止于至善
03-12 806
最近改用 Trae 作为开发工具，想体验一下它的 Builder 功能，当然也有程序员，都是一群能过够自动化，绝不多写一行代码的人，因此就使用 Builder 功能开发一个 vscode 的插件。插件开发什么功能呢？Taro React 快速创建新页面，官方就有这个命令脚本，当然 vscode 的插件市场也是存在这个插件的，不过我们这里就以这个功能为基础开发一个我们自己的插件，必定主要是为了体验 Builder 功能，因此开整！！！
react开发者必备vscode插件【2024最新】
liyananweb的博客
02-20 1万+
包含了。
【React-Vscode】Vscode中React插件合集
热门推荐
【敦厚的曹操】的专栏
07-05 1万+
【React-Vscode】Vscode中React插件合集
在VS Code中开发React常用插件
╮(╯_╰)╭ Don't expect me to reply to you in time
07-15 1万+
1、Chinese (Simplified) Language Pack for Visual Studio Code 功能：Vs code 本地汉化包 2、vscode-icons 功能：文件类型图标 3、filesize 功能：在状态栏显示聚焦文件的大小 4、PathAutocomplete 功能：路径自动补全 5、AutoCloseTag 功能：自动添加 HTML/XML 关闭标签 6、AutoRenameTag 功能：自...
react开发vscode插件推荐
江湖行骗老中医
08-29 4016
由于本人主要是做react开发，用的代码编辑器是传说中的宇宙第一前端神器vscode, 所以在这里记录并推荐一些本人开发过程中常用的一些vscode插件帮助开发。 1. 代码提示类插件 1.1Reactjs code snippets 1.2React Redux ES6 Snippets 1.3React-Native/React/Redux snippets for es6/es7 1.4JavaScript (ES6) code snippet...
vite+vue3+ts 手把手教你创建一个vue3项目
attengtiong的博客
12-21 8320
Vue3+Vite3+TS前端工程化实践
vscode vue html校验,VSCode环境下配置ESLint 对Vue单文件的检测
weixin_35715190的博客
06-19 1010
本文介绍了在VSCode环境下如何配置eslint进行代码检查，并介绍了如何对.vue单文件进行支持。ESLint 安装在工程根目录下，安装eslint及初始化$ npm install eslint --save-dev$ ./node_modules/.bin/eslint -- --init //会输出几个问题，指引配置eslint，我们选择通用方案即可1.? How would you l...
Vite2+Vue3的h5开发模板——开箱即用
光
10-21 1065
h5-vite-vue3-template 开箱即用的 h5 开发模板。技术栈：Vite/Vue3/Scss/ github仓库地址 目录简介 ├── index.html # index.html 模板 ├── jsconfig.json # JavaScript 配置 ├── package.json # package.json ├── public # 静态资源目录（不会被处理） │
2021 VSCode前端插件推荐
weixin_44763882的博客
10-02 3704
2021 VSCode前端插件推荐 前言 推荐一波前端开发必备插件，绝对可以提高你的生产力，剩下来的时间来 mo鱼，岂不美哉 开发综合推荐 别名路径跳转 插件名： 别名路径跳转 使用说明: 别名路径跳转插件，支持任何项目， 使用场景: 当你在开发页面时, 想点击别名路径导入的组件时（演示如下） 配置说明 下载后只需自定义配置一些自己常用的别名路径即可 右击插件–》扩展设置–》路径映射在settinas.json中编辑 // 文件名别名跳转 "alias-skip.mappings": {
记录一下vscode中开发react时好用的插件
baiduguoyun的博客
10-07 872
好用的vscode插件
React的vscode插件
congboer的博客
01-05 648
1、ES7 React/Redux/GraphQL/React-Native snippets 2、Fullstack React/React Native snippets 3、JS JSX Snippets 4、React-Native/React/Redux snippets for es6/es7 5、Simple React Snippets 6、TypeScript Importer ...
VS code react插件快捷键
weixin_41016986的博客
07-13 1099
VS code react插件快捷键
vscode react插件
weixin_39845185的博客
09-18 266
Auto Close Tag Auto Rename Tag Better Comments Code Spell Checker CSS Modules（react插件） Debugger for Chrome glean （react插件） Highlight Matching Tag npm intellisense path intellisense prettier TODO ...
【VSCode】ES7 React/Redux/GraphQL/React-Native snippets 插件详解
lph159的博客
09-21 1154
是一款非常流行的 VSCode 插件，专为使用 React、Redux、GraphQL 以及 React-Native 技术栈的开发者设计。该插件通过提供代码片段（snippets），让开发者无需重复编写常见的代码模板，从而提高开发效率。这些代码片段涵盖了 React 的函数组件、类组件、Hooks、Redux 操作等常用功能，大大缩短了编写代码的时间。在 React 开发中，函数组件和类组件是两种常见的组件形式。该插件通过几个简单的快捷键生成相应的代码模板，避免重复性工作。
vscode React 开发插件整理
loock的博客
08-26 1133
插件名称 功能简介 Reactjs code snippets react代码段 React Redux ES6 Snippets 代码段 ES7 React/Redux/GraphQL/React-Native snippets 代码段 JavaScript (ES6) code snippets es6代码段 Auto Rename Tag 从名字就能看出，当你...
rea t插件 vscode_react开发vscode插件推荐
weixin_36047538的博客
12-30 171
由于本人主要是做react开发，用的代码编辑器是传说中的宇宙第一前端神器vscode, 所以在这里记录并推荐一些本人开发过程中常用的一些vscode插件帮助开发。1. 代码提示类插件有了上述这些代码片段提示插件就可以大大增加码代码的速度了。2. 美化类插件2.1One Dark Pro(atom风格主题)赏心悦目的界面让你越敲越有劲。3. 其他实用类插件3.2npm Intellisense(对p...
react +vscode插件
tankpanv的博客
05-01 3093
1. 代码提示类插件 1.1Reactjs code snippets 1.2React Redux ES6 Snippets 1.3React-Native/React/Redux snippets for es6/es7 1.4JavaScript (ES6) code snippets(es6代码片段) 1.5Typescript React code s...
VSCode 插件开发实战（四）：使用 React 实现自定义页面
乐闻世界
12-22 1451
VSCode 是当今最受欢迎的代码编辑器之一，其强大的扩展能力使得开发者能够根据自身需求创建定制化的开发环境。在这篇教程中，我们将深入探讨如何使用 React 框架在 VSCode 中创建自定义插件页面。通过这一过程，你将学会如何结合现代前端技术与 VSCode 插件开发，实现一个功能丰富且用户体验友好的插件页面。本教程将涵盖基础环境配置、React 集成、插件与组件的通信以及高级优化技巧，帮助你全面掌握这项技能。
vscode有用的插件
最新发布
03-31
<think>好的，用户想寻找Visual Studio Code中实用的插件推荐，特别是必备的插件。首先，我需要根据提供的引用内容来整理相关的插件信息。引用[3]提到有十款对前端开发极其友好的必备插件，但具体的名字需要从其他引用中提取。 引用[1]提到了代码片段（Code Snippets），这应该对应到具体的插件，比如ES7+ React/Redux/React-Native snippets或者Vue VSCode Snippets。引用[4]提到了自动关闭标签的插件，可能是Auto Close Tag。引用[5]提到了vscode-fileheader，用于顶部注释模板。 接下来需要确保推荐的插件覆盖不同开发场景，比如前端、通用工具、代码美化等。另外，用户可能还关心调试、版本控制、性能优化等方面的插件。例如，ESLint和Prettier在引用中被多次提到，是代码格式化和校验的重要工具。 还需要考虑用户可能的其他需求，比如实时预览，所以Live Server可能是一个好的推荐。Git相关的插件如GitLens也会提升开发效率。另外，引用[2]提到根据开发语言不同还有很多插件，所以可能需要分门别类推荐，比如针对JavaScript、Python等。 需要确保每个插件的描述清晰，说明其用途和好处，并正确引用来源。例如，Auto Close Tag引用自[4]，而顶部注释模板来自[5]。同时，要避免重复推荐，并确保覆盖用户可能需要的各个方面，如代码片段、自动补全、调试、版本控制、主题美化等。 最后，生成相关问题时要考虑用户可能的后续疑问，比如插件配置、特定语言插件、性能优化或协作工具，这样可以提供更全面的帮助。</think>根据专业开发者使用经验和官方推荐，以下分类整理Visual Studio Code高效开发必备插件，并附具体配置建议： ### 一、核心效率工具 1. **ESLint**（代码质量保障） - 实时检测JavaScript/TypeScript语法规范 - 支持自定义Airbnb/Standard等流行规范 - 配置路径：`.eslintrc`配置文件[^3] 2. **Prettier**（代码格式化） - 自动统一代码风格（缩进/引号/分号等） - 保存时自动格式化（需配置`"editor.formatOnSave": true`）[^3] 3. **GitLens**（版本控制增强） - 行级代码修改记录追溯 - 快速对比文件历史版本 - 集成分支管理功能[^2] ### 二、前端专项工具 ```javascript // 使用Auto Close Tag时的智能闭合演示 function Component() { return ( <div> // 输入</时自动补全 ) } ``` 4. **Auto Close Tag**（HTML/XML开发） - 自动闭合标签（支持JSX/Vue模板）[^4] - 配置自定义标签库 5. **Live Server**（实时预览） - 启动本地服务器热更新 - 支持静态页面和REST API调试 ### 三、智能辅助工具 $$ 代码补全效率提升公式：E_{total} = \sum_{i=1}^{n}(t_{手动输入} - t_{自动补全}) $$ 6. **IntelliCode**（AI辅助） - 基于上下文预测代码 - 支持Python/Java/TypeScript等 7. **Tabnine**（全语言AI补全） - 深度学习驱动的代码建议 - 本地模型保护代码隐私[^2] ### 四、可视化辅助 8. **Rainbow Brackets**（代码可读性） - 彩虹色括号匹配 - 支持多重嵌套层级识别 9. **Material Icon Theme**（项目管理） - 可视化文件类型图标 - 快速识别文件类型 ### 五、跨平台开发 10. **Remote - SSH**（远程开发） - 直接编辑服务器文件 - 保持本地开发环境一致性 配置建议：通过`Ctrl+Shift+P`打开命令面板，输入`Extensions: Configure Recommended Extensions`可批量管理插件[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值