VS Code下载安装使用教程
@
目录一、下载
VS Code下载官网:https://code.visualstudio.com/
点击Download for Windows
点击Download
选择Windows即可
二、安装
双击安装包
点击我同意,然后点击下一步
选择安装路径,然后点击下一步
点击下一步
全选,然后点击下一步
点击安装
安装完成
三、使用教程
3.1 VS Code中的第一个页面HelloWorld.html
点击 文件->新建文件
将文件保存在磁盘中
输入一个英文的感叹号,选泽第一个然后回车
就自动生成了html骨架
VS Code下的第一个程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
Hello World!!!
</body>
</html>
浏览器运行测试
点击运行->启动调试
3.2 VS Code插件安装(黑马程序员)
3.2.1 安装中文界面
使用 Ctrl+Shift+P 打开命令界面
输入 display 选中 Configure Display Language
选中 Install additional language
或者按照下图操作
3.2.3 安装 Open in Browser插件
作用 右击选泽浏览器打开html文件
3.2.4 安装Auto Rename Tag插件
作用:自动重命名配对的HTML/XML标签
注意:
插件安装完成后,一定要重启软件
这后面是bilibili的内容================================================================
bilibili
3.3 code .
命令,即可用VSCode打开项目目录
在项目路径输入cmd,然后按回车
输入node .
命令
打开了VS Code
四 VS Code常见插件安装
4.1 VS Code 主题风格 以及文件图标插件安装和使用
4.1.1 颜色主题
点击设置,然后点击主题,再点击颜色主题
其他颜色主题设置
点击 “+浏览其他颜色主题”
4.1.2 文件图标主题
点击设置,点击主题,点击文件图标主题
点击“安装其他文件图标主题”
选择Material Icon Theme点击安装
4.2 设置默认浏览器 与 LiveServer插件开启本地服务器
VS Code为我们提供了热更新插件
然后修改代码,代码增加了如下两行,按Ctrl+S保存
浏览器这边就自动刷新了
4.3 carbon-now-sh 将代码生成一张图片
- 插件名称:carbon-now-sh
- 作用:可提升逼格的插件,在实际开发中遇到技术问题或者做部分代码片段分享,可以使用该插件将代码生成一张图片
- 使用方法:
o 在VSCode中,选中需要生成图片的代码
o 打开命令托盘:Windows:Ctrl+Shift+P
o 输入Carbon,回车
下载
4.4 prettier格式化代码
- 插件名称:prettier
- 作用:格式化美化代码
- Ctrl+S 保存会自动化
先把代码打乱
安装Prettier - Code formatter
点击设置按钮,点击设置
搜索save,勾选Editor:Format On Save
附加设置:要将这个插件设置为默认选项
我们要以插件的标准来操作
鼠标右键点击“使用...格式化文档”
点击“配置默认格式化程序”
再点击Prettier
再看右键 “使用...格式化文档”
Prettier - Code formatter 设置成了 默认值
这个时候再Ctrl+S,代码格式化成功
五、VS Code相关设置
5.1 字体设置
- 管理(设置按钮)->设置
- 字体大小:20
- 字体系列:JetBrains Mono
5.1.1 字体大小
5.1.2 字体系列
注:
在VSCode中“控制字体系列”添加字体名称(优先级:从左至右)
同时还要在对应的电脑操作系统中安装字体才能生效
下载字体
TIP
JetBrains Mono官方下载地址:https://www.jetbrains.com/lp/mono/
点击Download font下载
在电脑中安装字体
安装
-
下载后解压,进到
ttf 文件夹下
,会有一堆文件,全选后,右键安装 -
所有的字体都叫 JetBrains Mono,全选安装的目的是为了响应各种特殊字体(比如斜体、意大利体、粗体、如果不需要这些花里胡哨的只需安装 Regular.ttf)
5.3 光标设置
管理->设置->光标->控制是否启用平滑插入动画
5.4 关闭代码缩略图
管理->设置
搜素mini,取消勾选 控制是否显示缩略图
5.5 快捷设置字体
可以通过Ctrl键盘+鼠标滚轮来放大缩小
管理->设置
搜索滚动
勾选 “按住Ctrl键并滚动鼠标滚轮时对编辑器字体大小进行缩放”
六、Emmet语法
Emmet 官方文档:https://docs.emmet.io/cheat-sheet/
七、VS Code快捷键
常用快捷键
- 注释:
- 单行注释:
ctrl + k ctrl + c 或 ctrl + /
- 取消单行注释:
ctrl + k ctrl + u
(按下 ctrl 不放,再按 k+u) - 多行注释:
alt + shift + A
- 多行注释 :
/**/
- 单行注释:
- 移动行:
alt + up/down
- 显示/隐藏左侧目录栏
ctrl + b
- 复制当前行:
shift + alt + up/down
- 删除当前行:
shift + ctrl + k
- 控制台终端显示与隐藏:
ctrl + ~
- 查找文件/安装 vscode 插件地址:
ctrl + p
- 代码格式化:
shift + alt + f
- 新建一个窗口:
ctrl + shift + n
- 多行编辑:
Ctrl + Alt + up/dow