使用VSCode需要安装的一些插件

已于 2025-05-15 16:28:26 修改
阅读量5.2k 收藏 9
点赞数 2
CC 4.0 BY-SA版权
分类专栏： VSCode 文章标签： vscode
于 2021-09-28 11:49:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45048913/article/details/120522118
本文详细介绍如何在VSCode中安装关键插件，如AutoCloseTag、Prettier等，并重点讲解Vue和React插件如Vetur、VueVSCodeSnippets等，助你提升前端开发效率。

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

下载安装VSCode

下载安装：https://code.visualstudio.com/Download

通用插件

  • Auto Close Tag ：匹配标签，关闭对应的标签

  • Auto Rename Tag ：自动重命名

  • beautify : 良好的拓展性，可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用

  • View In Browser 或 Open In Browser 运行在浏览器中打开文件

  • HTML CSS Support ：这个也是必备插件之一

  • Path Autocomplete ：路径智能补全

  • Path Intellisense ： 路径智能提示

  • CSS Peek：使用此插件，你可以追踪至样式表中 CSS 类和 id 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

  • HTML Boilerplate：通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构

  • Color Info：这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了

  • Live Server：模拟服务器，可以使用http协议打开页面

  • Preview on WebServer：模拟服务器，可以使用http协议打开页面

  • CSS Peek：使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

  • HTML Boilerplate：通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构

  • Color Info：这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了

  • Live Server：模拟服务器，可以使用http协议打开页面

  • Preview on WebServer：模拟服务器，可以使用http协议打开页面

  • relative path：相对路径的书写
    使用方法：
    （1）安装relative path插件
    （2）在需要书写相对路径的文件中通过快捷键ctrl+shift+h,调出文件搜索面板
    （3）在文件在文件搜索面板中搜索出对应的文件，将光标放置在需要设置路径的文件处，选中所要设置的文件即可

  • Path Tools ：路径转换插件
    使用方法：
    （1）安装Path Tools
    （2）选中工作区中的文件，右击复制文件路径
    （3）将文件路径填写到对应的位置
    （4）选中所填写的文件路径，安装快捷键ctrl+shift+p（或快捷键F1）调出命令面板
    （5）在命令面板中输入
    （.）Relative: 将路径转换为相对于当前文件的相对路径
    （.）Resolve: 将路径转换为完整路径
    （.）Windows:将路径转化为windows操作系统的完成路径

  • Atom JavaScript Snippet：js字段补全

  • Chinese：中文语言包

  • Git History：文件历史记录工具

  • Prettier：代码格式化工具

  • Stylelint：css代码规范工具

  • TypeScript Vue Plugin：ts+vue工具

  • CSS Navigation：定位scss类名&连接符的位置，方便查询定位class样式

  • GitLens — Git supercharged：在 VS Code 中增强 Git — 通过 Git 责备注释和 CodeLens 一目了然地可视化代码作者身份，无缝导航和探索 Git 存储库，通过丰富的可视化和强大的比较命令获得有价值的见解，等等

  • change-case：快速英文格式转换：大驼峰、小驼峰、大写、小写等

  • Code Spell Checker：这个拼写检查器的目标是帮助发现常见的拼写错误，同时保持低误报率

  • GitHub Copilot：GitHub Copilot是一个AI对等编程工具，可帮助您更快、更智能地编写代码

  • IntelliSense for CSS class names in HTML：一个Visual Studio代码扩展，根据工作区或通过链接元素引用的外部文件中的定义，为HTML类属性提供CSS类名补全

  • Markdown Preview Github Styling：更改VS Code的内置markdown预览以匹配GitHub的样式

  • Prettier - Code formatter：一个固执己见的代码格式化器。它通过解析代码并使用自己的规则重新打印来强制执行一致的风格，这些规则考虑了最大行长，并在必要时包装代码

  • Windsurf Plugin (formerly Codeium): AI Coding Autocomplete and Chat for Python, JavaScript, TypeScript, and more：现代编码的超级大国，是一个基于尖端 AI 技术构建的免费代码加速工具包。Windsurf VSCode 插件提供 70+ 种语言的自动完成、聊天和搜索功能，具有闪电般的速度和最先进的建议质量

