鱼C论坛

 找回密码
 立即注册
查看: 1057|回复: 67

[学习笔记] 让开发效率飞起的VS Code插件!

[复制链接]
最佳答案
63 
发表于 2020-5-5 20:12:13 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 Hello. 于 2020-7-1 20:24 编辑
常规篇完结^_^



本次 ,让沐沐带领你见识那些让开发效率飞起的 VS Code 插件 !


2020.6.25 修订说明据说小师妹要根据本篇文章做一期视频哦 ~ 特意重新排版,望大家多多支持小师妹  !
2020.6.26 修订说明:增加推荐 ;修改了一些错误 ;正准备提供插件打包下载
2020.6.27 修订说明:打包已完成 ,正在完善( 就等小师妹一声令下啦 );增加了三个动图演示 ;准备出安装教程

2020.6.28 修订说明
:提供蓝奏云打包链接下载( 回复可见 )




                               
登录/注册后可看大图




今天 ,我们推荐几款 VS Code 的插件


VS Code 可以说是 宇宙第一IDE -- vs 的亲儿子 ,功能十分强大 ,并且 启动速度比 VS 快了(十)几倍


这样强大的文本编辑器 ,如果有合适的插件搭配 ,会不会更完美 ? vim 大佬留步,毕竟 vim 快捷键可以导入到这里 ~ 嘿嘿




                               
登录/注册后可看大图


                               
登录/注册后可看大图

不妨先看看作者的部分插件 :
vscode插件证明.png vscode插件证明2.png

几个语言插件 & Java 工具包 & 几个增强 前端插件占多数


                               
登录/注册后可看大图



所以 : 今天主要推荐的是前端的插件( 其他语言可直接对应插件包 )



所有的插件 都可在商店里找到,我附上名字,搜索下载就 OK





                               
登录/注册后可看大图


                               
登录/注册后可看大图




一 、汉化插件( Chinese language )


没什么可说的 ,也不需要配置 ,需要汉化就下载( 不会像 pycharm 汉化容易崩溃 )



二 、字体( Fira code )


这我必须给你们洗脑 ,自从我看到这款字体 ,再也没碰过别的 ,这简直就是为写代码而生 干净整洁美观护眼 !


比较图( 左 Fira code )
fira字体对比.png          



代码图
fira code6.png




这字体是我在 GitHub 里面看到的 ,VS Code 里面应该没有 下载下来需要安装配置


地址传送下载


三 、CSS 高亮( Color Highlight )


是不是内置的我忘了 ,如果没有就下载一下 ,这看起来很直观


                               
登录/注册后可看大图



四 、快速运行( Code Runner )



可以将代码快速运行,不用搭建环境,支持


C , C++ , Java , JS , PHP , Python , Perl , Ruby , Go , Lua , Groovy , PowerShell , CMD , BASH , F# , C# ,

VBScript , TypeScript , CoffeeScript , Scala , Swift , Julia , Crystal , OCaml , R , AppleScript , Elixir ,

VB.NET , Clojure , Haxe , Obj-C , Rust , Racket , Scheme , AutoHotkey ,AutoIt , Kotlin , Dart , Pascal , Haskell , Nim

下载量已超过 400w+( 数据截至 2020.6.26 )



五 、彩色括号( Bracket Pair Colorizer )


自动识别标色成对括号 ,使用不同颜色标记不同括号 多括号时一目了然 ( 如图,我好像弄的 js .. )

彩色括号.png.jpg



六 、自动闭合( Auto Close Tag )



HTML 中 ,写出首标签后 ,尾标签会直接出现( 不推荐小白使用 ),还有几个特殊功能需要自己配置( 如 gif )
自动闭合.gif



七 、只改一次( Auto Rename Tag )


HTML 中 ,有时需要修改标签 ,但是隔得太远又找不到( 隔千行你难道去找 ?)

此插件在修改标签时 ,会
同时修改首尾 两个标签 ,解决了困扰已久
的问题( 如 gif )

双标签调整.gif



八 、自动补全文件路径( Path intellisense )



不多说了,直接看吧( 如 gif )



路径自动补全.gif


九 、实时运行 js( Quokka.js )


这个可就厉害了 ,代码写完直接出结果 ,结果还能随着代码修改而实时修改 ( 如 gif )

qukka.gif


十 、实时检查( Code Spell Checker )


拼写错误实时监测 ,适用于英语不好的小白 ~


十一 、定制图标 、树状展示( Vscode Great Icons )


一目了然 ,再也不担心区分不开 不同类型文件啦( 如图 )

定制.png


十二 、代码自动补全( Visual Studio Intellicode )


划重点 代码自动补全 !代码自动补全 !用了你就知道多强大 !( 如 gif )

python-intellicode.gif


十三 、调试( Debugger for Chrome )


如果你想调试 JavaScript 程序 ,你可以不必离开 VS Code 开发环境


Debugger for Chrome 这款插件就可以做到这点 ,它由微软发布 ,允许你在 VSCode 中直接调试网页源文件


该插件主要利用 Chrome 所开放出来的接口来实现对其渲染的页面进行调试



