编辑神器 - Visual Studio Code

2017-09-13-更新 当很多人都转到 VS Code,Atom IDE发布了;四年了,Sublime Text 终于更新至3.0

2017-11-15-更新 Visual Studio Live Share,相当酷,赞。

简介

先来一张图亮亮眼:

settings

Visual Studio Code 是一个 面向开发人员 的文本编辑器,开发者 Erich Gamma 总结如下:

Visual Studio Code a new choice of tool that combines the simplicity of a code editor with what developers need for their code-edit-debug cycle.

侧重在编程上,所以把 IDE 的特性引入了文本编辑器。开发者把近年来其它工具和平台的经验带入了 Visual Studio Code,核心的两个部件:

扩展工具,intellisense,debugging 等等则依赖 Typescript Server 和 OmniSharp Roslyn。

Why Visual Studio Code:

  • fast
  • simple
  • beautiful
  • customizable
  • extensible
  • support for multiple languages
  • cross platform

之前用 Sublime Text,挺喜欢,不过现在转至 Visual Studio Code,虽然没有 Sublime 快,但足已,相比较而言它更胜于 Sublime 的地方是:

  • rich intellisense
  • debugging

而且插件更丰富,更稳定,更快更新,毕竟是一个人和一个世界软件顶尖公司开发团队的差别。

外观

主题(theme),字体(font),颜色(color)是构成颜值的关键三要素。

  • 字体
"editor.fontFamily": "'Fira Code iScript', Hack, Consolas, 'Courier Prime'",
  • 主题:

pic

  • 相关颜色配置
"materialTheme.accentPrevious": "Bright Teal",
"materialTheme.accent": "Bright Teal",
"materialTheme.fixIconsRunning": false,
"workbench.colorTheme": "Material Theme Palenight High Contrast",
  • 图标
    icon
"workbench.iconTheme": "eq-material-theme-icons-ocean",

自己根据自己的喜好去选择,上面是我的配置,供参考。

插件

插件则遵循精、简原则(less is more, small is beautiful),遵循这个链接迅速打造起自己心仪的功能:

A curated list of delightful VS Code packages and resources.

➜ /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code --list-extensions
2gua.rainbow-brackets
aaron-bond.better-comments
adashen.vscode-tomcat
alefragnani.project-manager
annsk.alignment
auchenberg.vscode-browser-preview
ban.spellright
bbenoist.vagrant
bierner.emojisense
bradgashler.htmltagwrap
brendandburns.vs-kubernetes
capaj.vscode-standardjs-snippets
christian-kohler.npm-intellisense
christian-kohler.path-intellisense
chrmarti.regex
codezombiech.gitignore
CoenraadS.bracket-pair-colorizer
cssho.vscode-svgviewer
DavidAnson.vscode-markdownlint
dbaeumer.jshint
dbaeumer.vscode-eslint
donjayamanne.githistory
DotJoshJohnson.xml
dzannotti.vscode-babel-coloring
eamodio.gitlens
ecmel.vscode-html-css
ecmel.vscode-spring-boot
eg2.tslint
eg2.vscode-npm-script
emilast.LogFileHighlighter
Equinusocio.vsc-material-theme
erd0s.terraform-autocomplete
esbenp.prettier-vscode
formulahendry.auto-close-tag
formulahendry.auto-rename-tag
formulahendry.code-runner
GrapeCity.gc-excelviewer
haaaad.ansible
hollowtree.vue-snippets
HookyQR.beautify
humao.rest-client
idleberg.emoji-code
ionutvmi.path-autocomplete
ipedrazas.kubernetes-snippets
ivanzusko.theme-chrome-devtools-dark
jasonnutter.search-node-modules
JerryHong.autofilename
jevakallio.vscode-hacker-typer
jock.svg
letrieu.expand-region
marcostazi.VS-code-vagrantfile
mauve.terraform
mechatroner.rainbow-csv
metaseed.metago
mkaufman.HTMLHint
mrmlnc.vscode-autoprefixer
ms-kubernetes-tools.vscode-kubernetes-tools
ms-python.python
ms-vscode.azure-account
ms-vscode.Go
ms-vsliveshare.vsliveshare
msjsdiag.debugger-for-chrome
octref.vetur
oderwat.indent-rainbow
Pivotal.vscode-spring-boot
PKief.material-icon-theme
pnp.polacode
pranaygp.vscode-css-peek
qub.qub-xml-vscode
quicktype.quicktype
redhat.java
redhat.vscode-yaml
richie5um2.vscode-sort-json
run-at-scale.terraform-doc-snippets
shakram02.bash-beautify
Shan.code-settings-sync
shengchen.vscode-leetcode
shinnn.stylelint
SirTori.indenticator
spywhere.guides
steoates.autoimport
streetsidesoftware.code-spell-checker
techer.open-in-browser
technosophos.vscode-helm
thekalinga.bootstrap4-vscode
timonwong.ansible-autocomplete
Tyriar.sort-lines
VisualStudioExptTeam.vscodeintellicode
vscjava.vscode-java-debug
vscjava.vscode-java-dependency
vscjava.vscode-java-test
vscjava.vscode-maven
vscjava.vscode-spring-boot-dashboard
vscoss.vscode-ansible
waderyan.gitblame
waderyan.nodejs-extension-pack
WallabyJs.quokka-vscode
wholroyd.HCL
wholroyd.jinja
whtouche.vscode-js-console-utils
wsds.theme-hacker
xabikos.JavaScriptSnippets
yzhang.markdown-all-in-one
Zignd.html-css-class-completion
ziyasal.vscode-open-in-github