vue插件

  • Vetur：VScode中的VUE工具，高亮、格式化

  • Vue snippets：Vue的提示插件

  • vue 2 snippets：Vue2的提示插件

  • Vue 3 Snippets：Vue3的提示插件

  • Vue VSCode Snippets ：快捷生成页面的一些代码
    （1）vue基本骨架 vbase
    （2）data vdata
    （3）methods vmethod
    （4）v-for vfor

  • Vue - Official

  • vue-helper：

  • vue3-snippets：

React插件

  • Redux/react-router Snippets：React的提示插件
  • Simple React Snippets：提示 快速生成代码块，
  • Reactjs code snippets：提示 快速生成代码块
  • Beautify React JavaScript TypeScirpt 插件可以格式化JSX
  • React Redux ES6 Snippets
VSCode离线安装Verilog插件教程
猿小白的博客
03-10 612
本章教程，主要介绍如何在vscode中离线安装Verilog插件。插件名称：Verilog-HDL/SystemVerilog/Bluespec SystemVerilog。
vscode如何离线安装插件
猿小白的博客
01-05 2944
在没有网络的时候，如果要安装插件，就会麻烦一些，需要通过离线安装的方式进行。下面记录如何在vscode离线安装插件。
VSCode必备插件！快看过来！
热门推荐
qq_50260510的博客
08-27 3万+
同学同学，你是不是也很头疼VSCode不知道安装什么插件啊？尤其是萌新小白，更是一头雾水，那就快来一起看看吧~
【用Vscode实现简单的python爬虫】从安装到配置环境变量到简单爬虫以及python中pip和request，bs4安装_vscode安装爬虫插件(1)
碧海朝天素
05-14 772
不知道你们用的什么环境，我一般都是用的Python3.6环境和pycharm解释器，没有软件，或者没有资料，没人解答问题，都可以免费领取（包括今天的代码），过几天我还会做个视频教程出来，有需要也可以领取~给大家准备的学习资料包括但不限于：Python 环境、pycharm编辑器/永久激活/翻译插件python 零基础视频教程Python 界面开发实战教程Python 爬虫实战教程Python 数据分析实战教程python 游戏开发实战教程Python 电子书100本。
VS Code 详细安装和插件安装
最新发布
一切皆有可能，无畏将来
06-17 1344
vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari。Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。VS Code提供了非常丰富的插件功能，根据你的需要，安装对应的插件可以大大提高开发效率。给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色。
VsCode一定要安装的几个插件
weixin_42881232的博客
09-22 4386
使用vscode必需的插件
vsCode必装插件
m0_63119026的博客
02-08 371
Vetur Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。React/Redux/react-router Snippets React/Redux/react-router语法智能提示。"eslint.autoFixOnSave": true, // 启用保存时自动修复,默认只支持.js文件。"autoFix": true // 为vue文件开启保存自动修复的功能。"language": "vue", // 检测vue文件。
[总结前端在pink老师推荐的基础上补充]刚下载vscode需要安装的插件
weixin_72322475的博客
10-17 5815
[总结前端在pink老师推荐的基础上补充]刚下载vscode需要安装的插件
vscode必装插件汇总
winkexin的博客
05-13 414
在其官网https://wakatime.com/settings/account 中注册后，在setting获取账号的api key，赋值 ，wakatime会记录你日常编码时间，并上传到其网站上，你可以看到你一段时间内的编码时间。JavaScript(ES6) code snippets ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间。可以智能识别写过的代码结构。
golang在vscode里的离线安装插件
01-21
比较全的golang在vscode里面的插件了，下载下来可以直接安装。 go install github.com/acroca/go-symbols go install golang.org/x/tools/cmd/guru go install github.com/cweill/gotests/... go install github...
在vscode里使用.vue代码模板的方法
12-29
1.设置.vue模板 打开编辑器，点击文件 —— 首选项 —— 用户代码片段，会弹出来一个输入框。 在输入框输入vue，回车，会打开一个vue.json文件。 在里面复制以下代码： { Print to console: { prefix: vue, body: [ <template>, <div class=\container\>\n, </div>, </template>\n, [removed], export default {, data
Visual Studio Code 常用插件
03-08
Visual Studio Code 常用插件,包括bootstrap-3，vscode-icons，jquery，JS-CSS-HTML-formatter，aspnet-helper，path-intellisense（路径自动补全），html css
vscode database client jdbc插件
02-19
5. 插件管理：开发者可以在VSCode的插件市场中搜索、安装、更新或卸载“vscode database client jdbc插件”，简便的管理方式降低了维护成本。 6. 自定义设置：该插件支持多种配置选项，如连接设置、查询历史、结果...
超详细的VSCODE必备插件
qq_39642740的博客
07-01 1859
作为一个嵌入式开发者，最常用的IDE是VSCODE,分享下工作中必备的插件。
vscode常用的9个插件，推荐给你们
gbz2000的博客
01-08 3万+
1. Settings Sync 开发必备神器之一！可以帮助你在不同的设备之间同步vscode所有的配置、插件！！! 虽然配置有好几个步骤，但是一旦配置好了之后使用非常的方便，只需要记住快速上传和快速下载的快捷键即可。甚至你可以选择默认上传、默认下载，保证所有设备的开发环境同步！ 2. Auto Import 这个插件可以帮助我们自动分析代码，快速import项目中的模块。 例如现在我们export了一个api模块： // api.js export const Api = {};
好用的vscode插件
weixin_45121510的博客
07-02 424
我有个习惯，开发vue的时候，懒得写它的格式，就用vbase快捷键，一下就出来了。 只需要安装插件： Vue VSCode Snippets 长下面这样：
VS Code 插件
u011807371的博客
03-08 500
VSCode 必装的 10 个高效开发插件 VSCode好用的插件
vscode+windsurf
02-16
### 如何在 VSCode 中使用 Windsurf 扩展或配置 #### 安装前置条件 为了顺利安装和配置Windsurf，在VSCode环境中需要满足一定的前提条件。确保已安装Visual Studio Code，并拥有稳定网络连接，操作系统支持Windows、macOS或Linux[^1]。 #### 安装Windsurf扩展 对于希望将Windsurf集成到VSCode中的开发者来说，可以通过VSCode的市场来安装此扩展。启动VSCode之后，点击左侧活动栏上的扩展图标（四个方块组成的图形），接着可以在搜索框内键入“Windsurf”。找到对应的扩展后，单击“Install”按钮完成安装过程[^4]。 #### 配置项目环境 一旦成功安装了Windsurf扩展，下一步就是针对具体项目进行必要的初始化操作。按照惯例，先创建一个新的文件夹作为项目的根目录。随后通过`File -> Open Folder...`命令让VSCode加载该文件夹。如果一切正常的话，Windsurf应该会在后台自动识别并建立`.vscode`配置文件夹，其中包含了诸如`launch.json`和`tasks.json`这样的重要设置文件[^3]。 ```json // 示例 launch.json 文件结构 { "version": "0.2.0", "configurations": [ { "name": "Python: Current File (Integrated Terminal)", "type": "python", "request": "launch", "program": "${file}", "console": "integratedTerminal" } ] } ``` #### 使用Windsurf功能 随着上述准备工作就绪，现在可以充分利用Windsurf带来的便利特性了。无论是编写代码还是设计界面程序，都可以借助于其提供的智能化提示和服务。值得注意的是，虽然这里主要讨论了与Python相关的场景，但实际上Windsurf适用于多种编程语言和技术栈。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

守望黑玫瑰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值