VS Code 基础入门使用(配置)教程

发布于:2023-04-27 ⋅ 阅读:(594) ⋅ 点赞:(0)

deepin/UOS 安装完 vscode 后,win+E默认打开vscode解决方案:

xdg-mime default dde-file-manager.desktop inode/directory

设置文件自动保存:依次点击 File -> AutoSave

一. 总体

1.1 安装插件

打开插件面板,可以使用快捷键:Ctrl+Shift+X,或者点击左侧的插件面板:

在这里插入图片描述
常用的通用插件有:

插件 作用
Bracket Pair Colorizer [此插件已废弃,微软收编,现vscode内置] 给不同的括号换上了不同的颜色
Path Autocomplete 路径自动填充
Code Spell Checker 英语拼写检查
polacode 选中代码生成代码图片. 按 F1 输入 polacode 打开
Chinese (Simplified) Language Pack for Visual Studio Code 汉化
Better Comments 提高注释可读性。在注释中最前面加入[ * , ! , ? , todo , // ],注释将以不同颜色或样式显示
Todo Tree 在左侧添加了TODO列表,注释中所有的 TODO 将会以列表的形式列出来,并高亮显示,方便跳转查看
Remote Development 包含了如下插件:Remote - SSH :ssh远程控制;Remote - Containers :docker控制;Remote - WSL 控制Windows Subsystem for Linux(wsl)。也可以单独搜索安装这些插件
Settings Sync 同步你的vscode设置,包括setting文件,插件设置等,不过你要先有github的账户
Draw.io Integration 绘画流程图。在vscode中创建文件后缀为 .drawio ,打开即可编辑。按 F1 ,输入 File: reopen with ,选择文本方式,即可以xml方式打开编辑
Office Viewer 在 vs code 中打开.xls, .xlsx, .csv, .pdf, .md 等格式
Edit csv CSV编辑器
vscode-icons 拓展文件图标
vscode-icons-mac 将vs code图标变为苹果电脑经典图标
filesize 在左下角显示文件大小
codelf 网络查询变量命名,供变量命名参考

1.2 设置面板

打开设置面板,可以使用快捷键:Ctrl+,,或者点击左侧的设置按钮:

在这里插入图片描述

一些常用的设置:

设置选项 实现的功能
Files: Auto Guess Encoding–>true 自动判断文件编码
editor.acceptSuggestionOnEnter–>off 关闭回车自动补全
editor.tabCompletion–>on 按tab键自动补全,一直按一直切换
editor.fontSize–>16 更改字体为16
security.workspace.trust.enabled 永久关闭受限模式
editor.formatOnSave–>true 保存则代码格式化
editor.formatOnPaste–>true 复制代码格式化
editor.formatOnType–>true 回车则代码格式化
deepin/UOS系统去掉顶端白色区域 Window: Title Bar Style --> custom

1.3 快捷键

1.3.1 常用快捷键

快捷键 作用
alt+shift+鼠标左键 列选择
tab 代码自动补全
ctrl+shift+N 新建窗口
Ctrl+Shift+W 关闭窗口
ctrl+N 新建文件
Ctrl+\(也可以按住Ctrl鼠标点击Explorer里的文件名) 切出一个新的编辑器
Ctrl+W 关闭编辑器窗口
代码
alt+shift+enter 格式化文档
ctrl+/ 注释
Ctrl+[, Ctrl+] 代码行缩进
Ctrl+Shift+[, Ctrl+Shift+] 折叠打开代码块
复制粘贴,如果不选中,默认复制或剪切一整行 Ctrl+C Ctrl+V
Shift+Alt+F,或Ctrl+Shift+P后输入format code 代码格式化
Ctrl+Enter 在当前行下边插入一行
Ctrl+Shift+Enter 在当前行上方插入一行
查找替换
Ctrl+F 查找
Ctrl+H 查找替换
Ctrl+Shift+F 整个文件夹中查找
显示
F11 全屏
Ctrl + = / Ctrl + - 放大/缩小
Ctrl+B 侧边栏显/隐
保存/另存为 Ctrl+S/Ctrl+Shift+S

1.3.2 修改快捷键

首先,进入快捷键设置界面:
在这里插入图片描述
在搜索框中直接输入快捷键进行搜索,在keybingding中双击需要修改的快捷键,按键盘直接更改快捷键。
在这里插入图片描述

1.4. 利用Snippets设置超实用的代码块

设置细节可参考:

  1. 官方文档:https://code.visualstudio.com/docs/editor/userdefinedsnippets

  2. CSDN 文章:https://blog.csdn.net/weixin_34133829/article/details/93169471

例如给python设置注释快捷键:

依次点击:File > Preferences (在macOS上为:Code > Preferences ) ,然后选择要设置的语言,可以直接输入语言名称筛选。如果要让所有语言都适用,可以选择 New Global Snippets file

例如,我们要设置Python注释,当输入annotation时,会出现预设的注释。语言选择Python,然后将下面的格式输入其中:

	"annotation": {
		"prefix": "annotation",
		"body": [
			"# <<<============== $1 ==============>>>",
			"$2"
		],
		"description": "annotation for python"
	}

在这里插入图片描述
输入预设的 annotation ,可以发现已经能够智能提示。
在这里插入图片描述
Tab 键自动补全,即可生成预设的注释:
在这里插入图片描述

1.5. 登录同步

VS Code 可以登录账号,同步设置。现在支持微软账号和GitHub账号。登陆方式如下:

在VS Code左下角,有个登陆账户入口。点击,选择 打开设置同步
在这里插入图片描述

然后,可以选择需要同步的一些选项,点击右上边的 登陆并打开

在这里插入图片描述

可以选择使用 微软账号Github 账号进行登陆。
在这里插入图片描述

1.6 永久关闭受限模式

在受限模式下,代码无法运行。每次打开新文件都手动关闭受限模式十分麻烦。我们可以在设置中永久关闭受限模式。

在这里插入图片描述

在设置中,输入security.workspace.trust.enabled ,将对勾去掉即可。

在这里插入图片描述

二. python

请查看专栏文章:VS Code配置使用 Python

三. 前端

前端开发常用的插件:

插件 功能
open in brower(TechER version) (Alt+B打开浏览器)
live HTML Previewer F1,输入show side view。或者ctrl+Q S
VS Color Picker F1,输入VS Color Picker
vs code内置了emmet VsCode中使用Emmet神器快速编写HTML代码官方文档

四. markdown

1. 相关插件

markdown目前有很多相关插件,选择其中一些需要的即可。

插件 功能
Markdown Preview Enhanced 更好的markdown预览
markdownlint markdown语言分析、样式检查
Markdown Extended 使得markdown支持常用快捷键、表格增删与格式化、输出格式设置等
Markdown Shortcuts 使得markdown支持常用快捷键
Markdown All in One 常用快捷键、目录、自动补全
Markdown PDF 将markdown转化为pdf
Markdown TOC 强大的目录功能
Markdown Table Prettifier 使得表格更适合阅读
Markdown Emoji 使得markdown支持github :emoji: 表情
markdown-formatter 提供了相对统一的格式和一些快捷功能.用法简绍

2. 预览

当打开以 .md 为后缀的文件,或者切换代码语言为 Markdown 右上角会出现一个预览按钮。

可以通过点击此按钮,或者按快捷键 ctrl + shift + v 实现markdown的预览。
在这里插入图片描述

五. LaTeX

请查看专栏文章:VS Code配置使用 LaTeX

六. 配置github

请查看专栏文章:vscode中使用GitHub

七. 配置ssh remote

请查看专栏文章:Vs Code 配置使用 ssh remote

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到