微软发布了 VS Code 1.39,该版本的一些关键亮点包括:

tags:

微软发布Visual Studio Code
1.32,在工作区域(Workbench)、编辑器以及语言功能都有更新,另外还增加了一些预览功能,供想要尝鲜的开发者使用反馈。

  • Text selections displayed in
    minimap –
    缩略图中也会展示编辑区域被选择的代码块
  • Toggle region folding keyboard
    shortcut –
    通过 Toggle Fold 键盘快捷键,可以快速展开或者收起 regions
  • Source Control tree
    view -可以通过列表或者树状图两种方式来展示被改变的文件
  • Open terminal in custom working
    directory – 可以通过快捷键来打开自定义工作目录的集成终端
  • HTML ARIA attribute reference
    links澳门新葡萄京官网首页, –
    HTML IntelliSense 中直接展示 ARIA 文档
  • CSS property completions include
    semicolons –
    CSS 补全会自动添加分号
  • CSS color variables
    preview –
    补全颜色变量时展示颜色预览
  • Improved column breakpoint
    UI –
    直接在源代码中展示 inline 的断点
  • Inline debug actions in CALL STACK
    view –
    CALL STACK 中直接进行调试
  • Remote Explorer
    updates –
    Remote Explorer 可以显示不同 WSL 的 Linux 发行版,并能轻松连接
  • Brackets
  • Code Editor
  • 编辑器
  • Sublime Text3

澳门新葡萄京官网首页 1

改进的源代码管理界面

在此版本中,你可以使用  Toggle View
Mode 按钮,在源代码管理标题栏上的列表模式和树视图模式之间切换。

澳门新葡萄京官网首页 2

此外,还可以快速地对文件进行 filter。

澳门新葡萄京官网首页 3

在显示文件夹的树视图模式中,Git 扩展现在向文件夹提供命令,例如 Stage
Changes,这些命令将应用于文件夹中的所有文件。

3164版本开始,轻巧美观的 Sublime Text
不注册就无法使用了,网络上所流出的激活码基本上也都已经被封殆尽。要想再使用它基本上也就只有两种方法了,付费与破解(偷偷提示一下:其实用版本2的注册码来注册版本3依然有效,且版本2的激活码很多都没有被封,只不过顶部会提示“LICENSE
UPGRADE REQUIRED”
)。不过就目前这趋势,倒不如早点投向 Brackets
VS Code 或者 Atom 这几款免费的编辑器中去来的靠谱。

从这个版本开始,使用者可以预览并且安装颜色主题,而且在安装完主题之后,可以随即应用颜色以及图标,而不需要重新载入。在快捷键编辑器中,开发者现在可以编辑When属性,微软还移除了键盘快捷键编辑器开启keybindings.json档案的连结,将该功能改至编辑器标题右侧的{}按纽。

可信任域名设置的改进

现在可以使用  Manage Trusted
Domains 命令轻松添加、删除或修改受信任域名。

澳门新葡萄京官网首页 4

这三款软件都有接触过,总的来说都非常不错。但就我个人而言,Brackets
算是是用得比较舒服的。下面就来介绍介绍一下 Brackets

澳门新葡萄京官网首页 5

自动补全信息的可选择性

自动补全信息现在可以进行复制和粘贴操作。

澳门新葡萄京官网首页 6

Brackets 是 Adobe 旗下的一款代码编辑器,风格和其兄弟软件 Dreamweaver
有很多相似之处。不过 Brackets 是开源免费的,且提供多平台支持。 👉
前往官方下载

微软接受了使用者的反馈,在Linux上决定将window.titleBarStyle预设设定从自定义改为本机端,即便如此,微软仍然建议开发者使用客制化标题列,以获得更好的可存取性支持。

缩略图展示

在编辑区域被选择的代码片段也会在缩略图中高亮显示。

澳门新葡萄京官网首页 7

切换软件语言

Brackets 本身提供多语言配置,默认语言为英文,你可以在
Debug > Switch Language 中切换到你需要的语言来显示。

在编辑器方面,新版本改进了滑鼠悬停以及问题面板(Problems
Panel)。现在问题面板加入了具有快速修复(Quick Fix)以及问题窥探(Peek
Problem)功能的命令列,开发者滑鼠移动至快速修复选项上,就能启动快速修复功能,而问题窥探功能则会在编辑器中开启窥探视图(Peek
View)。开发者可以从问题面板的窥探视图,浏览错误或是警告。

自定义工作目录的集成终端

