Categories
旧文存档

visual studio code教程

做最全最有用的中文visual studio code教程,持续更新中。

visual studio code介绍

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作。VS Code旨在成为Node.js,ASP.NET和TypeScript开发的首选IDE,剑指先进web/cloud应用。

VS Code 跟Atom一样,基于 Electron开发,但是速度比同为使用 Electron 架构的 Atom快许多,它源码已经开放在在github。 Electron 是基于 Node.js 和 Chromium 的跨平台桌面应用开发框架。使用 JavaScipt , HTML , CSS 真正将 Node.js 带到了前端。 Electron 通过 BrowserWindow 可以创建一个本地窗口,并加载一个 HTML 文档, BrowserWindow 中的内容就是一个浏览器窗口,不仅能创建 DOM 元素,同时能使用任意的Node模块,并且还可以通过 IPC 与主进程通讯。

VS code一些特性

  • 二栏/三栏分割并排窗口:VSCode最多同时并排三个编辑窗口。三种方法可以分割并排窗口:按住Ctrl键单击文件;Ctrl + \ 快捷键;右键单击,选择“Open tothe Side”(Ctrl + Enter)。
  • 内置文件比较、GIT等工具
  • 内置emmet:内置集成了HTML/CSS代码快速编写神器emmet,前身为 Zen Coding,参考文档。除了html/css外,其他各种语言也支持使用snippets。如markdown,在Microsoft VS Code\resources\app\extensions\markdown\snippets\markdown.json中,可以看到内置的markdown snippets,如输入iamge的过程中可以看到vscode-markdown的提示,敲tab键即可生成img代码。自定义snippets可参考 user defined snippets

常见问题QA

Q:带中横线“-”的单词无法选择怎么办?带中横线“-”的关键词无法自动提示怎么办?

A:“-”在默认visual studio code分词符中,所以带中横线“-”的词会被分割成多个单词,修改分词配置去掉“-”即可。在File – Preference – User Settings中加入如下参考配置:

"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?"

Q:文件夹(Explorer)视图中,点击文件名打开文件会在当前标签(Editor)中打开,覆盖了当前已打开的文件,怎样在新标签中打开文件?

A:VS code在文件夹视图中打开文件默认会覆盖当前文件,如果希望某文件不被其他新打开的文件覆盖,在该选项卡标签上点击右键,选择Keep Open即可使其在打开新的文件时保持打开不被覆盖,新的文件会在新的标签中打开。