# 基本设置

xj-small

houdunren.com @ 向军大叔

xj-small

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

# 彻底删除

有时编辑器安装插件过多,造成异常时就需要重置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

# 提交配置

  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 你需要单独下载安装

cb786c15845e72e7fe56490a0090da62

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

# 风格界面

# 中文语言

  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 , HackJetBrains Mono

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

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

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

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

# 代码格式

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

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

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

# 其他配置

隐藏行号

设置 > 用户设置 > 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

多段文字配置

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

# 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帐号需要进行以下操作

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

#添加帐号
useradd xj

#设置密码
passwd xj

root帐号登录服务器,并更改网站目录权限使新帐号可以进行写入操作。

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

现在将配置文件中的帐号修改为xj就可以了。

# 快捷键

VSCODE提供了丰富的快捷键设置,当然我们也可以自行定义快捷键

# 定制快捷键

自定义快捷键 首选项 > 键盘快捷方式 或按 COMMAND+k+s 调出快捷键设置

image-20200224161359854

# 我的定制

下面是我定制的一些快捷键来提高效率

按 Press 功能 Function
ctrl+j 代码提示 editor.action.triggerSuggest
alt+1 切换侧边栏 toggleSidebarVisibility

# 系统内置

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

按 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

# 语言编辑

按 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

# 工作区

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

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

# 远程开发

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

  • 远程开发会占用服务器性能,所以要求服务器具有比较好的配置

# 创建帐号

root帐号登录服务器并添加普通帐号

sudo useradd xj

修改密码

sudo passwd xj

# 免密登录

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

  1. 生成密钥,如果本地已经有了就不要生成了(重复生成会让原来的GIT提交等失效),会提示 Overwrite (y/n)? 选择n

    ssh-keygen -t rsa
    
  2. 将密钥添加到远程服务器

    ssh-copy-id xj@192.168.31.47
    
  3. 现在登录就不需要密码了

    ssh root@192.168.31.90
    
  4. 编辑 vim ~/.ssh/config 文件添加以下内容

    Host houdunren
    Hostname 192.168.31.90
    Port 22
    User root
    

    现在直接使用 ssh houdunren 就可以登录服务器了

如果还不能登录将宿主机 ~/.ssh/known_hosts 文件中该LINUX服务器的记录行删除

# 文件限制

对于工作区中文件数特别多的项目,会提示“可视化工作室代码无法监视此大型工作区中的文件更改”,需要修改LINUX操作系统配置。

打开配置文件

sudo vim /etc/sysctl.conf

将下面代码添加到文件的末尾

fs.inotify.max_user_watches=524288

下面在VSCODE软件中进行设置,在配置项中搜索 files.watcherExclude 关键词,并添加以下内容

"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/*/**": true

# vscode

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

  1. 使用 ctrl+shift+p 弹出菜单中执行 Remote-SSH:Connect to Host...

    image-20200110232308950

  2. 选择你帐号的 ssh 配置文件 image-20200110232428204

  3. 之后选择其中的一个主机连接,稍等片刻就可以打开远程文件了

    image-20200110232542297

现在文件打开操作、命令行操作都是在远程上完成的了,如果当前文件夹内容太多,可以只打开项目文件夹软件运行速度会快些。

image-20200110233444292

# 插件管理

走到这步已经可以使用vscode在远程服务器上开发了,但是远程服务器并没有安装相关的VSCODE插件。

打开插件面板选择要在远程服务器上安装的插件

image-20200612003947363

# zsh

如果远程使用zsh将会造成使用vscode创建的文件权限为700,需要以下几步处理

  1. 服务器shell改为bash

    chsh -s /bin/bash
    
  2. 设置vscode配置

    "terminal.integrated.shell.linux": "/bin/zsh"
    

# 屏幕模式

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

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

image-20200123172855909

效果如下

image-20200123173013067

# 热键定义

修改热键可以通过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": "cmd+j",
    "command": "editor.action.triggerSuggest",
    "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
  },
  {
    "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"
  }
]

# 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"
  }
]

# SASS

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

  1. 首先安装插件 Live Sass Compiler

  2. 创建hd.scss文件

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

    image-20200323153116242

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

# vim

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

# vim-sneak

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

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

# im-select

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

# 插件配置

安装后需要在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,也可以在此页面上找到您的语言环境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
  }
  
...

# 常用插件

  1. PHP IntelliSense PHP
  2. PHP Intelephense
  3. PHP Extension Pack PHP扩展集合
  4. PHP Debug PHP调试插件
  5. php cs fixerPHP代码格式化插件
  6. Laravel Blade Snippets
  7. laravel-goto-controller
  8. Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets
  9. Laravel代码片段
  10. Laravel Artisan
  11. Markdown Preview Enhanced Markdown预览
  12. WakaTime记录工作数据报表,需要到官方网站注册并获取key
  13. Vetur一个好用的Vue.js开发插件
  14. Code Runner 支持多种语言的代码的立即执行
  15. Code Spell Checker 用于检测代码语法
  16. VS Color Picker 选择颜色
  17. vscode-fileheader 设置文件头
  18. auto-close-tag 自动结束HTML标签
  19. auto-rename-tag 自动更改HTML标签名
  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. 将代码生成漂亮的图片
  29. Prettier 代码格式化
  30. vscode-intellij-recent-files 快速在最近编辑文件切换
  31. Bracket Pair Colorizer 2 代码块快速匹配
  32. EditorConfig 格式化配置Laravel 开发必装
  33. IntelliSense for CSS class names 自动提示类名

# 常见问题

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