可以自定义一个快捷键,来打开自定义工作目录的集成终端。

 {
  "key": "cmd+shift+h",
  "command": "workbench.action.terminal.newWithCwd",
  "args": {
    "cwd": "${fileDirname}"
  }
}

Brackets 扩展

Brackets 扩展的安装方法有两种:

  • 从软件的扩展管理器中直接搜索、安装。
  • 从官网Brackets Extension Registry 或者 Github 上搜索下载对应的 zip
    压缩文件,然后直接拖到软件的扩展管理器中即可安装。

虽然官网上 Brackets
软件本身的下载源用的是https://github.com/adobe/brackets/releases/,但官网扩展以及软件扩展管理器中扩展的下载源都用的是https://s3.amazonaws.com/extend.brackets/。这个下载源在国内多数情况是被屏蔽状态,所以你可能需要翻-墙。

不想或没办法翻-墙的话,你就只能在 Github 上搜索下载 zip格式
压缩包再安装。漫无目的地一个一个找可能比较麻烦,这个网站可以帮到你 👉
http://ingo-richter.io/BracketsExtensionTweetBot/
虽然已经久未更新了。

下面是我的一些扩展:

  • VSCode Dark 算是用过的最舒服的一个主题了。
  • Brackets Markdown Preview 提供 markdow
    文件实时预览功能。一栏编辑,一栏显示。
  • Beautify 从排版格式上美化你的代码,使之易于阅读。
  • Indent Guides 在每个标签的起始处与闭合处添加一条辅助线,辅助阅读。
  • Emmet 快速编码神器。
  • Autoprefixer 自动补全兼容前缀,让CSS适配不同浏览器。
  • W3C Validation (by Umoxfo) 检测代码是否合乎 W3C 标准。
  • HTML5 Template 再页面内插入 HTML5 模板(带有响应式相关标签)
  • Color Highlighter 将 css
    等样式文件中的色彩值以其自生色彩颜色为背景高亮显示。
  • Smart JSDoc Comment
  • ColorKeeper 在界面底部自定义一个色板,方便快捷取得预定义色彩。
  • Display Shortcuts 提供了一个快捷键对应表以供显示。
  • bracket-color-finder
  • AEM Brackets Extension 详细说明见AEM Brackets Extension
  • Brackets Outline List
    在侧边栏显示节点树,可快速定位到某行对应的代码。
  • Brackets Vue
  • BracketstoIX
  • Brackets SASS

澳门新葡萄京官网首页 8image

澳门新葡萄京官网首页 9

澳门新葡萄京官网首页 10HTML ARIA 文档

HTML 的自动补全和 hover 信息中,会直接展示相应的 ARIA 文档。

澳门新葡萄京官网首页 11

快捷键配置

👉 官方 WIKI – User Key Bindings

参考以上 Wiki 中的配置说明,你可以轻松的将你的 Brackets 快捷键配置成
Sublime Text 的使用风格。

同时,上文中的 Display Shortcuts 扩展 提供了显示快捷键表格的功能,通过
help > Show Shortcuts 可以调出快捷键表格。

Visual Studio Code的快速修复是由Code Action
API支持,微软提到,虽然针对同一个错误,可能存在许多快速修复的方法,但是通常只有一个最合理的解法。现在系统会将其中一个修复建议,标记成为最佳选项,以表示其为问题最合理的修复方式,当存在最佳修复选项时,提示灯泡会出现一个蓝色小标示,开发者可以使用自动修复命令,自动应用最佳修复。

CSS 分号自动补全

在输入 CSS 属性时,会自动添加分号。

澳门新葡萄京官网首页 12

快速编辑(Quick Edit)功能

澳门新葡萄京官网首页 13image

快速编辑<kbd>Ctrl+E</kbd>相当于一个功能集合,主要包括四个方面的功能:
取色器HTMLJavaScriptCSS(CSS/LESS/SCSS)

  • 取色器
    取色器对任意类型文件(只要该文件中存在任意格式的颜色值[包括:hex /
    rgb / rgba / hsl /
    hsla];如若没有,你可以先随便写入一个)
    都有效。只需将光标移入颜色值上,然后按下
    快捷键 <kbd>Ctrl+E</kbd> 即可调取任意颜色。

  • HTML 可针对 HTML 文件中的 标签名id属性class属性
    来调出某个元素标签与这三种选择符对应的
    css样式。只需将光标移入以上三者任一之上,然后按下 快捷键
    <kbd>Ctrl+E</kbd> 即可编辑操作。

