visual studio code 編輯器的配置及快捷鍵等, vscode, csc

visual studio code (vsc) 對開發node.js,javascript,python,html,golang等比較友好,同時支持git瀏覽及分屏對比,運行速度快,因此是值得一用的編輯器。javascript

 

Visual Studio Code 最好的功能、插件和設置

Git Easy

這個插件能夠導入下面的 Git 命令,以便您能夠在命令面板中使用。和 Atom 中實用很是類似。html

  • Git Easy: Init
  • Git Easy: Add Origin
  • Git Easy: Add Remote
  • Git Easy: Add File/Directory
  • Git Easy: Add All Modified
  • Git Easy: Commit
  • Git Easy: Pull Current Branch from Origin
  • Git Easy: Push Current Branch to Origin
  • Git Easy: Push Current Branch (to any remote)
  • Git Easy: Status
  • Git Easy: Create New Branch
  • Git Easy: Change/Checkout Existing Branch
  • Git Easy: Log All
  • Git Easy: Log Current File

https://marketplace.visualstudio.com/items?itemName=bibhasdn.git-easy前端

AutoFileName (文件路徑自動補全插件)

當你須要 require 本地文件時,這個插件將爲你提供基於你輸入的文件路徑的自動補全的選項。vue

https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilenamejava

ESLint

添加對 ESLint 的支持,並在安裝和重啓 VS Code 後自動開始工做。node

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslintpython

JavaScript (ES6) Code Snippets (代碼片斷插件)

用代碼片斷加快 ES6 開發速度,例如輸入 imd 能夠自動生成以下代碼:git

JavaScript 代碼:
  1. import { } from 'somewhere';

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippetses6

Project Manager (項目管理器插件)

簡單的項目管理器,能夠在你的編輯器中快速切換項目。github

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

Sort Lines (代碼行排序插件)

這個插件能夠對選中的代碼行進行排序。也提供不區分大小寫、反向和惟一等排序功能。

https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines

Wallaby.js (測試插件)

一個高級的連續測試運行器,當您對您正在工做的文件進行測試時,它會在你的編輯器中建立經過測試或測試失敗的視覺反饋。

https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode

Sync Settings (設置同步插件)

你頗有可能在多臺電腦上進行編碼工做。在電腦上移植你的插件和設置是垂手可得的事,這要歸功於 Shan Ali Khan 的設置同步擴展。

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Git History (Git 歷史記錄插件)

可視化的 Git 歷史記錄插件。

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

EditorConfig (代碼格式化插件)

添加對 EditorConfig 的支持,所以當您格式化文件時,它會引用此約定。

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Document This (JSDoc註釋插件)

在 TypeScript 和 JavaScript 文件中自動生成詳細的 JSDoc 註釋。

https://marketplace.visualstudio.com/items?itemName=joelday.docthis

npm Intellisense (npm 模塊導入插件)

VS Code 擴展,在 import 導入語句中自動完成npm 模塊。

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

Align (代碼對齊插件)

對齊文本,使代碼根據 =:等對齊。

對齊前:

JavaScript 代碼:
  1. var test = 'string';
  2. var another = 10;
  3. var small = 10 * 10;

對齊後:

JavaScript 代碼:
  1. var test        = 'string';
  2. var another = 10;
  3. var small     = 10 * 10;

https://marketplace.visualstudio.com/items?itemName=steve8708.Align

amVim (vim 插件)

目前 VS Code 中的最好用的 vim 插件。不是下載最多的 vim 插件,但它使用的是多指針,不像那些下載最多的插件。

https://marketplace.visualstudio.com/items?itemName=auiworks.amvim

change-case (命名格式插件)

快速修改突出顯示的選中文本的命名格式。 camelCase(駱駝拼命名),PascalCase(首字母大寫),kebab-case(中劃線命名),underscore_delimited(下劃線命名),CONSTANT(大寫命名)等。

https://marketplace.visualstudio.com/items?itemName=zhengxiaoyao0716.intelligence-change-case

vscode-icons (側邊欄圖標插件)

能夠更換側邊欄中漂亮的圖標。

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

change-case (命名格式插件)

快速修改突出顯示的選中文本的命名格式。 camelCase(駱駝拼命名),PascalCase(首字母大寫),kebab-case(中劃線命名),underscore_delimited(下劃線命名),CONSTANT(大寫命名)等。

https://marketplace.visualstudio.com/items?itemName=zhengxiaoyao0716.intelligence-change-case

 

在Visual Studio Code中配置GO開發環境

對於Visual Studio Code開發工具,有一款優秀的GoLang插件,它的主頁爲:https://github.com/microsoft/vscode-go

