初识VS Code -- 安装与基础运用

VS Code还有一些文件/文件夹新建的问题链接：https://blog.csdn.net/weixin_44762145/article/details/117281524

1.VS Code简介

VSCode 全称 Visual Studio Code，是微软公司推出的一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补、git等特性，支持插件扩展等。软件跨平台支持Win、Mac以及Linux。

推荐理由：

1.比sublime开源，比webstorm更轻

2.智能提示强大

3.自带emmet语法（自动补充），sublime需要下载插件

4.插件安装非常方便

5.自带强大的调试功能

6.软件跨平台支持Win\Mac以及Linux系统

。。。

2.VS Code下载与安装

2.1下载

官网下载地址：https://code.visualstudio.com/

Windows系统点击Windows

Mac系统点击MacOS

2.2安装

VSC安装包很小，仅有43MB左右

安装包下载好之后点击运行，同意协议一直点击“下一步”，

注意：安装位置默认安装在C盘，如果考虑到C盘存储空间，可以更换其他盘

一直点击“下一步”，选择创建桌面快捷方式，接着点击“下一步”，等待安装即可

3.VS Code使用（下图显示已添加过中文翻译插件并更改风格，所以会和刚下载好的不一样，之后都会有讲到）

3.1文件目录管理

File（文件）--open floder(打开文件夹)

可以在桌面或任意盘中新建文件夹，进入VS Code找到文件夹所在位置并打开文件夹

 

打开后，左侧呈现如下：

文件夹名称右侧图标按钮从左向右依次是：新建文件、新建文件夹

3.2颜色主题更换

左下角设置首选项按钮（齿轮状）--- color Theme（颜色主题）

VSC默认Dark+(default dark)风格

点击 color Theme 显示如下：

我选择的是浅色+（默认浅色）则呈现效果如上图

可以根据各自的喜好自行修改

比较喜欢sublime风格的朋友可以点击"Monokai"

3.3其他操作

放大缩小视图：Ctrl + “+” / Ctrl + “-”

向上复制一行：alt + shift + ↑

向下复制一行：alt + shift + ↓

当前光标点击到某一行时，默认选中全行，可以直接复制剪切

4.VS Code 插件安装（注意：需要在联网情况下才可以安装）

4.1汉化插件安装方法

插件安装按钮：点击左侧边栏第五个（及最后一个）按钮，如果没有安装过插件，点开后界面是空的

在搜索框中搜索“Chinese (Simplified) Language Pack for Visual Studio Code”，或者可以只输入Chinese，如图：

点击第一行出现的插件（中文简体翻译），点击安装：

安装好后“安装”字样位置会出现齿轮样式，如下图：

这时候需要重启，关闭VS Code，再次打开VS Code则显示的是汉化样式

4.2右键在浏览器打开文件插件安装

同上，点击第五个插件安装按钮

在搜索框中搜索open

找到open in browser ，点击安装

安装完成后在代码页面右键，则可以直接在VS Code里打开网页

open in default browser：用默认浏览器打开

open in other browser：用其他指定浏览器打开

4.3代码格式化对齐插件

强烈推荐！！！强迫症的福音

它的作用就是每次保存都会自动格式化js\css和html代码

注意：安装完毕后需要重启才能使用。

使用方式：

当网页写好未保存时：

保存过后：

可以发现div标签已经自动排序对齐了！

4.4自动配对标签的插件

当重命名标签时，每次修改都要多选之后再修改，那能否修改时自动配对，成对地修改呢？

下面这个插件就很好的满足了大家的要求：

同样，在搜索栏输入“Auto Rename Tag”，并点击安装，如下：

当修改前标签<div>为<ul>时，后标签</div>会自动改为</ul>：

VS Code还有一些文件/文件夹新建的问题链接：https://blog.csdn.net/weixin_44762145/article/details/117281524