Visual Studio Code 配置指南
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 命令后可接多个路径或文件:
文件对比:
打开文件并跳至指定行:
更多 code 命令行使用方法,参见《Additional Command line arguments》。 1.5 更聪明的 EmmetVS Code 内置了 Emmet,且在其基础之上做了进一步增强,极大的提升了 CSS、HTML 编写效率。
更多 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 语法: "files.associations":{"*.tpl": "php" } 3.2 如何在 sidebar 隐藏编译后文件设置 Preferences -> Workspace Settings (或 User Settings)配置文件,将需要隐藏的文件按 glob 匹配模式进行配置,例如以下是 Angular2 TypeScript 项目中隐藏 .js 与 .js.map 文件的配置:
3.3 如何搜索 node_modules 文件夹中的文件VS Code 的默认搜索规则中会排除 {"search.exclude": {"**/node_modules": false,"**/bower_components": true} } |
try a try 感谢猫哥。 |
找到猫哥Github了 |
请问如何配置在新建一个js或者其他文件时,可以直接在文件的头部加上相关信息,或者function之前的注释信息; |
写HTML标签时尖括号有一个矩形边框,怎样可以去掉啊? |
然而代码只能提示一笔带过,表示不太好配置! |
您好,请问如何取消鼠标提示呢 |
vscode的 emmet自动补全不是Tab吗?那是什么? |
感謝分享 |
@Niefee 重置下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 配置指南相关推荐
- 在Visual Studio Code配置GoLang开发环境
在Visual Studio Code配置GoLang开发环境 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs Visu ...
- 小白Mac C/C++ for Visual Studio Code配置
小白Mac C/C++ for Visual Studio Code配置 一. VS Code安装 VS Code官网下载地址 (下载完成后是英文的,自己在插件管理里面下载个语言包) C/C++ fo ...
- Visual Studio Code 配置 Java开发环境
第一步:下载vscode 官网:Visual Studio Code - Code Editing. Redefined 第二步:下载Java 官网:Java Downloads | Orac ...
- WSL + Visual Studio Code 配置 Geant4
教程 blog已转移至GitHub WSL + Visual Studio Code 配置 Geant4 | Myoontyee's Blog | CT & Robotichttps://my ...
- python网页运行环境_Python小牛叔Web开发1:安装Visual Studio Code配置Python运行环境...
本系列是Python小牛叔Web开发系列,以Django为框架介绍如何使用Python来开发Web应用,本教程适合对于Web开发有基本知识的入门者. 1.安装Visual Studio Code编辑器 ...
- visual code php,vscode(Visual Studio Code)配置PHP开发环境的方法(已测)_编程开发_软件教程...
Visual Studio Code一个轻量且强大的代码编辑器,支持Windows,OS X和Linux.内置JavaScript.TypeScript和Node.js支持,而且拥有丰富的插件生态系统 ...
- visual studio Code配置C++环境:
vsCode 配置C++环境需要安装mingw64, 并且需要三个配置文件: c_cpp_properties.json launch.json tasks.json 悲伤的是...把网上各种帖子各个 ...
- Windows下Visual Studio Code配置Shell开发环境 (超详细图文)| 瞬间提高200%生产力
人生苦短,务必性感. 要说目前最火的编辑器,我说是Visual Studio Code(VS Code)应该没人反对吧!!!作为一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高 ...
- Visual Studio Code 配置 gcc
作者:谭九鼎 链接:https://www.zhihu.com/question/30315894/answer/154979413 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...
最新文章
- 服务端如何识别是selenium在访问以及解决方案参考二
- dft变换的两幅图_离散傅立叶变换DTFT、DFT和FFT在工程与数学结合的通俗理解
- freemarker 展示数据列表并传值给后台
- Nginx前端设置反向代理,后端Apache如何获取访客的真实IP,结合PHP。
- jquery UI入门
- python好学吗mooc中文网-2020年大学mooc用Python玩转数据作业答案
- 临时整形变量溢出的问题
- [分享]多个选项卡切换效果
- 【DIY】简单粗暴低成本Arduino四轴机械臂方案,创客教育学习使用舵机首选方案!...
- ACCV2020国际细粒度网络图像识别冠军方案解读、经验总结
- 【Oracle Database】数据库控制文件管理
- 信息学奥赛一本通 1229:电池的寿命 | OpenJudge NOI 4.6 2469:电池的寿命
- Flask学习之基础知识与功能
- 【小家Java】Future与FutureTask的区别与联系
- angular数据绑定
- 趋势交易大师php,系统交易的初阶——趋势交易者路在何方?
- 高鲁棒!高实时!慕尼黑工业大学开源RGB-L SLAM!
- Fiddler过滤器设置--屏蔽不需要分析的文件
- 这5种计算机视觉技术,刷新你的世界观
- C语言指针与指针变量
热门文章
- 数学建模学习笔记——模糊综合评价模型(评价类,发放问卷一般不用)
- MapReduce示例——WordCount(统计单词)
- 深度学习时代的数据科学和自然语言处理
- Docker Review - dockerfile 入门篇
- 深入理解分布式技术 - 探究缓存穿透、缓存击穿、缓存雪崩解决方案
- java自带工具_深入了解Java JDK自带工具,包括javac、jar、jstack等,实用~
- executequery方法_【接口测试】soapui中数字、字符串、日期时间、数据库连接参数化的设置方法...
- sql 删除重复记录保留一条_从零学会SQL·二——简单查询
- python26.dll没有发现_python26.dll 文件下载
- Android8.0适配方案