# 基本设置

xj-small

houdunren.com @ 向军大叔

Microsoft在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。

# 安装软件

VSCode 是微软推出的跨平台、扩展组件丰富的文本编辑器。

官方提供 稳定的发行版本最新测试版本 两个版本。

image-20181020195230055

# 全局命令

在windows 系统中在安装 VisualStudio Code 时选择设置PATH就可以在命令行全局使用了。

在Mac系统中使用以下方式

  1. 修改 vim ~/.bash_profile 如果安装了 zsh 修改 vim ~/.zshrc
  2. 添加 export PATH=/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin:$PATH

# 重置软件

有时编辑器安装插件过多,造成异常时就需要重置了

  1. 删除软件
  2. 苹果系统执行rm ~/.vscode
  3. window删除 C:\Users\23000\.vscodeC:\Users\23000\AppData\Roaming\Code 文件夹,将23000 换成你的帐号

# 配置共享

你完全不需要配置vscode,可以将其他用户的配置拿来使用,也可以将配置分享给其他电脑或用户,

首先安装插件 settings-sync

# 提交配置

  1. 安装完插件后会要求登录 github 帐号image-20191012012711372

  2. 登录后在 vscode 的界面中选择一个 gist 或 skip 自动创建一个用来在github上保存配置

    image-20191012012924917

  3. 使用 command+shift+p 在弹出的命令框中输入 sync 并选择更新上传,好了配置已经可以上传了

    image-20191012013057007

# 下载配置

下面来介绍其他电脑下载配置的方法

  1. 安装 settings-sync) 插件

  2. 和上面步骤一样登录github 并选择和提交配置电脑一样的 gist

  3. 使用 command+shift+p 在弹出的命令框中输入 sync 并选择下载配置

    image-20191012013444904

# 公共配置

如果我们想使用别人的配置,首先对方需要提供给你 gist

  1. settings sync 插件初始化

    image-20191012013653772

  2. 在命令窗口选择下载配置

    image-20191012013759969

  3. 这步不需要登录github 了,选择 Download Public Gist 并在弹出的窗口中输入别人分享的 gist

    image-20191012013914969

# 向军配置

下面是我的 gist 分享给大家,同时我使用的字体是 FiraCode 你需要单独下载安装

0f961a1ab459c93fb93d18f9d1a3a3b0

# 风格界面

# 中文语言

  1. 扩展中搜索 chinese 即中文语言包image-20181020194746230

    https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant

    也可以点击上面链接在浏览器中直播安装

  2. 重启vscode工具完成

# 设置风格

下面的两款风格插件都不错,里面有多个主题。

  1. Monokai Pro
  2. One Dark Pro
  3. Ayu
  4. Material Theme

# 字体设置

使用一个漂亮的字体会让人赏心悦目,我常用的字体有FiraCode , Hack

在vscode配置中搜索Editor: Font Family 并设置以下值。

'Fira Code',Menlo, Monaco, 'Courier New', monospace

# 代码格式化

需要安装以下插件

# 其他配置

隐藏行号

设置 > 用户设置 > Line Numbers

导航设置

设置 > 工作台 > 导航路径 > (Breadcrumbs: Enabled & Breadcrumbs: File Path)

滚动缩放

文本编辑器 > Editor: Mouse Wheel Zoom

文件排序

资源管理器按最新修改排序

功能 > 资源管理器 > Sort Order[modified]

# 代码片段

vscode 提供自定义代码片段功能非常方便,同时结合Settings Sync 在不同电脑间同步配置 进行同步后,可以在多台电脑中共享代码片段。

image-20190902132902764

# 参数说明

prefix      :这个参数是使用代码段的快捷入口,比如这里的log在使用时输入log会有智能感知.
body        :这个是代码段的主体.需要设置的代码放在这里,字符串间换行的话使用\r\n换行符隔开.注意如果值里包含特殊字符需要进行转义.
        多行语句的以,隔开
$1          :这个为光标的所在位置.
$2          :使用这个参数后会光标的下一位置将会另起一行,按tab键可进行快速切换,还可以有$3,$4,$5.....
description :代码段描述,在使用智能感知时的描述

# 操作实例