這款插件的特性包括:

  • Colorization 代碼着彩色
  • Completion Lists 代碼自動完成(使用gocode)
  • Snippets  代碼片斷
  • Quick Info 快速提示信息(使用godef)
  • Goto Definition 跳轉到定義(使用godef)
  • Find References  搜索參考引用(使用go-find-references)
  • File outline 文件大綱(使用go-outline)
  • Workspace symbol search 工做區符號搜索(使用 go-symbols
  • Rename 重命名(使用gorename)
  • Build-on-save 保存構建(使用go build和go test)
  • Format 代碼格式化(使用goreturns或goimports或gofmt)
  • Add Imports  添加引用(使用 gopkgs)
  • Debugging 調試代碼(使用delve)

本插件的安裝教程,請查看《Windows環境下vscode-go安裝日記

Debugging Go code using VS Code

https://github.com/Microsoft/vscode-go/wiki/Debugging-Go-code-using-VS-Code

Install delve

If you are on Windows or Linux, running Go: Install/Update Tools would have installed delve for you. If you don't want to run that command or you are on OS X, you can manually install delve as per the Installation Instructions. On OS X it requires creating a self-signed cert to sign the dlv binary.

Based on how you install delve it will either end up in your PATH or GOPATH/bin. If dlv binary is in your GOPATH/bin and this GOPATH is not set as an environment variable, then make sure your PATH points to this GOPATH/bin so that the Go extension can find the dlv binary.

Set up configurations in launch.json

Once delve is installed, you can either press F5 or go to the Code debug viewlet and select the configuration gear.

You will now see a launch.json file created for your workspace, which will contain the configurations for debugging. By default, there would be a single configuration as below:

{
	"version": "0.2.0", "configurations": [ { "name": "Launch", "type": "go", "request": "launch", "mode": "debug", "remotePath": "", "port": 2345, "host": "127.0.0.1", "program": "${fileDirname}", "env": {}, "args": [], "showLog": true } ] }

Ignore remotePath, host and port if you are not remote debugging.

The program option is mandatory.

  • This can refer to a package folder to debug, or a file within that folder.
  • This should be a full path and not relative.
  • Use ${workspaceFolder} to debug package at the root of the workspace that is opened in VS Code
  • Use ${file} to debug the current file.

The mode parameter can be set to:

  • debug to compile the contents of the program folder and launch under the debugger. [default]
  • test to debug tests in the program folder. To debug a single test, pass -test.run and the Test name as args. Additionally, you can pass -test.v to get verbose output as well.
  • exec to run a pre-built binary specified in program, for example "program":"${workspaceRoot}/mybin".
  • remote to attach to a remote headless Delve server. You must manually run Delve on the remote machine, and provide the additional remotePath, host and port debug configuration options pointing at the remote machine.

In version 0.6.66 or lesser of the Go extension, the debugger cannot read your settings. It figures out the GOPATH from either the environment variables or from the path provided in the program option. If you have set multiple GOPATHs in the go.gopath setting, pass the same in the env option of the launch.json as an environment variable.

As of 0.6.67 version, the debugger will inherit the GOPATH from settings. Run Go: Current GOPATH command to see the GOPATH being used by the Go extension and the debugger.

Snippets for Debug Configurations

As of 0.6.54 version of the Go extension, you can now make use of snippets while editing the launch.json file. Type "Go" and you will get debug configuration snippets for debugging current file/package, a test function etc.

Debugging the Debugger?

Set showLog attribute in your debug configuration to true. You will see logs in the debug console from delve.

Set trace attribute in your debug configuration to verbose. You will see logs in the debug console from the Go extension's debug adapter. These logs will be saved to a file whose path will be printed at the beginning in the debug console.

If you want to dig deeper and debug the debugger using source code of this extension, read building-and-debugging-the-extension

Remote Debugging

To remote debug using VS Code, you must first run a headless Delve server on the target machine. For example:

$ dlv debug --headless --listen=:2345 --log

Any arguments that you want to pass to the program you are debugging must be passed to this Delve server that runs on the target machine. For example:

$ dlv debug --headless --listen=:2345 --log -- -myArg=123

Note: Do not pass the flag –api-version=2 to dlv. The Go extension doesn't support v2 of delve APIs yet.

Then, create a remote debug configuration in VS Code launch.json.

{
	"name": "Remote", "type": "go", "request": "launch", "mode": "remote", "remotePath": "${workspaceRoot}", "port": 2345, "host": "127.0.0.1", "program": "${workspaceRoot}", "env": {} }

When you launch the debugger with this new Remote target selected, VS Code will send debugging commands to the dlv server you started previously instead of launching it's own dlv instance against your app.

The above example runs both the headless dlv server and the VS Code debugger locally on the same machine. For an example of running these on different hosts, see the example of debugging a process running in a docker host at https://github.com/lukehoban/webapp-go/tree/debugging.

Troubleshooting

Cannot find Delve debugger at ... Ensure it is in your "GOPATH/bin" or "PATH".

Like the error message says, the extension cannot find dlv. Remember, the debug adapter cannot read the VS Code settings.

Solution: Add the location where dlv is installed to your PATH. You can find this location by running which dlv or where dlv

Cannot find package ".." in any of ...

The debugger is not using the right GOPATH. This shouldnt happen, if it does, log a bug.

Solution: Until the bug you logged is resolved, the work around is to add the GOPATH as an env var in the env property in the launch.json file.

Failed to continue: "Error: spawn EACCES"

You have dlv running just fine from command line, but VS Code gives this access related error. This can happen if the extension is trying to run the dlv binary from a wrong location. The Go extension first tries to find dlv in your $GOPATH/bin and then in your $PATH.

Solution: Run which dlv in the command line. If this doesnt match your GOPATH/bin, then delete the dlv file in your GOPATH/bin

could not launch process: stat ***/debug.test: no such file or directory

You may see this in the debug console, while trying to run in the test mode. This happens when the program attribute points to a folder with no test files.

Solution: Ensure that the program attribute points to the folder that contains the test files you want to run.

could not launch process: could not fork/exec

This usually happens in OSX due to signing issues. See the discussions in please see #717, #269 and derekparker/delve/357

Solution: You may have to uninstall dlv and install it manually as per instructions

could not launch process: exec: "lldb-server": executable file not found in $PATH

This error can show up for Mac users using delve of version 0.12.2 or above. Not sure why, but doing a xcode-select --install has solved the problem for users who have seen this issue.

Unverified breakpoints when remote debugging

Check the version of delve api being used in the remote delve process. v2 is not yet supported in the Go extension. So if you have –api-version=2 being passed to dlv, remove that flag and try again

 

 

 

vscode: Visual Studio Code 經常使用快捷鍵

主命令框

F1Ctrl+Shift+P: 打開命令面板。在打開的輸入框內,能夠輸入任何命令,例如:

  • 按一下 Backspace 會進入到 Ctrl+P 模式
  • Ctrl+P 下輸入 > 能夠進入 Ctrl+Shift+P 模式

Ctrl+P 窗口下還能夠:

  • 直接輸入文件名,跳轉到文件
  • ? 列出當前可執行的動做
  • ! 顯示 ErrorsWarnings,也能夠 Ctrl+Shift+M
  • : 跳轉到行數,也能夠 Ctrl+G 直接進入
  • @ 跳轉到 symbol(搜索變量或者函數),也能夠 Ctrl+Shift+O 直接進入
  • @ 根據分類跳轉 symbol,查找屬性或函數,也能夠 Ctrl+Shift+O 後輸入:進入
  • # 根據名字查找 symbol,也能夠 Ctrl+T

經常使用快捷鍵

編輯器與窗口管理

  1. 打開一個新窗口: Ctrl+Shift+N
  2. 關閉窗口: Ctrl+Shift+W
  3. 同時打開多個編輯器(查看多個文件)
  4. 新建文件 Ctrl+N
  5. 文件之間切換 Ctrl+Tab
  6. 切出一個新的編輯器(最多 3 個) Ctrl+\,也能夠按住 Ctrl 鼠標點擊 Explorer 裏的文件名
  7. 左中右 3 個編輯器的快捷鍵 Ctrl+1 Ctrl+2 Ctrl+3
  8. 3 個編輯器之間循環切換 Ctrl+
  9. 編輯器換位置, Ctrl+k而後按 LeftRight

代碼編輯

格式調整

  1. 代碼行縮進 Ctrl+[Ctrl+]
  2. Ctrl+CCtrl+V 複製或剪切當前行/當前選中內容
  3. 代碼格式化: Shift+Alt+F,或 Ctrl+Shift+P 後輸入 format code
  4. 上下移動一行: Alt+UpAlt+Down
  5. 向上向下複製一行: Shift+Alt+UpShift+Alt+Down
  6. 在當前行下邊插入一行 Ctrl+Enter
  7. 在當前行上方插入一行 Ctrl+Shift+Enter

光標相關

visual studio code 快捷鍵:

0、回到上次光標的位置:

  On Windows:

    Alt+     .. navigate back

    Alt+     .. navigate forward

  On Mac:

    Ctrl+-     .. navigate back

    Ctrl+Shift+-     .. navigate forward

  On Ubuntu Linux:

    Ctrl+Alt+-       .. navigate back

    Ctrl+Shift+-       .. navigate forward

  1. 移動到行首: Home
  2. 移動到行尾: End
  3. 移動到文件結尾: Ctrl+End
  4. 移動到文件開頭: Ctrl+Home
  5. 移動到定義處: F12
  6. 定義處縮略圖:只看一眼而不跳轉過去 Alt+F12
  7. 移動到後半個括號: Ctrl+Shift+]
  8. 選擇從光標到行尾: Shift+End
  9. 選擇從行首到光標處: Shift+Home
  10. 刪除光標右側的全部字: Ctrl+Delete
  11. 擴展/縮小選取範圍: Shift+Alt+LeftShift+Alt+Right
  12. 多行編輯(列編輯):Alt+Shift+鼠標左鍵Ctrl+Alt+Down/Up
  13. 同時選中全部匹配: Ctrl+Shift+L
  14. Ctrl+D 下一個匹配的也被選中 (在 sublime 中是刪除當前行,後面自定義快鍵鍵中,設置與 Ctrl+Shift+K 互換了)
  15. 回退上一個光標操做: Ctrl+U

