# 基本设置

xj-small

houdunren.com (opens new window) @ 向军大叔

xj-small

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

# 安装软件

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

官方提供 稳定的发行版本 (opens new window)最新测试版本 (opens new window) 两个版本。

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

# 彻底删除

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

重置前将安装的插件和热键备份,在下次重装时就省很多事情,具体操作方式请看下面的章节

  1. 首先删除vscode软件

  2. 苹果执行以下命令

    rm -rf ~/Library/Application\ Support/Code
    rm -rf ~/.vscode
    
  3. window系统删除以下文件夹 将houdunren 换成你的帐号

    C:\Users\houdunren\.vscode
    `C:\Users\houdunren\AppData\Roaming\Code`
    

# 配置共享

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

首先安装插件 settings-sync (opens new window)

# 提交配置

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

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

    image-20191012012924917

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

    image-20191012013057007

# 下载配置

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

  1. 安装 settings-sync) (opens new window) 插件

  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 (opens new window) 你需要单独下载安装

27d0a825afa9cc6719bb4a7d95ab8d2d

当你发现不能输入内容时,是因为我安装了VIM插件。如果你对VIM不熟可以删除这个插件

# 风格界面

# 中文语言

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

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

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

  2. 重启vscode工具完成

# 设置风格

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

  1. Monokai Pro (opens new window)
  2. One Dark Pro (opens new window)
  3. Ayu (opens new window)
  4. Material Theme (opens new window)

# 截屏模式

该模式可以将按钮与鼠标操作在屏幕上显示,非常适合讲解使用。

开启方式

开启方式为 ctrl+shift+p 后选择 screen

image-20200123172855909

效果如下

image-20200123173013067

配置选项

在 设置>工作台>截屏模式 中对截屏模式进行设置

image-20201026110214994

# 基本设置

隐藏行号

设置 > 用户设置 > Line Numbers

导航设置

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

滚动缩放

文本编辑器 > Editor: Mouse Wheel Zoom

文件排序

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

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

# 编码优化

# 自动换行

HTML标签前后自动换行,访问设置 > 扩展 〉HTML 进行配置

image-20201026110714456

# 属性换行

如果要将HTML的属性对齐排列,请在设置 > 扩展 〉HTML中进行设置

image-20201026110934306

# 代码格式

代码美化主要我使用的是 Prettier (opens new window) ,并需要在项目目录创建配置文件.prettierrc基本内容如下

{
  "eslintIntegration": true,
  "stylelintIntegration": true,
  "printWidth": 2000,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": false
}

更多配置请参数官方文档 https://prettier.io/docs/en/options.html

# 代码片段

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

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

多段文字配置

{
	"表关联": {
		"prefix": "hd-foreign",
		"body": [
			"\\$table->unsignedBigInteger('package_id')->nullable()->comment('套餐编号');",
			"\\$table->foreign('package_id')->references('id')->on('packages')->onDelete('cascade');",
		],
		"description": "多表关联"
	}
}

# 智能提示

使用深度学习可以有效的帮助我们提高代码的编写效率,下面我推荐几款AI代码提示软件

软件 介绍 安装客户端
tabnine (opens new window) 使用深度学习来帮助您更快地编写代码,支持主流代码编辑器
kite (opens new window) AI驱动的提示和补全引擎,功能也是非常强大 需要
aixcoder (opens new window) 国产的先进的深度学习模型压缩技术 需要

上面的AI提示软件你可以同时安装一个或多个,向军老师个人tabnine (opens new window) 较多些

# SASS/LESS

下面介绍几种编译SASS的方法

# Formate Hero

Formate Hero (opens new window) 支持在 Visual Studio Code 中自动编译以下文件:less, sass, scss, typescript, jade, pug and jsx

  1. 首先安装插件Formate Hero (opens new window)

  2. 然后在vscode状态栏底部打开编译

    image-20201013143112477

  3. 保存后将自动将文件编译到dist目录中,可以通过修改插件配置项设置编译目录

# Live Sass

使用SASS可以及大的提高编写CSS的效率

  1. 首先安装插件 Live Sass Compiler (opens new window)

  2. 创建hd.scss文件

  3. 使用ctrl+ship+p 搜索 Watch sass 开启scss文件自动编译

    image-20200323153116242

  4. 系统会自动生成hd.css文件,在html等文件中引入即可

# vim

从 vim 切换回来的朋友,可以通过安装 vim (opens new window) 插件来使用vim操作。

# vim-sneak

在配置中开启vim-sneak 可以在页面中快速跳转

运动指令 描述
s 输入s并按两个字母,向前查找,按;继续查找下一个
S 向后移到第一次出现
z 向前执行第一次出现
Z 向后执行到第一次出现

# im-select

im-select 用于从 insert 模式切换为 normal 模式时自动切换为英文,请通过im-select文档 (opens new window)查看安装方式