如果某个元素标签匹配多种选择符,其所有样式规则都会以对应的组合选择符在右侧列出。如果还没有样式,单击新建规则按钮或者<kbd>Ctrl+Alt+N</kbd>可以创建新的样式。

  • JS 可以针对 JS
    文件中的函数名称调出该函数主体(即使它是在其他js文件中创建的也可以)。

  • CSS(CSS / LESS / SCSS)
    可以针对样式文件中的过度时间函数cubic-bezier,调出其转换曲线的图形化编辑器。预先定义的时间函数
    ease,ease-in,ease-out,ease-in-out,step-start,和 step-end
    也是有效的作用点。

澳门新葡萄京官网首页 14

CSS 颜色预览

完成 CSS 变量后,如果属于颜色代码,VS Code 将显示其对应的颜色。

澳门新葡萄京官网首页 15

快速文档(Quick Docs)

澳门新葡萄京官网首页 16image

快速文档<kbd>Ctrl+K</kbd>功能就相当于一个 HTML 与
CSS(CSS/LESS/SCSS) 的知识文档储备库。

当你对某个 标签元素 或 属性/属性值
不熟悉的时候,只需将光标移至其上,然后按下快捷键
<kbd>Ctrl+K</kbd>,即可在该行代码下面显示出相关文档的相关知识点。

expandLineSelection预设绑定快捷键更改了,从Ctrl+I改为Ctrl+L,在macOS则从Cmd+I改为Cmd+L。而多行选择也改变了,现在开发者可以按住Alt修饰字并在编辑器中拖拉,在正常选择和以行为单位的选择进行切换。

column breakpoints 界面改进

对于 column breakpoints,将直接在源代码中展示 inline 的断点。

澳门新葡萄京官网首页 17

实时预览

对于实时预览功能而言,普通使用基本无需配置。如果想要在 SASS / LESS
样式环境下依然有效,则需要以下扩展来完成。 相应的,你需要按装 Brackets
SASS 或者 LESS AutoCompile。

澳门新葡萄京官网首页 18

CALL STACK 中的 inline debug

当悬停到 CALL STACK
的某一行时,会在当前行显示相应的调试按钮,方便直接调试。

澳门新葡萄京官网首页 19

关于 JSLint 与 ESLint

澳门新葡萄京官网首页 20image

Brackets 自带 JSLint 与 ESLint 扩展,作为 js 与 es6 的代码质量检测工具。

在 JSLint 中将 console 和 alert、prompt、confirm 视为 development
方法,需要我们打开 development
模式才允许使用,打开方式是使用规则:devel:true;否则会有错误提示。

同类型的检测工具还有 JSHint 与 ESHint, 与前两者的区别请参考 👉 JSHint
与 JSLint 的区别与选择

  1. How to Use Brackets
  2. css动画里的steps()用法详解
  3. CSS3 三次贝塞尔曲线(cubic-bezier)

我的博客:

Visual Studio Code 1.32包含了TypeScript
3.3.3,其中修正了部分臭虫,在功能改进上,Visual Studio
Code现在支援动态载入,在安装大多数扩充套件时,包括TypeScript以及Markdown扩充套件不需要重新载入。另外,新版还针对ARIA属性改进HTML
IntelliSense,由于Visual Studio Code可以从W3C以及MDN取得ARIA(Accessible
Rich Internet Applications)可用资料,因此Visual Studio
Code现在会显示ARIA属性和DOM事件的描述。

全新的 Octicons

澳门新葡萄京官网首页 21

这个版本Visual Studio
Code新加入的预览功能,能够在侦错伺服器程式时,自动打开URL。微软提到,由于在开发网页应用程式的时候,需要在网页浏览器中打开特定的URL,才能在侦错器中触发伺服器程式码,而现在Visual
Studio Code能以灵活的方式自动实行这个过程。

其他特性及预览:

  • 支持 TypeScript 3.7-beta 
  • 扩展终端 API,允许扩展对终端输入作出反应并控制其输出
  • 如果 webview 不使用 Webview.asWebviewURI 作为本地资源将会有警告
  • TreeView message API
  • 支持语言服务器协议 3.15.0 版本规范(Language Server Protocol)
  • 更新 Visual Studio Code 网站的图标和颜色
  • 全新的扩展 API 被提上议程:vscode.env.uiKind,为了在浏览器中运行
    VS Code 做准备,这个 API
    会有两种返回值:UIKind.Desktop 和 UIKind.Web ,能帮助插件了解到当前的运行环境是桌面环境还是浏览器环境

还有其他更多的更新内容,完整见发布说明:

https://code.visualstudio.com/updates/v1_39 

参考:玩转 VS Code