重構代碼

  1. 找到全部的引用: Shift+F12
  2. 同時修改本文件中全部匹配的: Ctrl+F12
  3. 重命名:好比要修改一個方法名,能夠選中後按 F2,輸入新的名字,回車,會發現全部的文件都修改了
  4. 跳轉到下一個 ErrorWarning:當有多個錯誤時能夠按 F8 逐個跳轉
  5. 查看 diff: 在 explorer 裏選擇文件右鍵 Set file to compare,而後須要對比的文件上右鍵選擇 Compare with file_name_you_chose

查找替換

  1. 查找 Ctrl+F
  2. 查找替換 Ctrl+H
  3. 整個文件夾中查找 Ctrl+Shift+F

顯示相關

  1. 全屏:F11
  2. zoomIn/zoomOut:Ctrl +/-
  3. 側邊欄顯/隱:Ctrl+B
  4. 顯示資源管理器 Ctrl+Shift+E
  5. 顯示搜索 Ctrl+Shift+F
  6. 顯示 Git Ctrl+Shift+G
  7. 顯示 Debug Ctrl+Shift+D
  8. 顯示 Output Ctrl+Shift+U

其餘

  • 自動保存:File -> AutoSave ,或者 Ctrl+Shift+P,輸入 auto

修改默認快捷鍵