# 插件配置

安装后需要在vscode 的配置项中设置

选项 说明
vim.autoSwitchInputMethod.enable 是否开启使用默认输入法
vim.autoSwitchInputMethod.defaultIM 默认输入法,请查看下表
vim.autoSwitchInputMethod.obtainIMCmd Im-select 路径 (使用默认值)
vim.autoSwitchInputMethod.switchIMCmd {im} 占位符的命令(使用默认值)

下面是苹果系统输入法表,系统开启输入法下在于下面表里其中之一

Key Description
com.apple.keylayout.US U.S.
com.apple.keylayout.ABC ABC
com.apple.keylayout.British British
com.apple.keylayout.Irish Irish
com.apple.keylayout.Australian Australian
com.apple.keylayout.Dvorak Dvorak
com.apple.keylayout.Colemak Colemak

window 系统如果您的键盘布局为en_US,则输入法键为1033,也可以在此页面上 (opens new window)找到您的语言环境ID

# 使用示例

大部分系统使用以下配置都可以正常使用

mac

"vim.autoSwitchInputMethod.enable": true,
"vim.autoSwitchInputMethod.defaultIM": "com.apple.keylayout.US",
"vim.autoSwitchInputMethod.obtainIMCmd": "/usr/local/bin/im-select",
"vim.autoSwitchInputMethod.switchIMCmd": "/usr/local/bin/im-select {im}"

windows

"vim.autoSwitchInputMethod.enable": true,
"vim.autoSwitchInputMethod.defaultIM": "1033",
"vim.autoSwitchInputMethod.obtainIMCmd": "D:\\bin\\im-select.exe",
"vim.autoSwitchInputMethod.switchIMCmd": "D:\\bin\\im-select.exe {im}"

# 热键配置

设置leader键为空格

image-20200613230043778

下面是对VIM定制的热键配置,首先需要打开配置文件

image-20200613225106155

# MAC

下面是MAC系统的热键配置,你可以根据需要自行设置

...

  "vim.commandLineModeKeyBindingsNonRecursive": [],
  "vim.sneak": true,
  "vim.normalModeKeyBindingsNonRecursive": [
    //保存当前文件
    {
      "before": ["s", "s"],
      "commands": ["workbench.action.files.save"]
    },
    //保存退出
    {
      "before": ["z", "z"],
      "commands": [":wq"]
    },
    //转到代码定义
    {
      "before": ["<leader>", "d"],
      "commands": ["editor.action.revealDefinition"]
    }
  ],
  "vim.insertModeKeyBindings": [
    //返回normal模式
    {
      "before": ["j", "j"],
      "after": ["<Esc>"]
    }
  ],
  "vim.leader": "<space>",
  "vim.commandLineModeKeyBindings": [],
  "vim.easymotion": true,
  "vim.easymotionMarkerForegroundColorTwoChar": "#ffffff",
  "vim.easymotionMarkerForegroundColorOneChar": "#ffffff",
  "vim.easymotionMarkerBackgroundColor": "yellow",
  "vim.useSystemClipboard": true,
  "vim.camelCaseMotion.enable": true,
  "vim.handleKeys": {
    // "<C-a>": false
    // "<C-f>": false
    // "<C-c>": false,
    // "<C-x>": false,
    // "<C-v>": false
  }
  
...

# WINDOWS

下面是WINDOWS系统的热键配置,你可以根据需要自行设置

...
	
	"vim.sneak": true,
  "vim.commandLineModeKeyBindings": [],
  "vim.normalModeKeyBindingsNonRecursive": [
  {
    "before": ["s", "s"],
    "commands": ["workbench.action.files.save"]
  },
  {
    "before": ["z", "z"],
    "commands": [":wq"]
  },
  {
    "before": ["<leader>", "d"],
    "commands": ["editor.action.revealDefinition"]
  }
  ],
  "vim.insertModeKeyBindings": [
  {
    "before": ["j", "j"],
    "after": ["<Esc>"]
  }
  ],
  "vim.leader": "<space>",
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "explorer.confirmDelete": false,
  "vim.useSystemClipboard": true,
  "vim.camelCaseMotion.enable": true,
  "vim.easymotion": true,
  "vim.highlightedyank.enable": true,
  "vim.easymotionMarkerForegroundColorTwoChar": "#ffffff",
  "vim.easymotionMarkerForegroundColorOneChar": "#ffffff",
  "vim.handleKeys": {
  "<C-a>": false,
  "<C-f>": false,
  "<C-c>": false,
  "<C-x>": false,
  "<C-v>": false
  }
  
...

# 系统热键

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

按 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
Ctrl+Alt 键盘上向上或者向下键,使一列上出现多个光标
Ctrl+Shift+l 选择相同的词统一编辑
Shift+Alt+鼠标拖动 选择区域进行编辑

