VSCode 快捷功能

# 快捷键

Note:

• * 使用频率较高
• ~ 与其他平台快捷键相同

定义

# 指令

ctrl + p

快捷键

• f1
• ctrl + shift + p
• ctrl + p 输入 >

# VSCode Extension

• Import Cost: 显示 npm 包的大小
• Rest Client: 在空白页输入 RESTful API, 按 cmd/ctrl + alt + r 发送请求
• Live Share: 结对编程时，分享代码
• Pigment: 颜色显示在代码下方
• Git Graph: Vscode Git GUI

# snippet

1. > Preferences: Configure User Snippets
2. 选择 (输入) 语言 typescriptreact.json

{

  "create sfc component": {

		"prefix": "import_sfc",

		"body": [

			"import React, { FC } from 'react'",

			"",

			"export interface I$1Props {}",

			"export const $1: FC<I$1Props> = (",

			"",

			") => {",

			"",

			"  return (",

			"    ${2:null}",

			"  )",

			"}"

		],

		"description": "sfc template"

	}

}

• prefix 用来在代码中唤醒提示，
• body 在编辑器中插入的内容
• $1 代表变量，预设变量的值可以使用 ${1:hello} , ${1:$CLIPBOARD} , 更多预设变量

# 开启 markdown snippets

setting.json

{

  "[markdown]": {

    "editor.quickSuggestions": {

      "other": true,

      "comments": false,

      "strings": false

    }

  }

}

# 自定义快捷键

1. 通过 JSON 编辑 > Open Keyboard Shortcuts(JSON)

[

  {

    "key": "ctrl+n",

    "command": "explorer.newFile",

    "when": "filesExplorerFocus && !inputFocus"

  }

]

# .vscode

/.vscode/
|- setting.json
|- launch.json    如何调试当前文件夹下的代码
|- tasks.json

# setting.json

• 隐藏编辑窗口上方的 tabs workbench.editor.showTabs: false

• workbench.editor.highlightModifiedTabs 1.29.1 true 新增的修改区域的左侧会出现边框

• window.nativeFullScreen : 1.29.1 macOS 全屏特性

• breadcrumbs.symbolSortOrder 1.29.1 控制 “导航路径” 大纲视图中符号的排序方式。

  • position - 文件位置 (default)
  • name - 字母顺序
  • type - 符号类型

# tasks.json

• 执行 task: 命令面板 -> Run Task -> 选择 Task
• 配置任务：命令面板 -> Configure Task

//shell 类型任务

{

  "tasks": [

    {

      // 任务描述

      "label": "echo",

      "type": "shell",

      "command": "echo Hello"

      "group": "test"  // => >Run Test Task => 选择 Task

      "group": "build" // => >Run Build Task => 选择 Task

      "group": {       // => >Run Test Task 直接执行，Run Build Task => `⌘(ctrl)` + `shift` + `b`

        "kind": "test",

        "isDefault": true

      }

      "presentation":{

        "echo": true,

        "reveal": "always",

        "focus": false,

        "panel": "shared",

        "showReuseMessage": true,

        "clear": false

      }

    }

  ]

}

//process 类型任务

{

  "tasks": [ 

    { 

      "label": "chrome", 

      "type": "process", 

      "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",

      "windows": { "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" }, "linux": { "command": "/usr/bin/google-chrome" }

    }

  ]

}

// 多任务

{

  "label": "compile", 

  "dependsOn": [ "frontend", "backend" ], 

  "group": { "kind": "build", "isDefault": true }

}

# VSCode Debug

# 单文件 debug

• 点击行号前方空白添加断点 / F9
• ⌘(ctrl) + shift + d

# 工作区 debug (/.vscode/launch.json)

Visual Studio Code Variables Reference

{

  "configurations": [

    { 

      "type": "node",      // 调试插件类型

      "request": "launch", //launch 启动并调试，attach 调试已经启动的程序

      "name": "Gulp task",

      "program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js", 

      "args": [ "task" ]

    }

  ]

  "compounds": [ { "name": “All”, "configurations": [“frontend”, “backend”] }]

}

通用参数

• program 一般用于指定将要调试的文件。

• stopOnEntry，当调试器启动后，是否在第一行代码处暂停代码的执行。这个属性非常方便，如果没有设置断点而代码执行非常快的话，我们就会像文章的最开头那样，代码调试一闪而过，而没有办法在代码执行的过程中暂停了。而设置了 stopOnEntry 后，代码会自动在第一行停下来，然后我们就可以继续我们的代码调试了。

• args 参数。相信你应该记得在前面任务系统配置的文章里，我已经说明了可以使用 args 来控制传入任务脚本的参数，同样的，我们也可以通过 args 来把参数传给将要被调试的代码。

• env 环境变量。大部分调试器都使用它来控制调试进程的特殊环境变量。

