VSCode入门教程(2.0)

VSCode入门教程(2.0)

  1. 软件下载
  2. 汉化教程
  3. 常用快捷键
  4. 快捷键映射
  5. 自定义快捷键
  6. 选中文字添加标签
  7. 更换颜色主题
  8. 更改字体
  9. 插件安装推荐

本文主要介绍vscode在工作中常用的插件及快捷键,目标在于提高工作效率。
本文的快捷键是基于window的。


1. 软件下载

根据自己的操作系统下载不同的软件,官网下载地址:

https://code.visualstudio.com/Download


2. 汉化教程

软件下载完毕后,它是英文版的。对于英文不好的可以试试汉化版的,上手会更快一点。
汉化插件安装完成后,要重启后才会生效。

在这里插入图片描述


3. 常用快捷键

如果想快速了解vscode中的快捷键,可以直接在官网或者在vscode中查找。
快捷键为:Ctrl+K Ctrl+S
里面可以查看各种快捷键的功能。

在这里插入图片描述


4. 快捷键映射

对于一些已经使用过eclipse、idea等工具的,可以直接使用快捷键映射的方式把eclipse、idea中的快捷键映射过来。如果之前没有使用过这些工具的,直接使用vscode的快捷键就可以了。

在这里插入图片描述


5. 自定义快捷键

在vscode中还可以自定义快捷键,这样也可以在别的工具上使用熟悉的快捷键,使用在vscode中,方便的上手。
菜单栏找文件—设置—键盘快捷方式,或按下Ctrl+K Ctrl+S,对应上面《常用快捷键》

在这里插入图片描述


6. 选中文字添加标签

菜单栏找文件—设置—键盘快捷方式,注意:默认是Alt+W【图一】,但是它和我的某个快捷键犯冲,于是我把它改成了Shift+W【图二】。

更换快捷键的方式:双击—按下对应快捷键—enter回车。

使用方式:选中要包装的文字,按下Shift+W,默认弹出p标签,然后再更改。注意:要先设置《自动重命名标签(Auto Rename Tag)》插件,当你修改起始标签的时候,结束标签也会随着起始标签的修改而修改,否则不出效果。
在这里插入图片描述 在这里插入图片描述


7. 更换颜色主题

在这里插入图片描述 在这里插入图片描述


8. 更改字体

使用英文逗号可以隔开多个字体,也可调整顺序,把自己喜欢的字体放到最前面。

在这里插入图片描述 在这里插入图片描述


9. 插件安装推荐


(1) 图标插件(vscode-icons

这款插件是文件图标库插件,至少能让你的工具看起来不那么丑,主要是起到一个美化的效果。其效果如下:

在这里插入图片描述


(2) html模板(HTML Boilerplate

在这里插入图片描述 在这里插入图片描述


(3) html与css关联(CSS Peek

可以直接在html代码中,按Ctrl+鼠标左键查看该元素的样式。

在这里插入图片描述


(4) 颜色提示(Color Info

在这里插入图片描述


(5) 浏览器插件一(open in browser

使用方式:在html页面按下鼠标右键,下图有说明,这款插件浏览器不会自动刷新

在这里插入图片描述


(6) 浏览器插件二(Preview on Web Server

① 外部浏览器打开,边写代码—边保存—边及时刷新
② 内置浏览器打开,也会及时刷新

在这里插入图片描述


(7) 万能语言运行环境(Code Runner

如果你需要学习或者接触各种各样的开发语言,那么 Code Runner 插件可以让你不用搭建各种语言的开发环境,直接通过此插件就可以直接运行对应语言的代码,非常适合学习或测试各种开发语言。

支持的语言有:C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, 以及一些自定义的命令。


(8) 快速注释(Document This

优秀的代码除了优秀的性能、规范的格式,注释也是不可或缺的,而且注释也应该有一套标准的注释方法,特别对于 JavaScript 这种语言。Document This 可以快速地帮你生成注释,如一些函数的注释还能帮你抽取出参数的定义等,是你编写规范代码必备的工具。Document This目前仅支持JavaScript和TypeScript。

类似于Java中的文档注释,注意:**先声明方法,在方法按下/回车,才有效果

在这里插入图片描述


(9) CSS类名智能提示(HTML CSS Support

它会提示一些类名供你选择,注意:在属性值的位置按下双引号的时候才会有效果。

在这里插入图片描述


(10) 代码拼写检查(Code Spell Checker

此插件安装后就不用管就好了,在你代码中有单词拼写错误时,你就会发现它的好处,因为我们写代码毕竟都是大量的英文单词变量定义,插件还可以给出错误拼写单词的建议。如果单词有错下面就会出现波浪线。

在这里插入图片描述


(11) 备忘插件(TODO Highlight

在很多的其他代码编辑器中都有 TODO 标注功能的,如你写到某一部分的代码时,其中部分的功能需要稍后再来实现,这是就可以在对应的代码处添加一个 TODO 类型的注释,那么后期就可以快速地跳转到这部分继续写,而且当项目很大的时候,TODO 就变得更加有用,因为有时候 TODO 可能有几十个,帮助你标注那些功能需要继续实现或优化。

在这里插入图片描述


(12) 自动重命名标签(Auto Rename Tag

这个插件对你的标签修改起来一个很大的作用,当你修改起始标签的时候,结束标签也会随着起始标签的修改而修改


(13) 代码格式化(Prettier - Code formatter

注意:有何能会和前面设置的**《快捷键映射》**项犯冲。


(14)自动闭合标签(Auto Close Tag

安装了这个插件后,如果你的起始标签不小心删除的结束标签,只要打 </ 就会自动补全,根据就近原则,一次只能补全一个标签。


(15) 让代码敲出炫酷的火焰(Power Mode

共有六个步骤,下面图片都有详细说明,一定要按照步骤走,其中第四、五、六步要多找会
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


10. 总结

如果按照步骤操作遇到bug,评论区可以问我。
在这里插入图片描述


备注:本文有参考这篇文章去写。

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值