# 导航控制

按 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
zc 折叠代码块
zo 展开代码块
zC 折叠所有代码块
zO 展开所有代码块

# 语言编辑

按 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

# 热键定义

配置合理的快捷键可以加快代码录入效率,VSCODE提供了丰富的快捷键设置,当然我们也可以自行定义快捷键

# 配置方式

修改热键可以通过command+k+s,windows用户使用ctrl+k+s打开设置窗口

image-20200611232259186

我已经将我在MAC和WINDOWS中的热键定义写在下面,操作步骤为打开配置文件将内容粘贴到里面即可。你可以根据需要自行修改。

# 我的定制

下面是我定制的一些快捷键来提高效率,大家可以根据需要进行取舍

# MAC

下面是向军大叔MAC系统中的热键定义

[
  {
    "key": "cmd+e",
    "command": "-workbench.action.openRecent"
  },
  {
    "key": "cmd+e",
    "command": "extension.intellijRecentFiles",
    "when": "!inQuickOpen"
  },
  {
    "key": "cmd+e",
    "command": "workbench.action.quickOpenNavigateNext",
    "when": "inQuickOpen"
  },
  {
    "key": "cmd+e",
    "command": "workbench.action.quickOpenNavigateNext",
    "when": "inQuickOpen"
  },
  {
    "key": "shift+cmd+e",
    "command": "workbench.action.quickOpenNavigatePrevious",
    "when": "inQuickOpen"
  },
  {
    "key": "alt+escape",
    "command": "-editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
  },
  {
    "key": "alt+x",
    "command": "editor.action.toggleWordWrap"
  },
  {
    "key": "alt+z",
    "command": "-editor.action.toggleWordWrap"
  },
  {
    "key": "shift+cmd+o",
    "command": "-ftp.open"
  },
  {
    "key": "alt+1",
    "command": "workbench.action.terminal.focusPrevious"
  },
  {
    "key": "ctrl+shift+down",
    "command": "workbench.action.terminal.focusNext"
  },
  {
    "key": "shift+cmd+d",
    "command": "editor.action.revealDefinition",
    "when": "editorHasDefinitionProvider && editorTextFocus && !isInEmbeddedEditor"
  },
  {
    "key": "f12",
    "command": "-editor.action.revealDefinition",
    "when": "editorHasDefinitionProvider && editorTextFocus && !isInEmbeddedEditor"
  },
  {
    "key": "cmd+;",
    "command": "editor.action.openLink"
  },
  {
    "key": "cmd+j",
    "command": "workbench.action.toggleSidebarVisibility"
  },
  {
    "key": "cmd+b",
    "command": "-workbench.action.toggleSidebarVisibility"
  }
]

# WINDOWS

下面是大叔WINDOWS系统中的定义

[
  {
    "key": "ctrl+e",
    "command": "-workbench.action.openRecent"
  },
  {
    "key": "ctrl+e",
    "command": "extension.intellijRecentFiles",
    "when": "!inQuickOpen"
  },
  {
    "key": "ctrl+e",
    "command": "workbench.action.quickOpenNavigateNext",
    "when": "inQuickOpen"
  },
  {
    "key": "ctrl+e",
    "command": "workbench.action.quickOpenNavigateNext",
    "when": "inQuickOpen"
  },
  {
    "key": "shift+ctrl+e",
    "command": "workbench.action.quickOpenNavigatePrevious",
    "when": "inQuickOpen"
  },
  {
    "key": "ctrl+j",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
  },
  {
    "key": "ctrl+escape",
    "command": "-editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
  },
  {
    "key": "alt+x",
    "command": "editor.action.toggleWordWrap"
  },
  {
    "key": "alt+z",
    "command": "editor.action.toggleWordWrap"
  },
  {
    "key": "ctrl+shift+o",
    "command": "workbench.action.gotoSymbol"
  },
  {
    "key": "ctrl+shift+left",
    "command": "cursorHomeSelect",
    "when": "textInputFocus"
  },
  {
    "key": "shift+home",
    "command": "-cursorHomeSelect",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+shift+right",
    "command": "cursorEndSelect",
    "when": "textInputFocus"
  },
  {
    "key": "shift+end",
    "command": "-cursorEndSelect",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+right",
    "command": "cursorEnd",
    "when": "textInputFocus"
  },
  {
    "key": "end",
    "command": "-cursorEnd",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+left",
    "command": "cursorHome",
    "when": "textInputFocus"
  },
  {
    "key": "home",
    "command": "-cursorHome",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+up",
    "command": "cursorTop",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+home",
    "command": "-cursorTop",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+down",
    "command": "cursorBottom",
    "when": "textInputFocus"
  },
  {
    "key": "ctrl+end",
    "command": "-cursorBottom",
    "when": "textInputFocus"
  },
  {
    "key": "alt+1",
    "command": "workbench.action.terminal.focusAtIndex1"
  },
  {
    "key": "alt+2",
    "command": "workbench.action.terminal.focusAtIndex2"
  },
  {
    "key": "alt+3",
    "command": "workbench.action.terminal.focusAtIndex3"
  },
  {
    "key": "alt+4",
    "command": "workbench.action.terminal.focusAtIndex4"
  },
  {
    "key": "ctrl+shift+r",
    "command": "renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  {
    "key": "f2",
    "command": "-renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  {
    "key": "ctrl+oem_1",
    "command": "workbench.action.terminal.toggleTerminal"
  },
  {
    "key": "ctrl+oem_3",
    "command": "-workbench.action.terminal.toggleTerminal"
  },
  {
    "key": "ctrl+1",
    "command": "workbench.action.toggleSidebarVisibility"
  },
  {
    "key": "ctrl+b",
    "command": "-workbench.action.toggleSidebarVisibility"
  },
  {
    "key": "ctrl+shift+d",
    "command": "editor.action.revealDefinition",
    "when": "editorHasDefinitionProvider && editorTextFocus && !isInEmbeddedEditor"
  },
  {
    "key": "f12",
    "command": "-editor.action.revealDefinition",
    "when": "editorHasDefinitionProvider && editorTextFocus && !isInEmbeddedEditor"
  }
]

