软件下载
根据自己的操作系统下载不同的软件,官网地址:
Visual Studio Code - Code Editing. Redefinedcode.visualstudio.com![d834c8325af756ba9d1f3a6f0e47be26.png](https://img-blog.csdnimg.cn/img_convert/d834c8325af756ba9d1f3a6f0e47be26.png)
汉化教程
软件下载完毕后,它是英文版的。对于英文不好的可以试试汉化版的,上手会更快一点。
![63b32c9996fb26f569df6b3bd4419921.png](https://img-blog.csdnimg.cn/img_convert/63b32c9996fb26f569df6b3bd4419921.png)
汉化插件安装完成后,要重启后才会生效。
常用快捷键
如果想快速了解vscode中的快捷键,可以直接在官网或者在vscode中查找。
快捷键为:ctrl+k ctrl+s
![f1f7300f91da73dff8367673335e7895.png](https://img-blog.csdnimg.cn/img_convert/f1f7300f91da73dff8367673335e7895.png)
里面可以查看各种快捷键的功能
快捷键映射
对于一些已经使用过sublime、idea等工具的,可以直接使用快捷键映射的方式把sublime、idea中的快捷键映射过来。如果之前没有使用过这些工具的,直接使用vscode的快捷键就可以了。
![5cd778bfcee6c4800e47920f3668ee7d.png](https://img-blog.csdnimg.cn/img_convert/5cd778bfcee6c4800e47920f3668ee7d.png)
自定义快捷键
在vscode中还可以自定义快捷键,这样也可以在别的工具上使用熟悉的快捷键,使用在vscode中,方便的上手。
![ea93cdaf9b99febc6ca4c3a0fe17eda7.png](https://img-blog.csdnimg.cn/img_convert/ea93cdaf9b99febc6ca4c3a0fe17eda7.png)
插件安装推荐
图标插件(vscode-icons):这款插件是文件图标库插件,至少能让你的工具看起来不那么丑,主要是起到一个美化的效果。其效果如下:
![bf96ec12f1344e10d7ae8c4741c70ee8.png](https://img-blog.csdnimg.cn/img_convert/bf96ec12f1344e10d7ae8c4741c70ee8.png)
如果安装了插件还是没有效果,请检查一下,你是否使用了此插件没有。
html与css关联(CSS Peek):可以直接在html代码中,按ctrl+鼠标左键查看该元素的样式。
![75214ac34367ab2541de2396978a902f.gif](https://img-blog.csdnimg.cn/img_convert/75214ac34367ab2541de2396978a902f.gif)
万能语言运行环境 (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, 以及一些自定义的命令。
快速注释( Document This):优秀的代码除了优秀的性能、规范的格式,注释也是不可或缺的,而且注释也应该有一套标准的注释方法,特别对于 JavaScript 这种语言。Document This 可以快速地帮你生成注释,如一些函数的注释还能帮你抽取出参数的定义等,是你编写规范代码必备的工具。Document This目前仅支持JavaScript和TypeScript。
![5bc9cef456a5e1789015143edbfa7233.png](https://img-blog.csdnimg.cn/img_convert/5bc9cef456a5e1789015143edbfa7233.png)
CSS 类名智能提示(HTML CSS Support):它会提示一些类名供你选择。
![9000054a12393daae744140138b103fd.png](https://img-blog.csdnimg.cn/img_convert/9000054a12393daae744140138b103fd.png)
代码拼写检查(Code Spell Checker):此插件安装后就不用管就好了,在你代码中有单词拼写错误时,你就会发现它的好处,因为我们写代码毕竟都是大量的英文单词变量定义,插件还可以给出错误拼写单词的建议。如果单词有错下面就会出现波浪线。
![646449644b99935993f4360907a97fef.png](https://img-blog.csdnimg.cn/img_convert/646449644b99935993f4360907a97fef.png)
备忘插件(TODO Highlight):在很多的其他代码编辑器中都有 TODO 标注功能的,如你写到某一部分的代码时,其中部分的功能需要稍后再来实现,这是就可以在对应的代码处添加一个 TODO 类型的注释,那么后期就可以快速地跳转到这部分继续写,而且当项目很大的时候,TODO 就变得更加有用,因为有时候 TODO 可能有几十个,帮助你标注那些功能需要继续实现或优化。
![9a673233057c1baba7fbf63424c534f1.png](https://img-blog.csdnimg.cn/img_convert/9a673233057c1baba7fbf63424c534f1.png)
自动重命名标签(Auto Rename Tag):这个插件对你的标签修改起来一个很大的作用,当你修改起始标签的时候,结束标签也会随着起始标签的修改而修改
![a33e9a666bcf206a4d9e0639f60e5ba6.gif](https://img-blog.csdnimg.cn/img_convert/a33e9a666bcf206a4d9e0639f60e5ba6.gif)
html模板(HTML Boilerplate):就是一个很标准html5的模板插件,兼容新老版浏览器。
![3179957fbce8de76979c9971a54110ef.png](https://img-blog.csdnimg.cn/img_convert/3179957fbce8de76979c9971a54110ef.png)
代码格式化(Prettier - Code formatter):
![219dbab8475866c9141a4f8eea387a33.png](https://img-blog.csdnimg.cn/img_convert/219dbab8475866c9141a4f8eea387a33.png)
颜色提示(Color Info):
![b3f11e8ccd849db9e7cff7add5aead08.png](https://img-blog.csdnimg.cn/img_convert/b3f11e8ccd849db9e7cff7add5aead08.png)
自动闭合标签(Auto Close Tag):安装了这个插件后,如果你的起始标签不小心删除的结束标签,只要打 </ 就会自动补全,根据就近原则,一次只能补全一个标签。