文本编辑器 - 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.

$ code --list-extensions
[createInstance] extensionManagementService depends on downloadService which is NOT registered.
2gua.rainbow-brackets
alefragnani.project-manager
annsk.alignment
bbenoist.vagrant
bierner.color-info
bierner.emojisense
bradgashler.htmltagwrap
brendandburns.vs-kubernetes
capaj.vscode-standardjs-snippets
chenxsan.vscode-standardjs
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
dkundel.vscode-new-file
donjayamanne.git-extension-pack
donjayamanne.githistory
DotJoshJohnson.xml
dzannotti.vscode-babel-coloring
eamodio.gitlens
ecmel.vscode-html-css
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
goessner.mdmath
haaaad.ansible
humao.rest-client
ionutvmi.path-autocomplete
ipedrazas.kubernetes-snippets
ivanzusko.theme-chrome-devtools-dark
jasonnutter.search-node-modules
jenkinsxio.vscode-jx-tools
JerryHong.autofilename
jock.svg
kisstkondoros.vscode-gutter-preview
kogai.regex-railroad-diagrams
marcostazi.VS-code-vagrantfile
mauve.terraform
mkaufman.HTMLHint
ms-azuretools.vscode-azureterraform
ms-kubernetes-tools.vscode-kubernetes-tools
ms-python.python
ms-vscode.azure-account
ms-vscode.Go
msjsdiag.debugger-for-chrome
njpwerner.autodocstring
octref.vetur
oderwat.indent-rainbow
PeterJausovec.vscode-docker
PKief.material-icon-theme
pnp.polacode
pranaygp.vscode-css-peek
qub.qub-xml-vscode
redhat.java
redhat.vscode-yaml
richie5um2.vscode-sort-json
robertohuertasm.vscode-icons
run-at-scale.terraform-doc-snippets
shakram02.bash-beautify
Shan.code-settings-sync
shinnn.stylelint
shuworks.vscode-table-formatter
SirTori.indenticator
spywhere.guides
steoates.autoimport
streetsidesoftware.code-spell-checker
Sujan.code-blue
techer.open-in-browser
technosophos.vscode-helm
timonwong.ansible-autocomplete
Tyriar.sort-lines
vscjava.vscode-java-debug
vscjava.vscode-java-pack
vscjava.vscode-java-test
vscjava.vscode-maven
vscoss.vscode-ansible
waderyan.nodejs-extension-pack
wholroyd.HCL
wholroyd.jinja
xabikos.JavaScriptSnippets
Zignd.html-css-class-completion
ziyasal.vscode-open-in-github
ApplicationInsights:Sender [ { Error: connect ECONNREFUSED 111.221.29.254:443
at Object._errnoException (util.js:1024:11)
at _exceptionWithHostPort (util.js:1046:20)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1182:14)
code: 'ECONNREFUSED',
errno: 'ECONNREFUSED',
syscall: 'connect',
address: '111.221.29.254',
port: 443 } ]

配置

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

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

下面是我的 Settings:

{
"editor.fontFamily": "'Fira Code', Hack, Consolas, 'Courier Prime'",
"editor.fontSize": 14,
"editor.lineHeight": 24,
"editor.fontLigatures": true,
"editor.formatOnSave": false,
"editor.minimap.enabled": false,
"editor.renderIndentGuides": false,
"editor.renderWhitespace": "boundary",
"editor.tabSize": 4,
"editor.wordWrap": "on",
"editor.wordWrapColumn": 120,
"files.autoSave": "onFocusChange",
"files.eol": "\n",
"files.trimTrailingWhitespace": true,
"html.format.wrapLineLength": 0,
"javascript.validate.enable": false,
"prettier.disableLanguages": [
"html",
"javascript",
"javascriptreact",
"json"
],
"prettier.stylelintIntegration": true,
"prettier.tabWidth": 4,
"standard.validate": ["javascript", "javascriptreact"],
"standard.autoFixOnSave": true,
"stylelint.enable": true,
"sync.anonymousGist": false,
"sync.autoDownload": false,
"sync.autoUpload": false,
"sync.forceDownload": false,
"sync.gist": "c382d614120b1c4b60cbe24437024244",
"sync.lastDownload": "",
"sync.lastUpload": "2018-02-11T12:59:14.216Z",
"sync.showSummary": true,
"sync.version": 251,
"terminal.integrated.fontFamily": "Consolas",
"terminal.integrated.shell.windows": "C:\\cygwin64\\bin\\bash.exe",
"window.titleBarStyle": "native",
"workbench.iconTheme": "material-icon-theme",
"workbench.colorCustomizations": {
"activityBarBadge.background": "#62FFD9",
"list.activeSelectionForeground": "#64FFDA",
"list.inactiveSelectionForeground": "#64FFDA",
"list.highlightForeground": "#64FFDA",
"scrollbarSlider.activeBackground": "#64FFDA50",
"editorSuggestWidget.highlightForeground": "#64FFDA",
"textLink.foreground": "#64FFDA",
"progressBar.background": "#64FFDA",
"pickerGroup.foreground": "#64FFDA"
},
"materialTheme.cache.workbench.settings": {
"accent": "Bright Teal",
"themeColours": "Darker",
"accentPrevious": "Blue"
},
"[yaml]": {
"editor.insertSpaces": true,
"editor.tabSize": 4
},
"window.zoomLevel": 0,
"sync.host": "",
"sync.pathPrefix": "",
"sync.quietSync": false,
"sync.askGistName": false
}

进阶

和 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%