配置

File -> Preferenes -> Settings 可修改 Default Settings(User Settings)
另外在当前目录下的.vscode/settings.json 里可以再次修改相关配置(Workspace Settings)
优先次序是 Default Settings User Settings Workspace Settings

可以用Settings Sync把设置保存在 Github,在不同机器上共享。

下面是我的 Settings:

{
"[python]": {
"editor.insertSpaces": true,
"editor.tabSize": 4
},
"[yaml]": {
"editor.insertSpaces": true
},
"breadcrumbs.enabled": true,
"cSpell.userWords": ["ansible"],
"editor.acceptSuggestionOnEnter": "smart",
"editor.cursorBlinking": "smooth",
"editor.cursorSmoothCaretAnimation": true,
"editor.fontFamily": "'Fira Code iScript', Hack, Consolas, 'Courier Prime'",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.lineHeight": 24,
"editor.minimap.enabled": false,
"editor.mouseWheelZoom": true,
"editor.renderIndentGuides": false,
"editor.renderWhitespace": "boundary",
"editor.tabSize": 4,
"editor.wordWrap": "on",
"editor.wordWrapColumn": 120,
"emmet.includeLanguages": {
"ejs": "html",
"erb": "erb",
"html": "html",
"javascript": "javascriptreact",
"vue": "html"
},
"explorer.confirmDelete": false,
"explorer.sortOrder": "type",
"files.autoGuessEncoding": true,
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 5000,
"files.eol": "\n",
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressResultsExplorerNotice": false,
"suppressShowKeyBindingsNotice": true
},
"gitlens.historyExplorer.enabled": true,
"gitlens.keymap": "none",
"gitlens.views.fileHistory.enabled": true,
"gitlens.views.lineHistory.enabled": true,
"html.format.wrapLineLength": 0,
"javascript.validate.enable": false,
"materialTheme.accent": "Bright Teal",
"materialTheme.accentPrevious": "Bright Teal",
"materialTheme.fixIconsRunning": false,
"prettier.disableLanguages": [
"html",
"javascript",
"javascriptreact",
"json"
],
"prettier.stylelintIntegration": true,
"prettier.tabWidth": 4,
"standard.autoFixOnSave": true,
"standard.validate": ["javascript", "javascriptreact"],
"stylelint.enable": true,
"sync.anonymousGist": false,
"sync.askGistName": false,
"sync.autoDownload": false,
"sync.autoUpload": false,
"sync.forceDownload": false,
"sync.gist": "c382d614120b1c4b60cbe24437024244",
"sync.host": "",
"sync.lastDownload": "",
"sync.lastUpload": "2018-07-15T07:51:34.933Z",
"sync.pathPrefix": "",
"sync.quietSync": false,
"sync.removeExtensions": true,
"sync.showSummary": true,
"sync.syncExtensions": true,
"sync.version": 251,
"terminal.external.osxExec": "iTerm.app",
"terminal.integrated.fontFamily": "Hack",
"terminal.integrated.shell.osx": "zsh",
"window.menuBarVisibility": "default",
"window.titleBarStyle": "native",
"window.zoomLevel": 0,
"workbench.colorCustomizations": {
"activityBarBadge.background": "#64FFDA",
"breadcrumb.activeSelectionForeground": "#64FFDA",
"editorSuggestWidget.highlightForeground": "#64FFDA",
"editorWidget.border": "#64FFDA",
"editorWidget.resizeBorder": "#64FFDA",
"list.activeSelectionForeground": "#64FFDA",
"list.highlightForeground": "#64FFDA",
"list.inactiveSelectionForeground": "#64FFDA",
"menu.selectionForeground": "#64FFDA",
"menubar.selectionForeground": "#64FFDA",
"notificationLink.foreground": "#64FFDA",
"panelTitle.activeBorder": "#64FFDA",
"pickerGroup.foreground": "#64FFDA",
"progressBar.background": "#64FFDA",
"scrollbarSlider.activeBackground": "#64FFDA50",
"settings.headerForeground": "#64FFDA",
"settings.modifiedItemForeground": "#64FFDA",
"settings.modifiedItemIndicator": "#64FFDA",
"tab.activeBorder": "#64FFDA",
"textLink.foreground": "#64FFDA"
},
"workbench.colorTheme": "Material Theme Palenight High Contrast",
"workbench.editor.highlightModifiedTabs": true,
"workbench.fontAliasing": "antialiased",
"workbench.iconTheme": "material-icon-theme"
}

