See Alse Sublime Text 2Vim

Visual Studio Code

Visual Studio Code是一个由微软开发的,同时支持Windows、Linux和macOS操作系统的开源文本编辑器。它支持调试,内置了Git 版本控制功能,同时也具有开发环境功能,例如代码补全、代码片段、代码重构等。

1. History

2015年4月29日,微软在开发者大会上宣布微软将开发 Visual Studio Code。不久之后就发布了第一个预览版本。

2015年11月18日,VS Code团队将其在GitHub上面开源,并采用MIT许可证,同时宣布将支持扩展功能。

2016年4月14日,Visual Studio Code发布预览版并正式在网站上发布。

2. Features

Visual Studio Code is a source code editor. It supports a number of programming languages and a set of features that may or may not be available for a given language, as shown in the following table. Many of Visual Studio Code features are not exposed through menus or the user interface. Rather, they are accessed via the command palette or via a .json file (e.g., user preferences). The command palette is a command-line interface. However, it disappears if the user clicks anywhere outside it or presses a key combination on the keyboard to interact with something outside it. This is true for time-consuming commands as well. When this happens, the command in progress is cancelled.

In the role of a source code editor, Visual Studio Code allows changing the code page in which the active document is saved, the character that identifies line break (a choice between LF and CRLF), and the programming language of the active document.

Visual Studio Code对C#、JavaScript和TypeScript的原生支持最为完备。

此外Visual Studio Code支持扩展程序。通过扩展程序,Code也可以支持更多语言和功能。扩展程序可以通过语言服务器协议完成代码格式化、静态分析、调试的功能。

2.1. Extensions

Visual Studio Code Extensions

2.1.1. List the installed extension in the command line in the lastest release of VSCode (May 2016) it is now possible to list the installed extension in the command line

code --list-extensions | xargs -L 1 echo code --install-extension

2.1.2. Clear Cache of VS Code Extensions

rm -rf ~/Library/Application\ Support/Code/Cache
rm -rf ~/Library/Application\ Support/Code/CachedData/

2.2. Remote Development

VS Code Remote Development

3. Setup

Install Visual Studio Code or Visual Studio Code Insiders.

3.1. Running VS Code on Mac

Running VS Code on Mac

3.2. Integrated Terminal

View > Integrated Terminal //开启终端视图

3.3. Shell Command

# Link to Studio Code - Insiders
ln -sf /Applications/Visual\ Studio\ Code\ -\ /usr/local/bin/code

4. 文本编辑

4.1. User Interface

Basic Layout - VS Code 由 5 部分构成

4.1.1. Font

See Also 等宽字体、[[vscode_ ntegrated_terminal_with_powerline_font|Powerline 字体]]

CMD + , 激活配置选项,搜索 font

Cascadia Code

4.1.2. Minimap - outline view

关闭Minimap: Settings(⌘,) -> "editor.minimap.enabled": false

打开面包屑导航: Settings(⌘,) -> "breadcrumbs.enabled": true

4.1.4. Command Palette


4.2. Themes

4.2.1. DuoTone Dark Themes

4.3. Key Bindings lists out the default bindings (keyboard shortcuts) and describes how you can update them.

4.3.1. Keyboard Shortcuts Editor


4.3.2. Keymap Extensions

Preferences > Keymaps: @recommended:keymaps

4.3.3. Keyboard Shortcuts Reference

⇧: shift;⌃: control;⌥: alt/option;⌘: command Basic editing

Keys Comments Popularity
⇧⌘K Delete line
⌥⌘[/ ⌥⌘] Fold/unfold region ✨✨✨
⌘K ⌘[/ ⌘K ⌘] Fold/unfold all subregions ✨✨✨
⌘K ⌘0/ ⌘K ⌘J Fold/unfold all regions ✨✨✨
⌘/ Toggle line comment
⇧⌥A Toggle block comment
⌥Z Toggle word wrap Multi-cursor and selection