打開默認鍵盤快捷方式設置:
File -> Preferences -> Keyboard Shortcuts,或者:Alt+F -> p -> k

修改 keybindings.json

// Place your key bindings in this file to overwrite the defaults
[
    // ctrl+space 被切換輸入法快捷鍵佔用
    {
        "key": "ctrl+alt+space",
        "command": "editor.action.triggerSuggest",
        "when": "editorTextFocus"
    },
    // ctrl+d 刪除一行
    {
        "key": "ctrl+d",
        "command": "editor.action.deleteLines",
        "when": "editorTextFocus"
    },
    // 與刪除一行的快捷鍵互換
    {
        "key": "ctrl+shift+k",
        "command": "editor.action.addSelectionToNextFindMatch",
        "when": "editorFocus"
    },
    // ctrl+shift+/多行註釋
    {
        "key":"ctrl+shift+/",
        "command": "editor.action.blockComment",
        "when": "editorTextFocus"
    },
    // 定製與 sublime 相同的大小寫轉換快捷鍵,需安裝 TextTransform 插件
    {
        "key": "ctrl+k ctrl+u",
        "command": "uppercase",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+k ctrl+l",
        "command": "lowercase",
        "when": "editorTextFocus"
    }
]

前端開發必備插件

  • PostCSS Sorting
  • stylelint
  • stylefmt
  • ESLint
  • javascript standard format
  • beautify
  • Babel ES6/ES7
  • Debugger for Chrome
  • Add jsdoc comments
  • javascript(ES6) code snippets
  • vue
  • weex
  • Reactjs code snippets
  • React Native Tools
  • Npm Intellisense
  • Instant Markdown
  • Markdown Shortcuts
  • TextTransform

自定義設置參考

vscode 自定義配置參考:

{
    "editor.fontSize": 18,
    "files.associations": {
        "*.es": "javascript",
        "*.es6": "javascript"
    },
    // 控制編輯器是否應呈現空白字符
    "editor.renderWhitespace": true,
    // 啓用後,將在保存文件時剪裁尾隨空格。
    "files.trimTrailingWhitespace": true,
    // File extensions that can be beautified as javascript or JSON.
    "beautify.JSfiles": [
        "",
        "es",
        "es6",
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc"
    ]
}

相關參考

官方快捷鍵大全:https://code.visualstudio.com/docs/customization/keybindings

相關文章
相關標籤/搜索