• 维护主题插件开发者利益,本站取消所有破解模版获取方式!
  • 最美的贴图库,分享最美的那一刻我要分享
  • 手把手教你申请QQ公众帐号,公众空间
  • 简单的PHP域名授权函数
  • 免插件实现Adblock检测,全网通用
  • Phuong My 2015时尚独特女性魅力
  •  7个月前 (05-05)  技术分享  技术宅 隐藏边栏 评论关闭  429 
    文章评分 1 次,平均分 1.0

    Visual Studio Code (简称 VS Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器。在我看来它是「一款完美的编辑器」。

    本文是有关 VS Code 的特性介绍与配置指南,相关设置主要针对 Mac OS X 平台。在快捷键部分, ⌘ 指 Command 键,⇧ 指 Shift 键,⌃ 指 Control 键,⌥ 指 Option/Alt 键。

    Visual Studio Code 配置图文教程

    Visual Studio Code 特性简介

    Git 集成

    Visual Studio Code 配置图文教程

    如上图所示,VS Code 默认集成了 Git 版本管理。

    切换至 Git 面板,点击左侧被修改的文件,即可进行版本对比。使用快捷键 ⌘P 打开快捷窗口,可直接使用 git 相关命令。

    更多 Git 参考资料请阅读《Git 进阶指南》和 VS Code 官方文档《Version Control》章节。

    多窗口实时编辑与预览

    Visual Studio Code 配置图文教程

    VS Code 最多可同时开启三个子窗口。若多个子窗口中打开的文件为同一文件时,则修改其中任意窗口内容,其他窗口都可以实时同步变更。

    如上图,左侧子窗口是一个 Markdown 文件,右侧子窗口是该文件的 Markdown 预览模式(快捷键 ⇧⌘V),如此即可实现类似 MacDown/Mou 等软件的编写体验。

    代码提示与引用分析

    虽然是一款轻量级编辑器,但 VS Code 却有着 IDE 级别的代码高亮、语法检测、引用分析功能,十分适合编程初学者和大型项目开发。在其官网上列出了它默认支持的语言列表。

    Visual Studio Code 配置图文教程

    借助 Typings ,VS Code 还支持了 Node.js、ES6、AngularJS、ReactJS,十分适合前端开发人员。为了能更好的和其他开源框架融合,VS Code 有意削弱了原有的 JavaScript 语法校验功能,建议用户使用 ESLint 来定制个性化代码校验需求。

    除此之外,VS Code 的 Debug 功能也是十分强大。以下是其 Node.js Debug 的演示:

    Visual Studio Code 配置图文教程

    借助「Debugger for Chrome」插件,还可以直接在编辑器中打断点调试 web。

    命令行调用

    VS Code 提供了一个 code 命令,用来在 shell 环境下调用编辑器。使用快捷键⇧⌘P(或 F1) 唤起命令面板,输入以下命令即可完成安装。

    Visual Studio Code 配置图文教程

    code 命令后可接多个路径或文件:

    文件对比:

    打开文件并跳至指定行:

    更聪明的 Emmet

    VS Code 内置了 Emmet,且在其基础之上做了进一步增强,极大的提升了 CSS、HTML 编写效率。
    例如,在一个 CSS 选择器中书写以下属性后,按下 tab 键,均可自动补全为overflow:hidden

    更多 Emmet 缩写,请参考《Emmet Cheat Sheet》。

    快捷键配置

    所有快捷键列表

    注:VS Code 的快捷键有很多是 Fn 功能键,不符合 Mac 用户习惯,建议各位通过 Preferences -> Keyboard Shortcuts 重设快捷键。

    所有快捷键列表请参见《Key Bindings for Visual Studio Code》,其中较为常用的快捷键有以下这些:

    文本选择

    • ⌃⇧⌘→ – AST (Abstract Syntax Tree) 抽象语法树选择展开一级
    • ⌃⇧⌘← – 抽象语法树选择缩小一级

    单行编辑

    • ⇧⌘K – 单行操作,删除光标所在行
    • ⇧⌥↓ – 复制光标所在行到下一行

    多行编辑

    • ⌥⌘↓ – 向下插入一个光标,或者使用 ⌥ + Click
    • ⇧⌥ + 鼠标拖动 – 多列区块选择,再配合 ⇧⌘→ 可选中至结尾处
    • ⇧⌘L – 选择相同文本
    • ⌘F2 – 选择相同单词,或者使用 ⌘D 依次加入选中

    代码定位

    • ⇧⌘O – 跳转至对象、属性、方法
    • ⇧⌥F – 代码格式化
    • ⇧⌘M – 显示当前文件的错误与警告信息
    • F12 – 跳转至定义行
    • ⌥F12 – 浮窗打开定义行(可直接修改)
    • ⌥⌘ + Click – 新开侧边窗口跳转至定义行
    • ⇧⌘\ – 跳转至对应匹配括号处

    代码展示

    • ⌥Z – 开启/关闭代码自动换行,还可通过 editor.wrappingColumn 配置单行最大字符数
    • ⇧⌘[ – 代码折叠,⇧⌥⌘[ 为全部折叠
    • ⇧⌘] – 代码展开,⇧⌥⌘] 为全部展开

    常见问题

    如何支持 PHP Smarty Template 语法

    VS Code 能识别大部分主流代码文件,当需要进行关联语法设置时,可通过Preferences -> Workspace Settings (或 User Settings)配置文件进行设置。

    例如,以下代码可以将后缀为 .tpl 的 Smarty 模板文件关联成 PHP 语法:

    如何在 sidebar 隐藏编译后文件

    设置 Preferences -> Workspace Settings (或 User Settings)配置文件,将需要隐藏的文件按 glob 匹配模式进行配置,例如以下是 Angular2 TypeScript 项目中隐藏 .js 与 .js.map 文件的配置:

    如何搜索 node_modules 文件夹中的文件

    VS Code 的默认搜索规则中会排除 **/.git, **/.DS_Store, **/bower_components, **/node_modules 目录,可以在用户配置文件(User Settings)中加入以下配置,来关闭或启用这些规则:

    微信公众账号:技术宅
    分享互联网科技新闻轶事,各种数码使用小技巧。
    760人已关注
    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    文章目录