文本编辑器 - 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', Hack, Consolas, 'Courier Prime'",
  • 主题:
    pic

  • 相关颜色配置

    "materialTheme.cache.workbench.settings": {
    "accent": "Bright Teal",
    "themeColours": "Darker",
    "accentPrevious": "Blue"
    },
  • 图标
    icon

"workbench.iconTheme": "material-icon-theme",

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

插件

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

A curated list of delightful VS Code packages and resources.

Extensions Added:

advanced new file
alignment v0.3.0
ansible v0.2.7
ansible-autocomplete v0.0.2
auto-close-tag v0.5.5
auto-rename-tag v0.0.15
autofilename v0.1.3
autoimport v1.5.3
azure-account v0.3.0
bash-beautify v0.1.1
bracket-pair-colorizer
code-runner v0.8.7
code-settings-sync v2.8.7
code-spell-checker
color-info v0.5.0
debugger-for-chrome v4.1.0
git-extension-pack v0.1.3
githistory v0.4.0
gitignore v0.5.0
gitlens v8.0.0
Go v0.6.76
guides v0.9.1
html-css-class-completion v1.16.2
indent-rainbow v0.7.2
JavaScriptSnippets v1.5.0
jinja v0.0.8
kubernetes-snippets v0.1.8
LogFileHighlighter v2.0.0
markdown-all-in-one v1.0.5
material-icon-theme v3.2.2
mdmath v2.1.0
nodejs-extension-pack v0.1.9
npm-intellisense v1.3.0
path-autocomplete v1.8.1
path-intellisense v1.4.2
prettier-vscode v1.1.3
project-manager v0.24.0
qub-xml-vscode v1.2.8
quokka-vscode v1.0.102
rainbow-brackets v0.0.6
regex v0.1.0
rest-client v0.17.0
search-node-modules v1.2.0
sort-lines v1.4.1
stylelint v0.32.0
svg v0.0.9
terraform v0.0.20
theme-chrome-devtools-dark v0.0.1
tslint v1.0.24
vetur v0.11.7
VS-code-vagrantfile v0.0.7
vsc-material-theme v1.3.0
vscode-babel-coloring v0.0.4
vscode-docker v0.0.24
vscode-eslint v1.4.5
vscode-gutter-preview v0.12.2
vscode-helm v0.3.0
vscode-html-css v0.2.0
vscode-icons v7.19.0
vscode-markdownlint v0.13.0
vscode-npm-script v0.3.3
vscode-open-in-github v1.3.1
vscode-sort-json
vscode-standardjs v1.2.1
vscode-standardjs-snippets
vscode-svgviewer v1.4.3
vscode-table-formatter v1.2.1
xml v1.9.2
yaml v0.0.10

配置

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%