• cwd 控制调试程序的工作目录。

• port 是调试时使用的端口。

• sourceMaps，这样 JavaScript 的调试器就知道去阅读 sourcemap 文件了。

• sourceMapPathOverrides, 原因是 webpack 自己的特殊的 sourcemap 生成方式跟 VS Code 不兼容。要解决这个问题，我们既可以通过配置 webpack，也可以通过 “sourceMapPathOverrides” 这个属性来修复。

# 附录

# 常用语言折叠声明语法

• https://code.visualstudio.com/docs/editor/codebasics#_folding

# VSCode 命令行

打开文件并跳转到某一行: code -r -g [file_path]:[file_line] e.g. code -r -g package.json:128
比较两个文件: code -r -d [file_path_A] [file_path_B] e.g. code -r -d a.txt b.txt
将命令的结果显示在 VSCode 中: [cmd] | code - e.g. ls | code - , ifconfig | code -

# 在 Unity3D 中使用 VSCode

2017-02-07

官方参考

1. startup

• windows 需要安装

  • Microsoft .NET Core
  • Microsoft .NET Framework 3.5 SP1
  • ps: .NET Framework 3.5 安装时需要保证 window update 开启。否则更新不成功。window10 下开启 window update 方法：按 WIN + r 打开运行，输入 services.msc 回车。找到 “Windows update”。

• OSX 需要安装

  • Mono 跨平台的 .NET 框架。
  • homebrew: 打开终端执行 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • dotnet cli

2. configure

使用 VSCode 写 Unity 时，需要为 每一个 unity 项目单独配置一下，在项目的 Assets 目录下新建 Plugins/Editor 文件夹，将下载的 VSCode.cs 脚本文件放到这个目录下。重启一下 Unity。在 Preferences... 中（OSX 下的 Unity 选项卡，Windows 下的 Edit 选项卡）。

勾选六项。再次开启 unity 时就会自动启动 VSCode。根据 VSCode 控制台的（报错）信息 。去下载上方提到的几种前置。

3. 支持 .lua.txt

• 安装 lua 扩展
• 在设置中添加配置项

// 首选项 - 设置 - settings.json

{

  // ...

  "files.associations": {

    "*.lua.txt": "lua"

  }

}

windows 如果双击文件不打开 vscode，尝试勾选掉 Unity Preferences/VSCode 中的 enable Integration

• 插件

  • C#：VSCode 下的 C# 语法支持
  • Unity Snippets: 提供一些语法片段
  • C# Extensions: 语法快捷扩展

• settings.json

{

  "editor.fontSize": 18,

  "editor.tabSize": 2,

  "editor.wordWrap": "on",

  "editor.minimap.enabled": true,

  "editor.rulers": [ 80, 100 ],

  // "editor.renderWhitespace": "boundary",

  "files.autoGuessEncoding": true,

  "files.autoSave": "onWindowChange",

  "files.defaultLanguage": "zh-cn",

  "markdown.preview.fontSize": 18,

  "extensions.autoUpdate": true,

  "workbench.colorTheme": "Material Theme",

  "workbench.iconTheme": "vs-seti"

}

• 异常问题
  1. 编辑器启动报错：OmniSharp.MSBuild.ProjectFile.ProjectFileInfo The reference assemblies for framework ".NETFramework,Version=v2.0" were not found.
  • 原因电脑中包含多个版本的 mono
  • 解决方案： brew unlink mono; brew link mono ，
  • 惨嚎链接：https://github.com/OmniSharp/omnisharp-vscode/issues/1004

# Rmote + VSCode 修改远程服务器文件

**Note:** 不能打开文件夹

foo/ is a directory and rmate is unable to handle directories.

参考

• https://www.cnblogs.com/learn21cn/p/6189023.html

• https://raw.githubusercontent.com/aurora/rmate

• 本机

  1. vscode 安装 Remote VSCode 插件
  2. 安装完后 command + p 输入 > remote 点击 Remote Start Server
  3. 打开终端执行 ssh -R 52698:localhost:52698 [远程主机用户]@[远程主机IP]
  • 这里的端口改不了，好像写死在 shell 脚本里了
  • windows 可以使用 Cmder 代替终端

• 远程服务器

$ wget https://raw.githubusercontent.com/aurora/rmate/master/rmate
$ chmod +x ./rmate
$ mv ./rmate /usr/local/bin/

$ touch ~/foo.txt
$ rmate ~/foo.txt

# lib

• VS Code 能做到 - 该网站收集 VS Code 能够实现的各种高级功能教程，目前已经有 36 个
• 合并行: ctrl + j
• 切换窗口 (工作区): ctrl + w
• 切换 tab: ⌘(ctrl) + option + ← / →
• 代码提示: ctrl + enter
• 强制 js 进行 ts 检查 // @ts-check

# 插件