下面自定义一个代码片段,当输入 hd 并按 tab 键后自动输出 houdunren.com

{
	"Print to console": {
		"prefix": "hd",
		"body": [
			"houdunren.com",
		],
		"description": "输出houdunren.com"
	}
}

结果如下

image-20190902133049126

# FTP同步

开发时经常需要本地代码与远程代码FTP同步操作。在vscode中使用ftp同步时每次需要连接,等待时间很长,所以需要使用sftp同步操作。

# 安装插件

https://marketplace.visualstudio.com/items?itemName=liximomo.sftp

# 插件配置

使用 ctrl+shift+p 调用命令输入窗口,选择 SFTP:Config 选项进行配置,下面是一个配置文件示例

{
    "name": "www.hdcms.com",
    "host": "121.41.77.82",
    "username": "root",
    "password": "这是输入密码",
    "protocol": "sftp",
    "debug": false,
    "port": 22,
    "remotePath": "/www/wwwroot/dev.hdcms.com",
    "uploadOnSave": true
}

注意:这里填写的帐号是系统登录帐号,而不是你虚拟主机(如宝塔面板)等的FTP帐号。

如果不想使用root帐号需要进行以下操作

登录服务器添加系统帐号并设置密码

#添加帐号
useradd dev
#设置密码
passwd dev

更改网站目录权限使新帐号可以进行写入操作。

chmod 0777 /www/wwwroot/www.hdcms.com

现在可以使用新帐号进行SFTP连接了。

# 快捷键

这是官方提供的 快捷键速查表 ,下面是中文快捷键说明。

按 Press 功能 Function
Ctrl + Shift + P,F1 显示命令面板 Show Command Palette
Ctrl + P 快速打开 Quick Open
Ctrl + Shift + N 新窗口/实例 New window/instance
Ctrl + Shift + W 关闭窗口/实例 Close window/instance

# 基础编辑