Keys Comments Popularity
⌥+click Insert cursor
⌥⌘↑/↓ Insert cursor above/below ✨✨✨
⌘U Undo last cursor operation
⌘I Select current line
⇧⌘L Select all occurrences of current selection ✨✨✨
⌃⇧⌘→/← Expand / shrink selection
⇧⌥+ drag mouse Column (box) selection
⇧⌥⌘↑/ ↓ Column (box) selection up/down Search and replace

Keys Comments Popularity
⌘F Find
⌥⌘F Replace
⌘G/ ⇧⌘G Find next/previous
⌥Enter Select all occurrences of Find match
⌘D Add selection to next Find match ✨✨✨ Rich languages editing

Keys Comments Popularity
⌥/ Trigger suggestion //⌃Space conflict ✨✨✨
⇧⌥/ Trigger parameter hints //⇧⌘Space conflict
⇧⌥F Format document
⌘K ⌘F Format selection
F12 Go to Definition
⌥F12 Peek Definition
⌘K F12 Open Definition to the side
⌘. Quick Fix
⇧F12 Show References
F2 Rename Symbol
⌘K ⌘X Trim trailing whitespace
⌘K M Change file language

Keys Comments Popularity
⌘T Show all Symbols
⌃G Go to Line...
⌘P Go to File... ✨✨✨
⇧⌘O Go to Symbol...
⇧⌘M Show Problems panel
F8/ ⇧F8 Go to next/previouserror or warning
⌃Tab/⌃⇧Tab Navigate editor group history ✨✨✨
⌃-/ ⌃⇧- Go back/forward
⌃⇧M Toggle Tab moves focus

4.4. Settings

4.4.1. Text Editor

"git.confirmSync": false,
"window.zoomLevel": -1,
"workbench.activityBar.visible": true,
"editor.wordWrap": true,
"workbench.iconTheme": "vscode-icons",
"window.menuBarVisibility": "default",
"vsicons.projectDetection.autoReload": true,
"files.eol": "\n"

5. Languages 默认支持 JavaScript, TypeScript, CSS 和 HTML;Python/Go/PHP等可以安装扩展包。

5.1. Go

Go in Visual Studio Code

5.2. Java

Java in Visual Studio Code

5.3. Python

Python in Visual Studio Code

5.4. JavaScript

5.4.1. JavaScript projects (jsconfig.json)

5.4.2. Snippets Creating your own snippets

  1. 打开命令面板(Command Palette),搜索 Preferences: Configure User Snippets

  2. 选择或创建代码判断文件(Select Snippets File or Create Snippets)。这里我们可以找到JavaScript

  3. 在打开的文件中写入以下代码片段
    •   "For Loop": {
          "prefix": "for",
          "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
          "description": "For Loop"
  4. Trigger suggestion的快捷键(⌃Space=>⌥/) 触发

5.4.3. JSDoc support

5.5. Node.js Tutorial in VS Code

Node.js Tutorial in VS Code

5.5.1. Debugging

5.5.2. ESLint on Vue.js

  1. npm i -g eslint //eslint -v ==> v4.19.1

  2. 安装 ESLint 插件

  3. 配置ESLint:打开 文件==>首选项==>设置

    •   "editor.tabSize": 2,
        "editor.formatOnPaste": true,
        "editor.formatOnSave": true,
        "eslint.enable": true,
        "eslint.autoFixOnSave": true,
        "": "onType",
        "eslint.validate": [
            "language": "html",
            "autoFix": true
            "language": "vue",
            "autoFix": true
  4. 安装 Vetur 插件 //默认使用 Prettier 进行格式化

  5. 安装 Prettier 插件 //格式化调整成 ESLint 方式

    •   //分号
        "prettier.semi": false,
        "prettier.singleQuote": true,
        //html格式化依赖  默认为none
        "vetur.format.defaultFormatter.html": "js-beautify-html",
        "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
        //没有下边这个 上边不生效
        "vetur.format.defaultFormatter.js": "vscode-typescript",

6. Reference

MainWiki: Visual_Studio_Code (last edited 2019-09-12 03:00:50 by twotwo)