当前位置:   article > 正文

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

vs code

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

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

设置文件自动保存:依次点击 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 csvCSV编辑器
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"
	}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

在这里插入图片描述
输入预设的 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 PreviewerF1,输入show side view。或者ctrl+Q S
VS Color PickerF1,输入VS Color Picker
vs code内置了emmetVsCode中使用Emmet神器快速编写HTML代码官方文档

四. markdown

1. 相关插件

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

插件功能
Markdown Preview Enhanced更好的markdown预览
Auto-Open Markdown Preview打开markdown时,自动同时打开markdown预览
markdownlintmarkdown语言分析、样式检查
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

八. 修改 Markdown Preview Enhanced 主题与字体

请查看专栏文章:VScode 修改 Markdown Preview Enhanced 主题与字体

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/657346
推荐阅读
相关标签
  

闽ICP备14008679号