按 Press 功能 Function
Ctrl+X 剪切行(空选定) Cut line (empty selection)
Ctrl+C 复制行(空选定)Copy line (empty selection)
Alt+ ↑ / ↓ 向上/向下移动行 Move line up/down
Shift+Alt + ↓ / ↑ 向上/向下复制行 Copy line up/down
Ctrl+Shift+K 删除行 Delete line
Ctrl+Enter 在下面插入行 Insert line below
Ctrl+Shift+Enter 在上面插入行 Insert line above
Ctrl+Shift+\ 跳到匹配的括号 Jump to matching bracket
Ctrl+] / [ 缩进/缩进行 Indent/outdent line
Home 转到行首 Go to beginning of line
End 转到行尾 Go to end of line
Ctrl+Home 转到文件开头 Go to beginning of file
Ctrl+End 转到文件末尾 Go to end of file
Ctrl+↑ / ↓ 向上/向下滚动行 Scroll line up/down
Alt+PgUp / PgDown 向上/向下滚动页面 Scroll page up/down
Ctrl+Shift+[ 折叠(折叠)区域 Fold (collapse) region
Ctrl+Shift+] 展开(未折叠)区域 Unfold (uncollapse) region
Ctrl+K Ctrl+[ 折叠(未折叠)所有子区域 Fold (collapse) all subregions
Ctrl+K Ctrl+] 展开(未折叠)所有子区域 Unfold (uncollapse) all subregions
Ctrl+K Ctrl+0 折叠(折叠)所有区域 Fold (collapse) all regions
Ctrl+K Ctrl+J 展开(未折叠)所有区域 Unfold (uncollapse) all regions
Ctrl+K Ctrl+C 添加行注释 Add line comment
Ctrl+K Ctrl+U 删除行注释 Remove line comment
Ctrl+/ 切换行注释 Toggle line comment
Shift+Alt+A 切换块注释 Toggle block comment
Alt+Z 切换换行 Toggle word wrap

# 导航 Navigation

按 Press 功能 Function
Ctrl + T 显示所有符号 Show all Symbols
Ctrl + G 转到行... Go to Line...
Ctrl + P 转到文件... Go to File...
Ctrl + Shift + O 转到符号... Go to Symbol...
Ctrl + Shift + M 显示问题面板 Show Problems panel
F8 转到下一个错误或警告 Go to next error or warning
Shift + F8 转到上一个错误或警告 Go to previous error or warning
Ctrl + Shift + Tab 导航编辑器组历史记录 Navigate editor group history
Alt + ←/→ 返回/前进 Go back / forward
Ctrl + M 切换选项卡移动焦点 Toggle Tab moves focus

# 搜索和替换

按 Press 功能 Function
Ctrl + F 查找 Find
Ctrl + H 替换 Replace
F3 / Shift + F3 查找下一个/上一个 Find next/previous
Alt + Enter 选择查找匹配的所有出现 Select all occurences of Find match
Ctrl + D 将选择添加到下一个查找匹配 Add selection to next Find match
Ctrl + K Ctrl + D 将最后一个选择移至下一个查找匹配项 Move last selection to next Find match
Alt + C / R / W 切换区分大小写/正则表达式/整个词 Toggle case-sensitive / regex / whole word

# 多光标和选择

按 Press 功能 Function
Alt +单击 插入光标 Insert cursor
Ctrl + Alt +↑/↓ 在上/下插入光标 Insert cursor above / below
Ctrl + U 撤消上一个光标操作 Undo last cursor operation
Shift + Alt + I 在选定的每一行的末尾插入光标 Insert cursor at end of each line selected
Ctrl + I 选择当前行 Select current line
Ctrl + Shift + L 选择当前选择的所有出现 Select all occurrences of current selection
Ctrl + F2 选择当前字的所有出现 Select all occurrences of current word
Shift + Alt + → 展开选择 Expand selection
Shift + Alt + ← 缩小选择 Shrink selection
Shift + Alt + (拖动鼠标) 列(框)选择 Column (box) selection
Ctrl + Shift + Alt +(箭头键) 列(框)选择 Column (box) selection
Ctrl + Shift + Alt + PgUp / PgDown 列(框)选择页上/下 Column (box) selection page up/down

# 丰富的语言编辑

按 Press 功能 Function
Ctrl + 空格 触发建议 Trigger suggestion
Ctrl + Shift + Space 触发器参数提示 Trigger parameter hints
Tab Emmet 展开缩写 Emmet expand abbreviation
Shift + Alt + F 格式化文档 Format document
Ctrl + K Ctrl + F 格式选定区域 Format selection
F12 转到定义 Go to Definition
Alt + F12 Peek定义 Peek Definition
Ctrl + K F12 打开定义到边 Open Definition to the side
Ctrl + . 快速解决 Quick Fix
Shift + F12 显示引用 Show References
F2 重命名符号 Rename Symbol
Ctrl + Shift + . /, 替换为下一个/上一个值 Replace with next/previous value
Ctrl + K Ctrl + X 修剪尾随空格 Trim trailing whitespace
Ctrl + K M 更改文件语言 Change file language

# 编辑器管理

按 Press 功能 Function
Ctrl+F4, Ctrl+W 关闭编辑器 Close editor
Ctrl+K F 关闭文件夹 Close folder
Ctrl+\ 拆分编辑器 Split editor
Ctrl+ 1 / 2 / 3 聚焦到第1,第2或第3编辑器组 Focus into 1st, 2nd or 3rd editor group
Ctrl+K Ctrl+ ←/→ 聚焦到上一个/下一个编辑器组 Focus into previous/next editor group
Ctrl+Shift+PgUp / PgDown 向左/向右移动编辑器 Move editor left/right
Ctrl+K ← / → 移动活动编辑器组 Move active editor group

# 文件管理

按 Press 功能 Function
Ctrl+N 新文件 New File
Ctrl+O 打开文件... Open File...
Ctrl+S 保存 Save
Ctrl+Shift+S 另存为... Save As...
Ctrl+K S 全部保存 Save All
Ctrl+F4 关闭 Close
Ctrl+K Ctrl+W 关闭所有 Close All
Ctrl+Shift+T 重新打开关闭的编辑器 Reopen closed editor
Ctrl+K 输入保持打开 Enter Keep Open
Ctrl+Tab 打开下一个 Open next
Ctrl+Shift+Tab 打开上一个 Open previous
Ctrl+K P 复制活动文件的路径 Copy path of active file
Ctrl+K R 显示资源管理器中的活动文件 Reveal active file in Explorer
Ctrl+K O 显示新窗口/实例中的活动文件 Show active file in new window/instance

# 显示

按 Press 功能 Function
F11 切换全屏 Toggle full screen
Shift+Alt+1 切换编辑器布局 Toggle editor layout
Ctrl+ = / - 放大/缩小 Zoom in/out
Ctrl+B 切换侧栏可见性 Toggle Sidebar visibility
Ctrl+Shift+E 显示浏览器/切换焦点 Show Explorer / Toggle focus
Ctrl+Shift+F 显示搜索 Show Search
Ctrl+Shift+G 显示Git Show Git
Ctrl+Shift+D 显示调试 Show Debug
Ctrl+Shift+X 显示扩展 Show Extensions
Ctrl+Shift+H 替换文件 Replace in files
Ctrl+Shift+J 切换搜索详细信息 Toggle Search details
Ctrl+Shift+C 打开新命令提示符/终端 Open new command prompt/terminal
Ctrl+Shift+U 显示输出面板 Show Output panel
Ctrl+Shift+V 切换Markdown预览 Toggle Markdown preview
Ctrl+K V 从旁边打开Markdown预览 Open Markdown preview to the side

# 调试

按 Press 功能 Function
F9 切换断点 Toggle breakpoint
F5 开始/继续 Start/Continue
Shift+F5 停止 Stop
F11 / Shift+F11 下一步/上一步 Step into/out
F10 跳过 Step over
Ctrl+K Ctrl+I 显示悬停 Show hover

# 集成终端

按 Press 功能 Function
Ctrl+` 显示集成终端 Show integrated terminal
Ctrl+Shift+` 创建新终端 Create new terminal
Ctrl+Shift+C 复制选定 Copy selection
Ctrl+Shift+V 粘贴到活动端子 Paste into active terminal
Ctrl+↑ / ↓ 向上/向下滚动 Scroll up/down
Shift+PgUp / PgDown 向上/向下滚动页面 Scroll page up/down
Ctrl+Home / End 滚动到顶部/底部 Scroll to top/bottom

# 远程开发

配置远程开发可以在家里、公司、出差时在使用不同电脑时不需要重复配置服务器环境。多端使用同一个环境进行开发。

# ssh连接

首先需要配置ssh连接,这样可以免密码登录到服务器,如果你配置失败可以省略这一步,只不过登录时每次就要输入密码了。

  1. 生成公钥私钥ssh-keygen
  2. ssh-copy-id -i root@主机地址,这步是将key复制到远程机器的 ~/ .ssh/authorized_key文件中
  3. 现在使用 ssh root@主机地址 登录服务器就不需要密码了

# vscode

Remote - SSH 是vscode中用于完成远程开发的插件。

# 常用插件

  1. PHP IntelliSense PHP
  2. PHP Intelephense
  3. PHP Debug PHP调试插件
  4. php cs fixerPHP代码格式化插件
  5. Laravel Blade Snippets
  6. laravel-goto-controller
  7. Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets
  8. Laravel代码片段
  9. Laravel Artisan
  10. Markdown Preview Enhanced Markdown预览
  11. WakaTime记录工作数据报表,需要到官方网站注册并获取key
  12. Vetur一个好用的Vue.js开发插件
  13. Code Runner 支持多种语言的代码的立即执行
  14. Code Spell Checker 用于检测代码语法
  15. VS Color Picker 选择颜色
  16. vscode-fileheader 设置文件头
  17. auto-close-tag 自动结束HTML标签
  18. auto-rename-tag 自动更改HTML标签名
  19. open-in-browser 打开浏览器
  20. easy-less 编译LESS
  21. faker 随机生成图片等信息
  22. carbon-now-sh 生成漂亮的代码截图
  23. Highlight Matching 高亮匹配标签
  24. Settings Sync 在不同电脑间同步配置
  25. Code Runner 编辑器中运行代码
  26. Live Server 浏览器自动刷新
  27. tabnine AI代码自动补全
  28. HTML Preview 预览HTML

# 常见问题

  1. 输入时总在状态栏目输入,那是因为安装了vim插件删除或禁用就好了