VS Code 简单使用

软件开发初学者

已于 2022-05-22 15:04:50 修改

阅读量583

点赞数

分类专栏： # 开发工具使用文章标签：编辑器 vscode

于 2022-05-22 15:04:12 首次发布

本文链接：https://blog.csdn.net/u011743790/article/details/124910783

版权

开发工具使用专栏收录该内容

4 篇文章 0 订阅

订阅专栏

VS Code安装

官方地址：https://code.visualstudio.com/

在这里插入图片描述

注：网上教程一大堆，一键傻瓜式安装！（新版软件有User 与 System版，为避免文件目录权限问题，建议安装System版）

基础配置

1. 更换默认的主题

文件 --> 首选项 --> 颜色主题

在这里插入图片描述

根据个人喜好设置，这里我选择了一个浅色的主题。

2. 设置字体大小和主题

左下角工具齿轮 --> 设置（Ctrl + ,）

在这里插入图片描述

常用插件安装

1. Chinese (Simplified) (简体中文)

此中文（简体）语言包为 VS Code 提供本地化界面。

在这里插入图片描述

2. emmet插件使用（内置）

该插件在VS CODE中已内置支持了，在编辑HTML、CSS文件代码时会更加高效。

使用文档介绍：https://docs.emmet.io/

快捷方式一览表：https://docs.emmet.io/cheat-sheet/

在这里插入图片描述

注：可在设置中修改Emmet的默认配置。

在这里插入图片描述

在没有提示展开时，输入Tab键也会带入代码片段。

3. open in browser

右击可在浏览器中打开页面。（Alt + B：在默认浏览器中打开）

在这里插入图片描述

4. JS-CSS-HTML Formatter

保存的时候自动格式化JS、CSS、HTML文件。（）

在这里插入图片描述

注：按下F1，并输入"Formatter Config"来配置相关的格式化规则。可通过快捷键“Alt + Shift + F”来手动格式化文件。

5. Auto Rename Tag

变更标签时，自动替换结束标签与之相匹配。

在这里插入图片描述

6. CSS Peek

按住Ctrl或者在样式上按下F12即可查看样式定义。

在这里插入图片描述

常用快捷键

1. 打开设置界面

快捷键：Ctrl + ,

在这里插入图片描述

2. 新建文本文件

快捷键：Ctrl + N

在这里插入图片描述

3. 放大或缩小视图区

快捷键：Ctrl + 加号（放大）、Ctrl + 减号（缩小）

4. 快捷命令面板

快捷键：Ctrl + Shift + P

在这里插入图片描述

5. 打开文件

快捷键： Ctrl + O

6. 在选中的多行行尾一起编辑插入

快捷键：Shift + Alt + I

7. 多行同时编辑

快捷键：Alt + 鼠标左键：在多行的鼠标点击过的位置插入光标，进入到插入状态。

常用快捷生成代码

1. 在html中快捷生成HTML网页结构代码

操作方式：在html文件中输入"!"叹号，然后通过上下箭头控制选择，并通过鼠标点击或者Tab键来选择生成。

在这里插入图片描述

2. 自定义设置代码片段

左下角设置 --> 用户代码片段

在这里插入图片描述

注：这时可选中创建全局代码片段和对应作用域的代码片段。例如：自定义一个快速创建函数的代码片段，首先选择javascript.json文件，然后输入如下代码

"creat function": {
    "prefix": "function",
    "body": [
        "function ${1:functionname}(${2:aragments}) {",
        "$3",
        "}"
    ],
    "description": "create a function"
}

prefix：触发代码片段提示的前缀。
body：创建代码片段内容。
- ${1:functionname}：表示第一个动态值，可在创建后修改，并使用Tab键切换到第二个变量值。functionname表示默认显示的名字。
- 上述变量可写成$1。这样代码片段创建后没有默认显示值。
description：描述信息
create function：说明信息。