dearlordchen commented
on 17 Apr 2016
try a try 感谢猫哥。 |
JerryC8080 commented
on 21 Apr 2016
找到猫哥Github了 |
kylezhang commented
on 1 Jul 2016
请问如何配置在新建一个js或者其他文件时,可以直接在文件的头部加上相关信息,或者function之前的注释信息; |
Niefee commented
on 12 Jul 2016
写HTML标签时尖括号有一个矩形边框,怎样可以去掉啊? |
tangkunyin commented
on 29 Aug 2016
然而代码只能提示一笔带过,表示不太好配置! |
fengbjhqs commented
on 12 Sep 2016
您好,请问如何取消鼠标提示呢 |
vsxen commented
on 31 Oct 2016
vscode的 emmet自动补全不是Tab吗?那是什么? |
kevingo commented
23 days ago
感謝分享 |
osdu commented
3 days ago •
重置下bracket-match样式,然后去掉checksums校验 diff -ruN a/VSCode/resources/app/out/vs/workbench/electron-browser/bootstrap/index.html b/VSCode/resources/app/out/vs/workbench/electron-browser/bootstrap/index.html
--- a/VSCode/resources/app/out/vs/workbench/electron-browser/bootstrap/index.html 2016-12-19 22:50:04.664845100 +0800
+++ b/VSCode/resources/app/out/vs/workbench/electron-browser/bootstrap/index.html 2017-01-16 16:26:04.841823300 +0800
@@ -9,6 +9,10 @@
.monaco-shell.vs-dark {
background-color: #1E1E1E;
}
+ .monaco-editor.vs-dark .bracket-match {
+ border: none !important;
+ border-bottom: 1px solid #888 !important;
+ }
</style>
</head>
diff -ruN a/VSCode/resources/app/product.json b/VSCode/resources/app/product.json
--- a/VSCode/resources/app/product.json 2017-01-16 16:42:22.186320200 +0800
+++ b/VSCode/resources/app/product.json 2017-01-16 16:42:30.266342600 +0800
@@ -130,7 +130,6 @@
"checksums": {
"vs/workbench/electron-browser/workbench.main.js": "uHtzOl7WkRf0/hR2UKx5LA",
"vs/workbench/electron-browser/workbench.main.css": "YsaYQGKKlZWkFVz94zKSCg",
- "vs/workbench/electron-browser/bootstrap/index.html": "A7FcwiFQwy0ydQR6MrrRrQ",
"vs/workbench/electron-browser/bootstrap/index.js": "bL+9Rt0dxNnczUt7DNuBBg"
}
}
from: https://github.com/kaiye/kaiye.github.com/issues/14
|
Visual Studio Code (简称 VS Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器。在我看来它是「一款完美的编辑器」。
本文是有关 VS Code 的特性介绍与配置指南,相关设置主要针对 Mac OS X 平台。在快捷键部分, ⌘ 指 Command 键,⇧ 指 Shift 键,⌃ 指 Control 键,⌥ 指 Option/Alt 键。
1. Visual Studio Code 特性简介
1.1 Git 集成
如上图所示,VS Code 默认集成了 Git 版本管理。
切换至 Git 面板,点击左侧被修改的文件,即可进行版本对比。默认为左右窗口对比视图(Side by Side View),点击编辑器窗口右上方「…」图标可切换至行内对比视图(Inline View)。
鼠标移至 Git 面板中的文件列表上时,会出现「+」图标,点击后即可将文件添加至暂存区(Stage),点击右上方的「…」图标可以完成常用的 pull/commit 操作。
点击窗口左下角的 git 分支信息,即可快速切换至其他分支。
更多 Git 参考资料请阅读《Git 进阶指南》和 VS Code 官方文档《Version Control》章节。
1.2 多窗口实时编辑与预览
VS Code 最多可同时开启三个子窗口。若多个子窗口中打开的文件为同一文件时,则修改其中任意窗口内容,其他窗口都可以实时同步变更。
如上图,左侧子窗口是一个 Markdown 文件,右侧子窗口是该文件的 Markdown 预览模式(快捷键 ⇧⌘V),如此即可实现类似 MacDown/Mou 等软件的编写体验。
1.3 代码提示与引用分析
虽然是一款轻量级编辑器,但 VS Code 却有着 IDE 级别的代码高亮、语法检测、引用分析功能,十分适合编程初学者和大型项目开发。在其官网上列出了它默认支持的语言列表。
借助 Typings ,VS Code 还支持了 Node.js、ES6、AngularJS、ReactJS,十分适合前端开发人员。为了能更好的和其他开源框架融合,VS Code 有意削弱了原有的 JavaScript 语法校验功能,建议用户使用 ESLint 来定制个性化代码校验需求。
除此之外,VS Code 的 Debug 功能也是十分强大。以下是其 Node.js Debug 的演示:
借助「Debugger for Chrome」插件,还可以直接在编辑器中打断点调试 web。
1.4 命令行调用
VS Code 提供了一个
code
命令,用来在 shell 环境下调用编辑器。使用快捷键⇧⌘P
(或 F1) 唤起命令面板,输入以下命令即可完成安装。code 命令后可接多个路径或文件:
文件对比:
打开文件并跳至指定行:
更多 code 命令行使用方法,参见《Additional Command line arguments》。
1.5 更聪明的 Emmet
VS Code 内置了 Emmet,且在其基础之上做了进一步增强,极大的提升了 CSS、HTML 编写效率。
例如,在一个 CSS 选择器中书写以下属性后,按下
tab
键,均可自动补全为overflow:hidden
:更多 Emmet 缩写,请参考《Emmet Cheat Sheet》。
2. 快捷键与插件配置
2.1 所有快捷键列表
注:VS Code 的快捷键有很多是 Fn 功能键,不符合 Mac 用户习惯,建议各位通过 Preferences -> Keyboard Shortcuts 重设快捷键。
所有快捷键列表请参见《Key Bindings for Visual Studio Code》,其中较为常用的快捷键有以下这些:
文本选择
单行编辑
多行编辑
代码定位
代码展示
窗口操作
2.2 插件推荐
3. 常见问题
3.1 如何支持 PHP Smarty Template 语法
VS Code 能识别大部分主流代码文件,当需要进行关联语法设置时,可通过 Preferences -> Workspace Settings (或 User Settings)配置文件进行设置。
例如,以下代码可以将后缀为 .tpl 的 Smarty 模板文件关联成 PHP 语法:
3.2 如何在 sidebar 隐藏编译后文件
设置 Preferences -> Workspace Settings (或 User Settings)配置文件,将需要隐藏的文件按 glob 匹配模式进行配置,例如以下是 Angular2 TypeScript 项目中隐藏 .js 与 .js.map 文件的配置:
3.3 如何搜索 node_modules 文件夹中的文件
VS Code 的默认搜索规则中会排除
**/.git, **/.DS_Store, **/bower_components, **/node_modules
目录,可以在用户配置文件(User Settings)中加入以下配置,来关闭或启用这些规则: