文章目录

  • 一、什么是VSCode?
  • 二、版本
  • 三、下载
  • 四、安装
  • 五、插件安装
    • 1.Codelf
    • 2、View In Browser
    • 3、Color Highlight
    • 4、Bracket Pair Colorizer
    • 5、Highlight Matching Tag
    • 6、Path Intellisense
    • 7、Prettier - Code formatter
    • 8、Auto Close Tag
    • 9、Auto Rename Tag
    • 10、HTML Snippets
    • 11、HTML CSS Support
    • 12、indent-rainbow
    • 13、change-case
  • 六、总结

一、什么是VSCode?

VS Code的全称是Visual Studio Code,但这全名实在是太长了,很多用户喜欢叫它VS Code。说起VS Code,官方定义它是一个免费的、开源的跨平台编辑器。之所以强调“编辑器”,我想是因为 VS Code 并无意成为一个全尺寸的集成开发环境,也就是IDE。
  很多人都把编辑器等同于IDE,其实从专业角度来讲并非这样。IDE 更为关注开箱即用的编程体验、对代码往往有很好的智能理解,同时侧重于工程项目,为代码调试、测试、工作流等都有图形化界面的支持,因此相对笨重,Java程序员常用的Eclipse定位就是IDE;而编辑器则相对更轻量,侧重于文件或者文件夹,语言和工作流的支持更丰富和自由,VS Code 把自己定位在编辑器这个方向上,但又不完全局限于此。
  如果你有兴趣,可以打开自己喜欢的编辑器官网看看它是怎么样的定位。总体来说,近几年流行风向是轻量的编辑器,这也是大势所趋。
  要理解VS Code代码编辑器的设计思路,就需要先看看VS Code的发展轨迹。从我的角度看,不管你是学习编程语言,还是框架、编辑器,都应该先去看看它的来龙去脉,了解它们是怎么发展而来的,曾经遇到了什么问题,又是怎么解决的,这些信息都便于你从大局上提高对事情本质的认识。
VSCode官网:https://code.visualstudio.com/

二、版本

当前最新版:1.45 2020年4月
版本列表:https://code.visualstudio.com/updates/v1_45

三、下载

VSCode下载:https://code.visualstudio.com/Download
这里推荐大家下载Zip解压版
大家根据自己系统版本来下载,我在这里下载64bit
在这里插入图片描述

四、安装

下载完成后D盘新建web文件夹,将下载的文件放进web文件夹在这里插入图片描述
解压,为方便以后更新版本,修改文件名为VSCode
在这里插入图片描述
双击进入VSCode文件夹,在此目录下新建data文件夹,此目录存放插件。
在这里插入图片描述
双击Code.exe即可打开VSCode
在这里插入图片描述
下面就可以正常使用了

五、插件安装

点击左边地五个图标可以安装插件,这里推荐一些插件,
在这里插入图片描述

1.Codelf

变量命名神器
在这里插入图片描述

2、View In Browser

在浏览器里面预览正在编辑的html文件
在这里插入图片描述

3、Color Highlight

高亮显示样式颜色
在这里插入图片描述

4、Bracket Pair Colorizer

成对的彩色括号,让括号拥有独立的颜色,便于区分
在这里插入图片描述

5、Highlight Matching Tag

高亮显示对应的HTML标签以及标识出对应的各种括号
在这里插入图片描述

6、Path Intellisense

在编辑器中输入路径的时候,能自动补全
在这里插入图片描述

7、Prettier - Code formatter

格式化代码
在这里插入图片描述

8、Auto Close Tag

自动补全标签
在这里插入图片描述

9、Auto Rename Tag

自动重命名html标签,如修改p标签为a,将自动修改结尾标签p为a
在这里插入图片描述

10、HTML Snippets

智能提示HTML标签,以及标签的含义
在这里插入图片描述

11、HTML CSS Support

在HTML标签上写Class的时候能够智能提示当前所支持的样式
在这里插入图片描述

12、indent-rainbow

带颜色的缩进
在这里插入图片描述

13、change-case

转换命名风格
在这里插入图片描述

六、总结

插件大家根据个人需要进行下载
VSCode需要配合Git,下篇文章为大家介绍Git安装与配置
这里为大家附上VSCode使用教程:https://geek-docs.com/vscode/vscode-tutorials/what-is-vscode.html
VSCode汉化


博主其他文章:
Windows下JDK安装与配置(超详细,图文详解、适合小白查看)
史上最详细的Java基础知识总结(入门一)
史上最详细的Java基础知识总结(入门二)


由于水平有限,本博客难免有不足,恳请各位大佬不吝赐教!

原文链接:https://blog.csdn.net/weixin_44577543/article/details/106015364

最后修改日期:2020年5月31日