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

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

前言

准备告别webstorm入坑VS
Code了,跟随了我好久的webstorm在无数次疯狂吃我内存的之后,终于被我狠下心扔掉了。换了VS
Code后真是感觉上了天。在疯狂装了一堆插件后果断卸载重装了,选择一些好的插件真的是重要呢。还有下文中有小姐姐出没,请自动忽略。程序员不需要妹子,不过我需要。
先说一下我用的字体吧。Fira
Code-传说中程序员的专用字体(并没有引战的意思,我就是这样看到的)。

  • 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 发行版,并能轻松连接
  • Preserve case for global search and
    replace
     –
    进行全局替换字符串时保留大小写
  • Settings editor string array
    validation
     –
    在配置编辑器中进行字符串数组的验证:最小值,最大值,enum 以及 glob
  • Adjust cursor surrounding
    lines
     –
    设置在滚动时光标选中的行数
  • Copy and revert in the diff
    editor
     –
    在 diff editor 中方便地复制或者恢复被删除的内容
  • Go to Line supports negative line
    numbers
     –
    快速跳转到文件末尾
  • MDN Reference link for HTML and
    CSS
     –
    在 IntelliSense 中显示 MDN 文档
  • Add missing await Quick
    Fix
    澳门新葡萄京官网注册, –
    在异步代码中,快速修复缺失的 await 代码
  • Debugging data
    breakpoints
     –
    当跟踪的变量变化时,中断调试器
  • VS Code icon
    repository
     –
    官方图标库发布
  • Alpine Linux distro
    support
     –
    远程开发支持 Alpine Linux
1. Atom One Dark Theme

这个是用来配置编辑器主题的,比如语法高亮这种的,不同的小姐姐有不同的爱好,我喜欢这种配色的哈哈哈。安装完在文件>首选项>颜色主题里选择Atom
One Dark就可以了。

改进的源代码管理界面

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

澳门新葡萄京官网注册 1

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

澳门新葡萄京官网注册 2

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

替换字符串时保留大小写

在 1.37
版本中,支持了替换字符串时保留大小写。此版本中,在进行全局替换字符串时,大小写也会保留,同时现在也支持保留连字号分隔的单词。

澳门新葡萄京官网注册 3

2. Auto Close Tag

安装了这个的小姐姐就可以不用输入闭合标签的代码啦。例如<html></html>只需要输入<html>就会自动补全闭合标签了,可以偷个懒啦。

可信任域名设置的改进

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

澳门新葡萄京官网注册 4

光标行数设置 (scrollOff)

此版本中可以通过 editor.cursorSurroundingLines
来设置在滚动时,光标所选中的行数。这就是 Vim 编辑器的 scrollOff 功能。

澳门新葡萄京官网注册 5

3. Auto Rename Tag

有了这个在更改标签的时候可以巧妙的偷个懒,标签头和尾改一个另外一个也会同步的。

自动补全信息的可选择性

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

澳门新葡萄京官网注册 6

多行搜索

通过 Ctrl+Enter,你可以在搜索框里换行,然后进行多行搜索。

澳门新葡萄京官网注册 7

4. Bracket Pair Colorizer

当括号也拥有了不同的颜色…

缩略图展示

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

澳门新葡萄京官网注册 8

在 diff editor 中复制或恢复

澳门新葡萄京官网注册 9

5. Color Highlight

ta会把css中的颜色显示出来,比如#c0c0c0就会在边上显示出当前的颜色。

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

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

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

HTML 和 CSS 的 MDN 参考文档

在编写或者悬停在 HTML/CSS 时,会有一个指向 MDN 文档的链接。

澳门新葡萄京官网注册 10

6. Color Picker

按住一定的快捷键或者在命令行输入Color
Picker,就可以调用颜色选择面板啦。

澳门新葡萄京官网注册 11HTML ARIA 文档

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

澳门新葡萄京官网注册 12

Data Breakpoints

可以针对一个变量添加断点。当跟踪的变量变化时,中断调试器。

澳门新葡萄京官网注册 13

7. Debugger for Chrome

感觉是模拟 chrome 的 debug功能,比如静态页面这种的就可以用 vscode
来打断点调试 。

CSS 分号自动补全

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

澳门新葡萄京官网注册 14

VS Code 图标库

微软发布了所有 VS code
图标的存储库,以供扩展使用。每个图标有 dark/light 
版本。

澳门新葡萄京官网注册 15

8. ESLint

这个东西大家应该都懂的吧。怎么配置我之前有写过一篇文章。

CSS 颜色预览

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

澳门新葡萄京官网注册 16

TypeScript 3.6

此版本带来了一些 TypeScript 语言的改进,包括更严格的生成器和对
import.meta 的支持,以及 JavaScript 和 TypeScript
的一些新的工具特性,和以往一样,这个版本还包括许多重要的 bug 修复。

当你在 JavaScript 或 TypeScript 源代码中添加导入或应用重构时,VS Code
会在文件中的现有代码中尝试推断是否包含分号:

澳门新葡萄京官网注册 17

9. HTML Class Suggestions 与 HTML CSS Support

HTML Class Suggestions 用来在HTML里提示引入的外部css选择器名称。HTML
CSS Support 用来在html 里css属性提示。

column breakpoints 界面改进

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

澳门新葡萄京官网注册 18

新命令

从编辑器、集成终端、扩展详细信息视图和 Web 视图中公开用于在 Find
控件中导航搜索结果的命令。

澳门新葡萄京官网注册 19

10. HTML Snippets

HTML代码的提示功能,这个必须要的。

CALL STACK 中的 inline debug

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

澳门新葡萄京官网注册 20

修复

  • Linux:从 FTP 连接打开文件显示为空
  • 由任务创建的诊断信息不能被扩展访问
  • 配置任务操作应显示新添加的任务,并将光标定位在那里
  • 高亮标记文件中的自定义 html 标记
  • 文件夹视图中不正确显示 $(xx) 的文件名

参考更多完整内容,请查看 VS Code 官网的发布说明:

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

信息参考:玩转 VS Code

11. IntelliJ IDEA Key Bindings

这个插件看个人需要啦,我是因为webstrom的快捷键用习惯了,所以用这个把ta的快捷键拷过来了。

全新的 Octicons

澳门新葡萄京官网注册 21

12. IntelliSense for CSS class names

CSS 类名补全工具,会自动扫描整个项目里面的 CSS
类名并在你输入类名时做智能提示。

其他特性及预览:

  • 支持 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

13. JavaScript (ES6) code snippets

ES6语法自动提示插件。

14. Less/Scss/Node.js/Modules/Npm/Path IntelliSense

各种智能提示插件。

15. Open HTML in Default Browser、Open in Browser

允许你右键然后直接在浏览器中预览啦。

16. VSCode Great Icons

用不同的图标来区分不同类型的文件,有很多类似的插件,不过个人觉得这款最好啦。
暂时我就用到这几个插件啦,遇到好的再更新。好吧git的插件没放上来,毕竟有过VS
Code初始化git把代码全删掉的惨痛回忆,请接收我满满的怨念吧。

to be continued…