VSCode最全实用插件

·  阅读 3434

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第3天,点击查看活动详情

1、必备插件

1.1、 Chinese(中文)

5c15b65acfcb42169cba94443fffeaa3.png

安装后,按快捷键Ctrl+Shift+P,输入 configure language

e6381f02c9bc44cb812ae3c727c94b40.png

1.2、Settings Sync(配置同步到云端)

可以让我们的vscode配置同步到云端,当我们跟换电脑或者再次安装vscode的时候,只需要登录账号即可同步配置了

4993ec2584274f73a8dddc8069495b65.png

1.3、wakatime(编程时间及行为跟踪统计)

e76f4e53f0e34f75a0cf66fa438bd702.png 编程时间及行为跟踪统计 db75793c14f04a0c8cb25567f7b91bbf.png

2、效率神器

2.1、HTML Snippets(代码提示)

6aa41dd2a44142c1beb430a7f21f46a3.png HTML代码片段,该插件可为你提供html标签的代码提示,不用键入尖括号了

2.2、Auto Close Tag(自动闭合标签)

自动闭合HTML/XML标签 7e2bbd48a8714aa495299df2e8f1151e.png

2.3、Auto Rename Tag

更改 HTML/XML 标签名时,自动更新相对应的开始标签或结束标签的标签名 WeChate976e020f8f0be96c1ae99e9aca2d9d8.png

2.4、Bracket Pair Colorizer(括号做颜色区分)

a7c7d53c32474073ab0c678448fcc96e.png

2.5、Browser Preview(VSCode里面打开浏览器)

可以在vscode里面打开浏览器,一边编码一边查看 f61808e380e244b1acdbd1dbbcac73de.png

2.6、REST Client(接口调试)

可以在vscode里面进行接口调试,提供丰富的api配置方式,让我们不用离开编辑器也可以随时调用接口调试

新建一个.http文件,写下基本的测试代码,点击 Send Request即可在右边窗口查看接口返回结果,非常nice

d96e7f96125e4fb494f4e850b89fb2db.png

2.7、CSS Peek(css样式查看器)

ccca7fd7f9624f309dc173554a57ca93.png

2.8、Partial Diff(文件比较)

文件比较 WeChat1d0cd89cabdef49589cf78bbbef3a83e.png

2.9、Npm Intellisense(自动完成导入语句中的npm模块)

可自动完成导入语句中的npm模块 WeChat2cc7c8a74404a18087197eae330bc09e.png

2.10、open in browser(快速打开html文件到浏览器预览)

快速打开html文件到浏览器预览 WeChat03a53ee83812f21d26ceeb6ae92d760d.png

2.11、Path Intellisense(快速引入文件)

自动提示文件路径,支持各种快速引入文件 WeChat08e7a03bb2acba5dc324793acf1aa44b.png

2.12、Image preview(预览图片)

鼠标悬浮在链接上可及时预览图片 WeChat4e177ed2b43e7c6950d61b522e66ae97.png

2.13、VS Code JavaScript(ES6) snippets

为 JavaScript、TypeScript、HTML、React 和 Vue 提供了 ES6 的语法支持 WeChat62be85f1d979526c165ea36562b4ac9a.png

2.14、Vetur(官方钦定Vue插件)

VScode官方钦定Vue插件,Vue开发者必备。内含语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger等实用功能 WeChat71a0afec9da15ec277434e73ca108aa5.png

2.15、Vue 2 Snippets

vue2代码补全 WeChat3455daaf118c2bc1183b3b13200e89c3.png

2.16、vue vscode snippets

vue快捷键

如:vbase、vdata、vmethod等等 WeChat5a750ee696471b6dbbeefacd7feddd51.png

2.17、Vue Language Features (Volar)

vue3插件 WeChat0181633b0872374785d0253477078898.png

2.18、wechat-snippet

微信小程序代码辅助,代码片段自动完成 WeChat453db498ef342d6ae40aaa1836de33ca.png

2.19、wxml

微信小程序wxml格式化以及高亮组件(高度自定义) WeChatfcc85a0d16f985c2d9136cb4a2a767e5.png

2.20、live-server

在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。

2.21、uniapp-snippet

uniapp片段提示

2.22、Flutter

Flutter代码支持

2.23、SVG Viewer

无需离开编辑器,便可以打开 SVG 文件并查看它们

3、Git集成

3.1、Git Graph(Git 图形化显示和操作)

90b43f1ed93440b099cb6d341fe984fa.png 左下角点击进行展示git graph

WeChatab0939bb1a31b9e2c060ea97c6d06ce2.png

c7062a1bce0b4b2ea857b5eef669bc01.png

3.2、GitLens(快速查看更改行或代码块的对象)

GitLens可以帮助您更好地理解代码。快速查看更改行或代码块的对象

3.3、GitHistory(可查看和搜索git日志以及图形和详细信息)

GitHistory可查看和搜索git日志以及图形和详细信息,同时还支持分支比较,分支管理等操作

在你选择查看的文件后,可以使用快捷键 Alt + H,将会在界面中的右侧显示当前文件的提交历史。

4、美化

4.1、vscode-icons(漂亮的目录树图标主题)

提供了非常漂亮的目录树图标主题 a039ebcd325c442481015a28ab64e128.png

4.2、Beautify(右键鼠标一键格式化)

在代码文件右键鼠标一键格式化 html,js,css

4.3、Better Comments(丰富注释颜色)

丰富注释颜色

自定义样式,需要写入配置代码

配置代码 "better-comments.tags": [ {"tag": "*","color": "#98C379","strikethrough": false,"backgroundColor": "transparent" }] 使用// * 绿色的高亮注释复制代码TODO Tree

5、代码规范

5.1、change-case(变量命名规范)

变量命名规范

5.2、JavaScript Booster(代码改进)

会提示对应的不合理原因和改进方案

5.3、avaScript (ES6) code snippets(智能提示与快速输入)

ES6语法智能提示,以及快速输入

5.4、ESlint(严谨的规范书写)

规范js代码书写规则,如果觉得太过严谨,可自定义规则

5.5、TSLint(书写规范)

ts的书写规范,这个插件是一个系列,同时还提供了TSLint (deprecated),TSLint Vue,TSLint Vue-TSX

5.6、Code Spell Checker(拼写检查程序)

是拼写检查程序,检查不常见的单词,如果单词拼写错误,会给出警告提示

5.7、koroFileHeader(生成文件头部注释和函数注释)

在vscode中用于生成文件头部注释和函数注释的插件,经过多版迭代后,插件:支持所有主流语言,功能强大,灵活方便,文档齐全,食用简单!

不光如此,还能生成一些特别有意思的注释,比如这一条喷火龙...

6、装X神器

6.1、超越鼓励师

在 VS Code 中连续写代码一小时(时间可配置),会有杨超越提醒你该休息啦~

6.2、韭菜盒子

韭菜盒子,VSCode 里也可以看股票 & 基金实时数据,做最好用的投资插件

6.3、我不爱掘金

把掘金网站塞到VSCode里,并添加了更多乐趣!

6.4、小霸王

小霸王是一款基于vscode的nes游戏插件,能让你在紧张的开发之余在vscode里发松身心。通过劳逸结合,提升开发效率。

6.5、Markdown All in One(书写Markdown)

可以在vscode里面快乐的书写Markdown,功能强大。丰富的快捷键,边写边看,轻松转化为html或pdf文件

6.6、Polacode-2020(转化成一张逼格满满的图片)

可以将我们的代码转化成一张逼格满满的图片

6.7、WeReadForVSCode

WeRead for VSCode 微信读书 VSCode 插件

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改