# 字体设置

使用一个漂亮的字体会让人赏心悦目,我常用的字体有FiraCode (opens new window) , Hack (opens new window)JetBrains Mono (opens new window)cascadia-code (opens new window)nerdfonts (opens new window)

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

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

需要在配置中将连字打开(设置中搜索fontLigatures关键词)

"editor.fontFamily": "'Fira Code','JetBrains Mono'",
"editor.fontLigatures": true,

# 工作区

有时我们希望开发时在一个VS编辑器中同时编辑多个文件,这时候可以使用工作区来管理。

  1. 创建文件houdunren并用VSCODE打开
  2. 然后选择 将工作区另存为 操作,保存到houdunren目录即可
  3. 再次打开houdunren/hdcms文件夹
  4. 然后选择 将文件夹添加到工作区

# KITE

kite (opens new window) 将使用 AI 代码提示,为开发人员提供快速的开发体验,支持主流开发工具。

image-20201027170732804

安装过程如下

  1. 首先访问官网下载Kite软件到电脑里

  2. 然后起动软件安装你电脑中代码编辑器的Kite插件

# 常用插件

  1. PHP IntelliSense PHP (opens new window)
  2. PHP Intelephense (opens new window)
  3. PHP Extension Pack PHP扩展集合 (opens new window)
  4. PHP Debug PHP调试插件 (opens new window)
  5. php cs fixerPHP代码格式化插件 (opens new window)
  6. Laravel Blade Snippets (opens new window)
  7. laravel-goto-controller (opens new window)
  8. Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets (opens new window)
  9. Laravel代码片段 (opens new window)
  10. Laravel Artisan (opens new window)
  11. Markdown Preview Enhanced Markdown预览 (opens new window)
  12. WakaTime记录工作数据报表 (opens new window),需要到官方网站 (opens new window)注册并获取key
  13. Vetur一个好用的Vue.js开发插件 (opens new window)
  14. Code Runner 支持多种语言的代码的立即执行 (opens new window)
  15. Code Spell Checker 用于检测代码语法 (opens new window)
  16. VS Color Picker 选择颜色 (opens new window)
  17. vscode-fileheader 设置文件头 (opens new window)
  18. auto-close-tag 自动结束HTML标签 (opens new window)
  19. auto-rename-tag 自动更改HTML标签名 (opens new window)
  20. easy-less 编译LESS (opens new window)
  21. faker 随机生成图片等信息 (opens new window)
  22. carbon-now-sh 生成漂亮的代码截图 (opens new window)
  23. Highlight Matching 高亮匹配标签 (opens new window)
  24. Settings Sync 在不同电脑间同步配置 (opens new window)
  25. Code Runner 编辑器中运行代码 (opens new window)
  26. Live Server 浏览器自动刷新 (opens new window)
  27. tabnine AI代码自动补全 (opens new window)
  28. 将代码生成漂亮的图片 (opens new window)
  29. Prettier 代码格式化 (opens new window)
  30. vscode-intellij-recent-files 快速在最近编辑文件切换 (opens new window)
  31. Bracket Pair Colorizer 2 代码块快速匹配 (opens new window)
  32. EditorConfig 格式化配置Laravel 开发必装 (opens new window)
  33. IntelliSense for CSS class names 自动提示类名 (opens new window)
  34. filesize 查看源文件与压缩后大小信息 (opens new window)

# 常见问题

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

  2. 查看运行慢的插件

    image-20201224160237139