web前端开发vscode实用插件

最新推荐文章于 2024-10-18 12:44:28 发布
最新推荐文章于 2024-10-18 12:44:28 发布
阅读量315 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54197236/article/details/132608026
版权

一、通用

1. 别名路径跳转

在这里插入图片描述

2. Auto Close Tag

在这里插入图片描述

3.Auto Rename Tag

在这里插入图片描述
4.Code Runner
在这里插入图片描述
5.Code Spell Checker
在这里插入图片描述

6.CSS Navigation
在这里插入图片描述
7. Easy LESS、Easy SASS
在这里插入图片描述
在这里插入图片描述

  1. GitLens — Git supercharged
    在这里插入图片描述

9.HTML-Comment
在这里插入图片描述
10.Image preview
在这里插入图片描述

11.koroFileHeader
在这里插入图片描述
12.Live Server
在这里插入图片描述13.Open In Default Browser
在这里插入图片描述
14. Path Intellisense
在这里插入图片描述

二、vscode样式/主题

1.颜色主题

2.产品图标主题主题

Material Icon Theme
在这里插入图片描述

三、前端框架

1.vue

1.AutoScssStruct4Vue
在这里插入图片描述
Vue Language Features (Volar)
在这里插入图片描述
vue-helper
在这里插入图片描述

2.react

ES7+ React/Redux/React-Native snippets
在这里插入图片描述
Fullstack React/React Native snippets
在这里插入图片描述
React Hooks Snippets
在这里插入图片描述
Simple React Snippets
在这里插入图片描述
Typescript React code snippets
在这里插入图片描述

3.小程序

小程序助手
在这里插入图片描述
vscode wxml
在这里插入图片描述

wechat-snippet
在这里插入图片描述
WXML - Language Service
在这里插入图片描述

四、UI组件

1. antd

2. element

Element UI Snippets
在这里插入图片描述

五、AI
1.CodeGeeX: AI Code AutoComplete, Chat, Auto Comment
在这里插入图片描述
Tabnine
在这里插入图片描述

5.其他

Tailwind CSS

Tailwind CSS IntelliSense
在这里插入图片描述
Tailwind Fold
在这里插入图片描述
Tailwind Snippets
在这里插入图片描述