十四 、实时颜色显示( Color Picker


上图感受一下( 特别直观 )


实时显示.png


十五 、自动格式化 (
Prettier - Code formatter


小师妹在视频里介绍了哦 ,可以在保存时按照自己的偏好来格式化代码 ~



十六 、网页运行 ( live server )

好多大牛都推荐的插件 ,好不好用只有尝试才知道 ( 如 gif )
live .gif


十七 、为什么我要把 js 成品 格式化为一行 ?

给你们看看不格式化成一行的成品
千行代码.png



800 行 + ,而且是每行都写满 ,看着很乱吧 ,如果按照格式来,起码 3000 行 +


如果成品不需要修改更新 ,建议都格式化成为一行( 脚本除外 )



并且 js 文件的空格占字节的 写成一行能缩小文件大小 ,文件越小效果越好


你可以通过插件来把 js 格式化成一行 / 恢复多行 ( 上期 Chrome 插件前端助手也可以 )




                               
登录/注册后可看大图

蓝奏云插件打包( 附安装教程 )下载: 回复可见

游客,如果您要查看本帖隐藏内容请回复


要是我没写到的,可以看看开头那两张图,自己体验一下,如果有更好的,欢迎在评论区推荐!

写的有点匆忙,不好意思!



                               
登录/注册后可看大图







声明原创作品,如有侵权,请联系删除;如有雷同,纯属巧合;非商业推荐,无广告嫌疑

转载请注明出处及作者

统计

准备及体验时间:3 天

写作时间:2 天

整理时间:1 天

字数:13900 字节

作者:曦沐


特别鸣谢:

所有支持
【安全时刻】&【工欲善其事】系列以及支持安全实验室的朋友们!


写这篇文章耗费了大量心血,希望各位支持一下!
如果喜欢,记得收藏+评分吖,


如果有收获,别忘了评分

210423oyl33d3ko22mqp66.gif


















评分

参与人数 16荣誉 +37 鱼币 +46 贡献 +33 收起 理由
叶樱枫 + 1 + 1 鱼C有你更精彩^_^
Clement_Levi + 2 + 3 + 3 鱼C有你更精彩^_^
Twilight6 + 5 + 5 + 3 鱼C有你更精彩^_^
nizitao + 1
不二如是 + 2 + 3 + 3 鱼C有你更精彩^_^
鱼C-小师妹 + 2 + 3 + 3 鱼C有你更精彩^_^
March2615 + 3 + 3 + 3 鱼C有你更精彩^_^
MIke_python小小 + 1 + 1 鱼c有你超精彩
Mrzhou1201 + 3 + 3 + 3 鱼C有你更精彩^_^
悠悠2264 + 3 鱼C有你更精彩^_^

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
63 
 楼主| 发表于 2020-5-5 20:18:01 | 显示全部楼层
本帖最后由 Hello. 于 2020-6-25 10:13 编辑
淘帖:
【工欲善其事】系列:传送门
【安全时刻】系列:传送门


各位看官,订阅~五星~好评走一波!

评分

参与人数 1荣誉 +5 贡献 +3 收起 理由
liuzhengyuan + 5 + 3

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
149 
发表于 2020-5-5 20:14:16 | 显示全部楼层
本帖最后由 liuzhengyuan 于 2020-5-5 20:17 编辑

沙发
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
31 
发表于 2020-5-5 20:16:39 | 显示全部楼层
liuzhengyuan 发表于 2020-5-5 20:14
插件那里下载……

上vscode上搜
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
28 
发表于 2020-5-5 20:18:13 | 显示全部楼层
来咯来咯
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
63 
 楼主| 发表于 2020-5-5 20:21:33 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2020-5-5 20:23:11 | 显示全部楼层
支持一波!!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
11 
发表于 2020-5-5 20:23:49 | 显示全部楼层
感谢@
小沐在手,便捷我有
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
63 
 楼主| 发表于 2020-5-5 20:24:12 | 显示全部楼层
隔壁繁星吖 发表于 2020-5-5 20:23
感谢@
小沐在手,便捷我有

哈哈~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
63 
 楼主| 发表于 2020-5-5 20:24:44 | 显示全部楼层

感谢支持~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
63 
 楼主| 发表于 2020-5-5 20:25:18 | 显示全部楼层

感谢一如既往的关注!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
63 
 楼主| 发表于 2020-5-5 20:27:05 | 显示全部楼层

欢迎你盗版一下安装教程
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
28 
发表于 2020-5-5 20:28:19 | 显示全部楼层
Hello. 发表于 2020-5-5 20:27
欢迎你盗版一下安装教程

。。。。。。
我不贪多,1个鱼币

评分

参与人数 1鱼币 +1 收起 理由
Hello. + 1 请不要无意义灌水!

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
63 
 楼主| 发表于 2020-5-5 20:36:54 | 显示全部楼层
@wuqramy @老八秘制
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
403 
发表于 2020-5-5 20:39:41 From FishC Mobile | 显示全部楼层
今天调试一下live  server
实在是太NB了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
830 
发表于 2020-5-5 21:01:56 | 显示全部楼层
我记得之前装了vscode,装了clang插件来补全C/C++
一敲代码处理器占用就100%,^_^

后来我就换vim了,

评分

参与人数 1鱼币 +1 收起 理由
Hello. + 1 vim捣鼓好久我也没懂,现在vscode优化的很.

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2020-5-5 21:08:03 | 显示全部楼层
沐神的帖子怎么能沉呢!
千斤顶!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
104 
发表于 2020-5-5 21:10:24 | 显示全部楼层
JS那个真的把我恶心坏了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
31 
发表于 2020-5-5 21:25:46 | 显示全部楼层
你浏览器开那么多插件不会影响上网速度吗

(我浏览器上的插件经常在电脑管家清理垃圾的时候被删了T_T)
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
14 
发表于 2020-5-5 21:28:21 | 显示全部楼层
Hello. 发表于 2020-5-5 20:21
@qiuyouzhi @隔壁繁星吖 @永恒的蓝色梦想 @weiter @zltzlt
快来支持啦~

来啦来啦~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐上一条 /1 下一条

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1

GMT+8, 2020-7-9 16:27

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表