SETUP
mac
- path里注冊code命令，在Command Palette（ctrl+shift+p）里輸入
shell command就能看見了，操作的是.bash_profile - touch bar support
GET START
基本使用
高級搜索
全局搜索的時候篩選文件，只支持少部分正則語法
example
./example #必須是頂層的example
*to match one or more characters in a path segment?to match on one character in a path segment**to match any number of path segments, including none{}to group conditions (e.g.{**/*.html,**/*.txt}matches all HTML and text files)[]to declare a range of characters to match (e.g.,example.[0-9]to match onexample.0,example.1, …)
配置
分為兩種：工作區配置和用戶全局設置
{
"editor.wordWrap": "on", //多種配置方式，這是根據視區大小自動換行
}
自動保存
通過控制台輸入setting快速打開
files.autoSave: 可以有以下的值
off - to disable auto save.
afterDelay - to save files after a configured delay.
onFocusChange - to save files when focus moves out of the editor of the dirty file.
onWindowChange - to save files when the focus moves out of the VS Code window.
files.autoSaveDelay: Configures the delay in milliseconds when files.autoSave is configured to afterDelay.
代理
[詳情見](https://code.visualstudio.com/docs/setup/setup-overview\1 proxy-server-support)
Note: VS Code supports http and https proxies, but not SOCKS proxies.
Command Palette控制台
執行各種設置和命令，不一定要輸入完整的命令，會有提示的
- theme、setting、keybord（快捷鍵）、snip、fold
- git（各種操作）
比如：git checkout
藍色：改變的行，綠色：新的行，紅色尖尖：被刪除的行
選項里：撤銷上次提交、顯示git信息
特定語言配置
控制台輸入Configure language 就知道了
顯示語言
控制台輸入display
Key Bindings快捷鍵
https://code.visualstudio.com/docs/getstarted/keybindings
有一些拓展，打包好了快捷鍵設置，可以模擬vim\sublime text等快捷鍵https://code.visualstudio.com/docs/getstarted/keybindings#_keymap-extensions
自定義
ctrl+k ctrl+s打開，可以查看目前的快捷鍵綁定，右擊可以檢測沖突
可選的控制按鍵
| Platform | Modifiers |
|---|---|
| macOS | ctrl+, shift+, alt+, cmd+ |
| Windows | ctrl+, shift+, alt+, win+ |
| Linux | ctrl+, shift+, alt+, meta+ |
默認
ctrl在mac下代表cmd，有些可能不一致
navigation 導航
ctrl+p 查看搜索打開目錄下的所有的文件
ctrl+tab 切換打開的tab欄，按tab選擇
ctrl+g 跳轉到指定的行
Ctrl+Tab Navigate entire history（當前打開tab的歷史)
Alt+Left/Right Windows: Navigate back/forward（鼠標焦點位置前后退/前進)
Ctrl+- / Ctrl+Shift+- Mac: navigate back/forward
ctrl+G 快速行跳轉
F12或者ctrl+click 跳轉到定義（懸停不點的時候也會有提示）
shift+F12 查找所有引用
cmd + up/down 文件樹打開/關閉文件夾
選擇/查找
ctrl+alt+up/down 列選擇
shift+alt+click 塊選擇
ctrl+shift+left/right 快速選擇
alt+up/down 選中后使用快捷鍵，整塊代碼向上/下移動
ctrl+shift+f 在打開的文件夾中尋找（可以選擇文件搜索范圍，支持正則表達式,反向引用：$1）
ctrl+f 在當前文件查找
ctrl+h 在當前文件中替換
ctrl+shift+o 快速查找本文件函數等symbol 和在控制台輸入@效果一樣，使用@:還可以讓symbol分類顯示
ctrl+t 查找工作區symbol
ctrl+i 選擇當前行
快速選擇的效果
鼠標下的塊選擇
編輯
ctrl+/ 加/解注釋
ctrl+alt+down/up 列編輯
alt+click Multiple cursors多處編輯
shift+alt+up/down 快速復制本行到上/下
F2 重命名變量之類的symbol(php不起作用)
#（注：ubuntu和本身快捷鍵沖突，按alt會彈出菜單，需要設置gsettings set org.gnome.desktop.wm.preferences mouse-button-modifier "<Super>"）
窗口/其他
ctrl+shift+p 或者 F1 打開控制台
ctrl+\ 將一個文檔分分為兩個窗口，最多三個，然后使用ctrl+1或2或3可以跳到對應的窗口
ctrl+` 啟動終端
ctrl+b 打開/關閉左邊側邊欄（sidebar)
ctrl+k ctrl+s 修改快捷鍵綁定
折疊
- Fold (
Ctrl+Shift+[) 折疊所在的這個部分 - Unfold (
Ctrl+Shift+]) 取消所在部分的折疊 - Fold All (
Ctrl+K Ctrl+0) 折疊當前編輯文件的所有可折疊部分 - Unfold All (
Ctrl+K Ctrl+J) 取消當當前文件所有折疊 - Fold Level X (
Ctrl+K Ctrl+2for level 2) 折疊所有level x（還可以用 ctrl+3、ctrl+4等）的縮進去（除了當前編輯位置所在的）
User Interface界面
-
view->editor Group有一些預定義的布局
-
可以控制是在一個新的tab預覽還是在本tab，https://code.visualstudio.com/docs/getstarted/userinterface#_disable-preview-mode
-
窗口，可以直接拉動tab到對應的位置就可
IntelliSense 智能補全
配置
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true //開啟字符串的自動補全
},
配置suggestion不顯示snippets：editor.snippetSuggestions:"none"，
Debugging
debug需要又對應的配置才可以
除了可以加斷點(條件斷點、計數【一共達到這么多次才生效】)，js、python、php等少數語言還可以加logpoints（在這個地方記錄信息）
launch.json
一些重要的配置
preLaunchTask:debug前需要執行的數據，直接給task.json中任務的name就行postDebugTask：debug后需要指定的
部分語言的debugger支持的配置
program- executable or file to run when launching the debuggerargs- arguments passed to the program to debugenv- environment variables (the valuenullcan be used to "undefine" a variable)cwd- current working directory for finding dependencies and other filesport- port when attaching to a running processstopOnEntry- break immediately when the program launchesconsole- what kind of console to use, for example,internalConsole,integratedTerminal,externalTerminal.
Platform specific properties 平台相關配置
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
"args": ["myFolder/path/app.js"],
"windows": { //windows執行的時候會用下邊的args代替，其他還有osx、linux
"args": ["myFolder\\path\\app.js"]
}
}
]
}
Global launch configuration 全局launch
在用戶設置里邊添加launch
"launch": {
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${file}"
}]
}
Multi Debugging
比如server client這類涉及到多個程序的
https://code.visualstudio.com/docs/editor/debugging#_multitarget-debugging
Remote Debugging
Vscode不原聲支持，決定於你使用的拓展
Vision Control
任意文件的比較：先右擊文件選擇Select for Compare，然后再右擊另一個文件選擇和已選項目進行比較
很方便，github pull request支持：https://code.visualstudio.com/docs/editor/versioncontrol#_working-with-pull-requests
Intergrated Teiminal 集成終端
配置
// Command Prompt
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe"
// PowerShell
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
// Git Bash
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"
// Bash on Ubuntu (on Windows)
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\bash.exe"
//shell參數
// Linux
"terminal.integrated.shellArgs.linux": ["-l"]
基本字體設置：https://code.visualstudio.com/docs/editor/integrated-terminal#_terminal-display-settings
復制快捷鍵：
- Linux: Ctrl+Shift+C and Ctrl+Shift+V
- macOS: Cmd+C and Cmd+V
- Windows: Ctrl+C and Ctrl+V
將選擇的文本在當前終端運行，在控制台run selected
task 任務
Typescript、C#等語言有預定義的一些任務
tasks就是一些預定義的任務，必須在文件夾下才可以運行（因為人家需要有配置文件嘛）
Custom tasks 預定義任務
控制台輸入task，然后就知道怎么做了，后邊選others（任意任務），有示例
注意，任務的執行是和配置集成終端種類有關的，我配置的集成終端是bash on windows，所以實在bash下執行的
- 同樣可以針對特定的操作系統配置
{
"version": "2.0.0",
"tasks": [
{
"label": "echo", //用戶界面顯示的名稱
"type": "shell", //自定義的可以是shell（這個一個shell命令）或者process（直接執行這個程序）,
"group":"test", //分類，可以是build、test，可以通過run test task來執行
"command": "printenv"，
"args":[ //傳遞給命令的參數
{
"value":"xxxx",
"quoting": "escape" //指定對內容的escape
}
],
"presentation":{ //控制命令的輸出和終端的使用
},
"problemMatcher":[], //錯誤捕獲設置，例子可以參見后邊的cpp的task的設置，vscode預定義的一些，很多js的，還有GO的（$go）、VB和C#的，C++ extension已經定義了gcc默認的matcher
"options":{
"cwd":"/mnt/d/code",
"env":{ //wsl的環境變量支持有問題，設置不生效
"MY_NAME":"jcuan"
}，
"shell":{ //shell執行的一些配置
"executable": "bash",
"args": [
"-c"
]
},
}
}
]
}
-
綁定測試任務快捷鍵
{ "key": "ctrl+h", "command": "workbench.action.tasks.runTask", "args": "Run tests" }
task配置中會使用到的變量
${workspaceRoot} VS Code當前打開的文件夾
${file} 當前打開的文件
${relativeFile} 相對於workspaceRoot的相對路徑
${fileBasename} 當前打開文件的文件名
${fileDirname} 所在的文件夾，是絕對路徑
${fileExtname} 當前打開文件的拓展名，如.json
${cwd} the task runner's current working directory on startup
使用環境變量 ${env.Name} (e.g. ${env.PATH})，使用配置信息${config:python.pythonPath}
多行錯誤信息和后台task信息反饋：https://code.visualstudio.com/docs/editor/tasks#_defining-a-multiline-problem-matcher
snippets設置和使用代碼塊
"For Loop": {
"prefix": "for",
"body": [
"for (var ${index} = 0; ${index} < ${array}.length; ${index}++) {",
"\tvar ${element} = ${array}[${index}];",
"\t$0",
"}"
],
"description": "For Loop"
},
For Loop代碼塊的名字prefix定義觸發的關鍵詞body內容description輸入關鍵詞觸發snippets的提示信息
可選的變量：
-
$1, $2tab 停止的地方 -
${id}定義變量（填空的地方），如${lable}是變量相同id的文件會被綁定到一起同時編輯
注
如果你的代碼含有{ or }, 需要轉義，如\\{ and \\}
Emmet
html，超級牛逼的補全，vscode自帶，不用任何拓展
還可以很騷的在snippets里邊使用emmet
WSL適配
現在bas on windows已經很6了，可以在bash里直接執行exe文件，vscode可以通過一些文件參數的轉換使用linux下的工具
首先要知道
wslpath D://code/php #這個會返回/mnt/d/code/php linux可以執行這個命令將windows下的path轉換成linux下的
php
@GioBonvi 在 https://github.com/Microsoft/vscode/issues/22391 指出了兩個腳本，我只使用第一個腳本。第二個腳本在換行符轉換上有問題，返回內容會被修改，而且xdebug調試不能實時獲得輸出
下邊是這個腳本文件，需要修改的是set v_params=%v_params:D:=/mnt/d%這一行，在哪個盤就修改成哪個盤
@echo OFF
setlocal ENABLEDELAYEDEXPANSION
rem Collect the arguments and replace:
rem '\' with '/'
rem 'c:' with 'mnt/c'
rem '"' with '\"'
set v_params=%*
set v_params=%v_params:\=/%
set v_params=%v_params:D:=/mnt/d%
set v_params=%v_params%
set v_params=%v_params:"=\"%
rem Call the windows-php inside WSL.
rem windows-php is just a script which passes the arguments onto
rem the original php executable and converts its output from UNIX
rem syntax to Windows syntax.
C:\Windows\sysnative\bash.exe -l -c "php %v_params%"
1.將配置里的php.validate.executablePath改為上邊哪個cmd文件的位置,
2.現在xdebug還需要配置遠程調試，重點就是在pathMapping
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000,
"pathMappings": {
"/mnt/d/code/php2/worktest": "${workspaceRoot}"
}
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"runtimeExecutable":"${config:php.validate.executablePath}",
"port": 9000,
"pathMappings": {
"/mnt/d/code/php2/worktest": "${workspaceRoot}"
}
}
]
}
通用拓展
vim
- gd 跳轉到定義
- gb 多鼠標，注意在visual模式下是不能使用i進入插入模式的，需要回到normal再進入
- gh 相當於鼠標移動到上百年 顯示函數提示啥的
- 配置不被vscodevim處理的快捷鍵
"vim.handleKeys": {
"": false
} - 如果要使用復制，ctrl+shift+v是可用的，但是markdown文件不可用，因為和預覽沖突
特定語言
C/CPP
note:覺得這些拓展的功能還是太弱了，居然上邊定義的變量都沒有提示。kdevelop還不錯，界面也挺棒的，強烈推薦。這個拓展越來越牛了
靈活一點的debug需要使用make、gdb 。
右擊斷點可以設置條件斷點，監控欄可以監控一些表達式。
調試配置
-
配置launch.json
"program": "${workspaceRoot}/a.out", //make build生成的文件的名字，不要叫build "preLaunchTask": "build" -
配置tasks
沒必要定義problemMatcher，這個拓展自帶了
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "clean",
"type": "shell",
"command": "make clean",
},
{
"label": "build",
"type": "shell",
"command": "make build",
"presentation": {
"echo": false,
"reveal": "never",
"focus": false,
"panel": "shared",
"showReuseMessage": true
}
]
}
PHP
- php Debug棒的不行
需要在setting.json里設置"php.validate.executablePath": "/usr/bin/php" - php docblocker
- php IntelliSense Ben Mewburn的這個，首先index的速度可以，然后功能特別豐富，基本的文檔注釋也是parse的
- 注意vscode xdebug的一個問題，如果監控信息欄有錯誤的監控變量或者表達式之類的，可能造成調試在斷點暫停之后無法繼續，刪除這個監控的就可以了
Markdown
對於重度markdown使用者，請使用typora，不會后悔
python
拓展推薦：python 就是搜python排名最高那個，安裝之后右擊查看強大功能
調試配置（只截取修改部分）：
在用戶配置（可通過console控制台里輸setting打開）里面將python改為運行python命令的地址，如果在終端中可以直接運行python命令，只輸入python也可以
下邊python文件中的pythonpath也是指的python命令地址
"configurations": [
{
"name": "Python",
"type": "python",
"request": "launch",
"stopOnEntry": true,
"pythonPath": "${config.python.pythonPath}",
"program": "${file}",
"debugOptions": [
"WaitOnAbnormalExit",
"WaitOnNormalExit",
"RedirectOutput"
]
},
{
"name": "Flask",
"type": "python",
"request": "launch",
"stopOnEntry": false,
"pythonPath": "${config.python.pythonPath}", //如果需要用venv里面的python，需要把這個改成python命令位置，類似這樣的/home/jcuan/code/python/project/venv/bin/python
"program": "/home/jcuan/code/python/project/venv/bin/flask", //flask命令地址，flask0.11之后可以通過flask run的方式來運行python，不過需要一些配置，比如FLASK_APP環境變量的設置，可以通過運行 flask --help 和flask run --help來查看幫助
"env": {
"FLASK_APP": "${workspaceRoot}/app/__init__.py" //設置必要環境變量，這個文件就是你項目開始的那個文件
},
"args": [ //運行flask命令的參數
"run",
"--no-debugger",
"--no-reload"
],
"debugOptions": [
"WaitOnAbnormalExit",
"WaitOnNormalExit",
"RedirectOutput"
]
}
我的__init__.py大概像這樣的，
from flask import Flask
app = Flask(__name__, static_folder='statics', static_url_path='/static')
app.config.from_pyfile('config.py')
import hello