学敲代码的画图狗
关注
《web开发： VSCode 配置》
yexiangCSDN的专栏
01-21 995
一、vscode 配置 1. 插件配置 Ctrl+Shift+x 打开安装插件窗口 ①.HTML 中 CSS Class 智能提示 《HTML CSS Support》 插件，安装后配置 settings.json settings.json 中添加： "editor.parameterHints": true, "editor.quickSuggestions": { "other": true, "comments": true, "strings": true }, ..
前端开发利器之VSCode
coder_jxd的博客
04-21 2807
小伙伴们大家好，本次和大家聊聊前端开发者最常使用的编辑器——VSCode。阅读本文，前端萌新可以快速上手此工具，前端老手则可以重新审视有无细节遗漏之处。
Vue3+TypeScript+AntD+Vite+Less+VsCode的完整项目构建及插件推荐
aaaaanqi的博客
10-04 3171
目录使用Vite创建Vue项目 就是尝试一下目前较流行且新的技术栈，以下配置较完整，希望大家看完这篇就可以构建一个完整的Vue3项目框架。 使用Vite创建Vue项目 首先看vite官网，要求 Node版本 >=12.0.0； 在cmd中运行 npm init vite@latest 出现上图，输入项目名称（直接输，不用删除vite-project，它是个未输入时的默认显示），这里我输入了demo，然后按Enter往下 按up、down选择，选好后按回车，我选择vue，继续往下 这里我选择
使用VSCode的vue项目需要安装的插件
qq_53821346的博客
10-10 251
使用VSCode的vue项目需要安装的插件
Ant Design Pro For VSCode 插件推荐
最新发布
gitblog_01287的博客
10-18 343
Ant Design Pro For VSCode 插件推荐 antd-vsce ant design 的 vscode 插件 项目地址: https://gitcode.com/gh_mirrors/an/antd-vsce ...
vscode常用插件
weixin_44671184的博客
04-20 75
1.Auto Close Tag (必备) 自动闭合HTML/XML标签 2.Auto Rename Tag (必备) 自动完成另一侧标签的同步修改 3.Beautify (必备) 格式化 html ,js,css Prettier 格式化JavaScript / TypeScript / CSS 4.Bracket Pair Colorizer (必备) 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 5.Debugger for Chrome (推荐) 映射vs
探索微软的VSCode WebView UI Toolkit：构建现代化Web视图UI的新工具
gitblog_00031的博客
03-24 921
探索微软的VSCode WebView UI Toolkit：构建现代化Web视图UI的新工具 vscode-webview-ui-toolkitA component library for building webview-based extensions in Visual Studio Code.项目地址:https://gitcode.com/gh_mirrors/vs/vscode-...
三、使用VSCode运行vue项目（VSCode插件设置）
热门推荐
weixin_45681674的博客
08-10 2万+
前言1. 打开VSCode1. 下载vetur插件2. 下载eslint插件3. Auto Close Tag 自动闭合HTML/XML标签4. Debugger for Chrome2. 打开vue项目 1. 打开VSCode 1. 下载vetur插件 该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行， 装好后 点击文件->首选项->设置 ->打开设置 界面，在设置界面右侧添加配置。 "emmet.syntaxProfiles": {
web前端开发vscode
10-26
在VSCode中，你可以使用各种插件来增强Web前端开发的体验。例如，你可以使用Live Server插件来实时预览你的网页，使用Emmet插件来快速编写HTML和CSS代码，使用Prettier插件来格式化你的代码等等。 此外，VSCode还...
前端开发工具vsCode
03-07
**前端开发工具Visual Studio Code（简称VSCode）详解** VSCode是Microsoft推出的一款免费、开源的源代码编辑器，尤其适合Web开发。它以其强大的功能、丰富的扩展支持和高效的性能，已经成为全球开发者中最受欢迎的...
vscode插件离线安装包
08-30
5.7.9.vsix**: Live Server 是一个实时预览服务器插件，可以在本地启动一个 Web 服务器，并实时刷新浏览器，每当你的 HTML、CSS 或 JavaScript 文件发生变化时，无需手动刷新，极大地提高了前端开发效率。...
Ant Design Pro For VSCode 插件使用教程
gitblog_00218的博客
08-07 1165
Ant Design Pro For VSCode 插件使用教程 antd-vsceant design 的 vscode 插件项目地址:https://gitcode.com/gh_mirrors/an/antd-vsce 项目介绍 Ant Design Pro For VSCode 是一个为 Ant Design 开发者提供的 Visual Studio Code 插件。该插件旨在提高开发...
Visual Studio Code Webview UI Toolkit 示例项目教程
gitblog_00390的博客
08-20 404
Visual Studio Code Webview UI Toolkit 示例项目教程 vscode-webview-ui-toolkit-samples项目地址:https://gitcode.com/gh_mirrors/vs/vscode-webview-ui-toolkit-samples 1. 项目的目录结构及介绍 vscode-webview-ui-toolkit-samples/...
vscode web版,走到哪用到哪
Love&Share
08-30 3214
那些想拿手机,平板写代码的兄弟，随着vscode web的到来迎来了又一春（狗头），搭建一个web版的vscode实现走到哪用到哪的小目标 其实想省事的话直接安个docker版本的就好 docker版 docker run -dit -p 8080:8080 \ --restart=always \ --name codeserver \ -h vscode \ -u root \ -v /tmp/coder-data:/home \ -v /tmp/coder-config:/ro
Visual Studio Code Webview UI 工具包教程
gitblog_00162的博客
08-13 396
Visual Studio Code Webview UI 工具包教程 vscode-webview-ui-toolkitA component library for building webview-based extensions in Visual Studio Code.项目地址:https://gitcode.com/gh_mirrors/vs/vscode-webview-ui-t...
VScode编辑器+react+Spring+Ant Design
Griner_的博客
07-26 123
查验后node，npm 依赖包都正常安装，缺少yarn依赖包。'max'不是内部或外部命令.等待安装后重新启动完成。1.在终端窗口启动项目。
从入门开始使用Vscode，学写Web也很简单
flippy17的博客
11-30 9362
我在一篇文章里看到过“拥有 VSCode，你就拥有了全世界”。今天向大家介绍在编写html时需要注意的一些小知识。作为简单入门的基础，可以为小白们答疑解惑。 首先我们在安装好Vscode后，很多人刚打开就被一片英文操作系统冲昏了头脑，其实想要设置中文不必麻烦的去安装什么汉化包，只要在程序中搜索中文语音包安装并重启，就完成了中文设置。 接下来就是新建项目开始打代码了，那么要如何新建项目呢，接下来让我带你一起学习新建。首先我们在想要保存项目的路径里新建一个文件夹，然后回到程序中选择打开文件，找到新建的.
Ant Design Pro V5开发系列：（一）vscode常用技巧整理
热水钟博客
06-21 1141
1.vscode顶部如何显示当前文件完整的路径信息（为了看到自己打开是）？
手把手教你如何配置好VS Code的WEB基础开发环境（保姆级）
拔高、提升、创新！
10-09 1629
还在为选择代码编辑器而发愁？还在想VS Code怎么用？ 接下来几篇文章，将为您演示VS Code针对于各个主流语言的环境搭建
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值