进阶

和 Vim 自带 Vim tutor 一样,VS Code 的 welcome 里迅速教你如何从菜鸟变老司机:

welcome
playground

既然是 Electron 为核心的编辑器,VS Code 用来做 Javascript 全栈式开发方面是其最强的特性,有空再详细介绍。

快捷命令

主命令面板 Ctrl+Shift+P

可快速选择各种命令,输入框内,不喜 > 把它删掉,键入:

  • ?:列出当前可执行的动作
  • !:显示 Errors 或 Warnings,也可以 Ctrl + Shift + M 直接进入
  • ::跳转到行数,也可以 Ctrl + G直接进入
  • @:跳转到 symbol(搜索变量或者函数),也可以 Ctrl + Shift + O 直接进入
  • #:根据名字查找 symbol,也可以 Ctrl + T 直接进入

窗口管理

  • Ctrl + Shift + N:打开一个新窗口
  • Ctrl + Shift + W:关闭窗口

光标移动

  • Shift + Home:光标选择到行头
  • Shift + End:光标选择到行尾
  • Ctrl + Home:光标移到文件头
  • Ctrl + End:光标移到文件尾

基于 Regex 多行选择或编辑

  1. Ctrl + F:打开搜索 widget
  2. Alt + R:进入 Regex 模式
  3. 输入 Regex 或者普通文本
  4. Alt + Enter:选择所有匹配
  5. 调整光标位置
  6. 编辑,输入你想要的东西
  7. Shift + Home:选中该文本(从光标位置到开头)
  8. Ctrl + C:选中所选文本
  9. Ctrl + N:打开一个 tab
  10. Ctrl + V:粘贴所选的文本

文件比较

  1. Ctrl + F
  2. Ctrl + Shift +P
  3. 输入或选择 Files: Compare Active File With …
  4. 选择要比较的文件

终端及命令行

  • 终端:Ctrl + `
  • 命令行执行:Ctrl + Alt + N

元芳,你怎么看

Visutal Studio 号称宇宙最强,不过那好几 G 的东西总是让我觉得浑身不自在。我不是 vim,emacs 的粉,因为没有花足够的时间在上面,我觉得好工具最基本的要素是fastsimplebeautiful,需要花几个月甚至几年的时间去掌握一个工具吗?真有这么大的价值吗?为何不先 focus 在代码上?VS Code 可以支持不同的 keymap,指尖速度是一种选项而不是开发必须的门槛,正如不会打字不影响使用电脑。当然我理解 Vim,Emacs 的粉挺牛叉,比如我打字的速度也曾练到专业级,但以前的牛人只能熟练掌握当时仅有的工具,而我们则可以选择掌握现代的工具。

0%