史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)

文章目录

  • 一、什么是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
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第1张图片

四、安装

下载完成后D盘新建web文件夹,将下载的文件放进web文件夹史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第2张图片
解压,为方便以后更新版本,修改文件名为VSCode
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第3张图片
双击进入VSCode文件夹,在此目录下新建data文件夹,此目录存放插件。
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第4张图片
双击Code.exe即可打开VSCode
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第5张图片
下面就可以正常使用了

五、插件安装

点击左边地五个图标可以安装插件,这里推荐一些插件,
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第6张图片

1.Codelf

变量命名神器
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第7张图片

2、View In Browser

在浏览器里面预览正在编辑的html文件
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第8张图片

3、Color Highlight

高亮显示样式颜色
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第9张图片

4、Bracket Pair Colorizer

成对的彩色括号,让括号拥有独立的颜色,便于区分
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第10张图片

5、Highlight Matching Tag

高亮显示对应的HTML标签以及标识出对应的各种括号
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第11张图片

6、Path Intellisense

在编辑器中输入路径的时候,能自动补全
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第12张图片

7、Prettier - Code formatter

格式化代码
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第13张图片

8、Auto Close Tag

自动补全标签
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第14张图片

9、Auto Rename Tag

自动重命名html标签,如修改p标签为a,将自动修改结尾标签p为a
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第15张图片

10、HTML Snippets

智能提示HTML标签,以及标签的含义
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第16张图片

11、HTML CSS Support

在HTML标签上写Class的时候能够智能提示当前所支持的样式
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第17张图片

12、indent-rainbow

带颜色的缩进
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第18张图片

13、change-case

转换命名风格
史上最全VSCode插件,怪不得写代码头疼,VSCod安装与配置(适合小白)_第19张图片

六、总结

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


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


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

你可能感兴趣的:(Web)