素材巴巴 > 程序开发 >

项目开发应该知道这些vscode插件(40 个)

程序开发 2023-09-09 18:53:20

前言

以下插件如果安装了未生效,那么应该重启vscode。

公共基础插件:

在vscode中能实时查看svg图片
在这里插入图片描述

自动完成另一侧标签的同步修改

给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色

让使用不同编辑器的开发者能够轻松惬意的遵守最基本的代码规范

根据一定的语法使用,快速生成html代码片段
参考这里

格式化 html ,js,css

脚本代码规范化检查,语法校验

突出显示匹配的开始或结束标签。

ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

.env 文件 高亮

在html文件中能直接鼠标右键,能单击打开浏览器选项启动

引入文件路径智能提示
在这里插入图片描述

在html标签中引入图片,在悬停时显示图像预览,且能左边会有小图片显示,也能快速跳转到图片文件。
在这里插入图片描述

在代码中突出显示 TODO,FIXME 和其他注释。(一般在项目开发中需要重点做标记时使用)
在这里插入图片描述

显示 package.json 文件中每个软件包的最新版本。
在这里插入图片描述

智能提示CSS类名以及id

智能提示HTML标签,以及标签含义

颜色值高亮。十六进制颜色值、rgb颜色值都智能显示!更重要的是,使用sass等css扩展语言在引入变量颜色值时,也能高亮显示颜色!!
在这里插入图片描述

jQuery代码智能提示

实时预览markdown,markdown使用者必备
在这里插入图片描述

映射vscode上的断点到chrome上,方便调试
配置参考这里

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

vscode的中文翻译包,安装之后重启vscode会发现原来英文界面变中文界面了。

使用require 时的包名提示

启动服务运行代码,保存后自动刷新。
在html文件中鼠标右键点击下图中的选项,会自动开启一个服务来运行我们的代码。修改文件后保存会自动刷新页面。
在这里插入图片描述

1、平时写一些测试代码,和一些逻辑库,快捷键 Ctrl+Alt+N, 喝口水就可以看到结果了。
2、可以选中部分代码运行(前提是选中代码逻辑完整),也可以整个文件运行(也需要该文件的代码逻辑完整)。不选中运行就是运行整个文件的代码。
3、一键运行多种语言运行代码片段或代码文件: c,c + + ,Java,JavaScript,PHP,Python,Perl,Perl 6,Ruby,Go,Lua,Groovy,PowerShell,BAT/CMD,BASH/SH,f # Script,f # (。NET 核心) ,c # 脚本,多到你想不到。在这里插入图片描述

谁提交了代码? 直接在VSCode里面,查看Git的历史,搜索,版本对比。巴适!!。
在这里插入图片描述

GitLens功能更加强大,无缝导航和浏览 Git 存储库。
效果: https://www.jianshu.com/p/a91cb8a2e55d
还有更多功能自行搜索下~~在这里插入图片描述

如果项目中使用TypeScript进行开发,那么如何快速生成申明文件呢?这款插件就可以帮到你,一键生成,减少手敲!

快速生成文件、函数注释。
如果是新建的文件会立即主动生成文件头部注释。
在这里插入图片描述然后自己补充完整注释,举例如下:
在这里插入图片描述

引入包时提示依赖包大小。

VSCode内置css格式化功能,这款支持less, sass,高效美观。

选中变量按住快捷键(ctrl + alt + L)自动生成console.log。
注意:如果快捷键不生效那应该是和其他应用(比如QQ密码锁)冲突了,需要修改其他应用的快捷键。
在这里插入图片描述
说明:默认生成的打印不一定是这样,需要自己去修改配置
在这里插入图片描述

给缩进添加一种颜色,让你更加直观的看到代码层次。

vue项目插件:

vue文件语法高亮、智能感知、Emmet等
更多功能请看:https://vuejs.github.io/vetur/guide/

Language support for Vue 3。提供了更好的功能并有更好的TS支持
更多请看:https://blog.csdn.net/tgs2033/article/details/123079992

vue代码片段

react项目插件:

可以把styled-components的语法提示高亮

微信小程序项目插件:


参考文章:

高效的编码:我的VS Code设置
vscode 前端常用插件推荐
web大前端必备的VSCode插件,常用的(15个)


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。