IT资讯淘系前端架构 - 周刊 - 210809 期

vinson · 2021-08-09 12:00:07 · 热度: 13

???? News

Visual Studio Code 1.59 发布

扩展视图进行了一些改进：丰富了悬停时的扩展详细信息，设置了新的运行时状态选项卡
设置编辑器引入验证功能：设置编辑器现在支持对象验证
拖放终端方面进行了改进：现在能将终端跨窗口移动到编辑器和面板区域
自定义扩展主题：一次设置多个颜色主题
内置对 Jupyter notebooks 支持：.ipynb 文件现在能直接在 VS Code 中打开
改进了Notebook UI：显示折叠单元格的第一行
首批测试 API 已经完成：支持在 VS Code 中使用内置测试资源管理器运行测试
调试反汇编视图预览：在 VS Code 中显示反汇编的 C++ 代码
实时预览插件有了新功能：VS Code 现在支持实时 HTML 预览，支持 JavaScript 调试
Remote - Containers devcontainer CLI：引入用于处理开发容器的命令行界面

Release：Visual Studio Code July 2021

Svelte 首款 IDE 发布

首款基于 Electron 和 Svelte 开发的 IDE 正式发布。

GitHub Repo：oslabs-beta/SvelteStorm

Home Page：SvelteStorm

???? Open Source

html-to-image

一个基于 dom-to-image 改造并添加的一些新特性的 HTML 转图片库。

GitHub Repo：bubkoo/html-to-image

vanilla-extract

零运行时的 CSS in TS 方案。允许你使用 TypeScript（或 JavaScript）编写样式，允许使用 CSS Variables，并且会生成 scoped className，这些都会在编译时被编译为静态的 CSS 文件。

GitHub Repo：seek-oss/vanilla-extract

CodeSandbox Demo：vanilla-extract-webpack-react - CodeSandbox

Neon

用于编写安全、快速的原生 Node.js 模块的 Rust binding。

GitHub Repo：neon-bindings/neon

Sequelize-Auto

通过命令行自动生成基于 Sequelize 的 model。

GitHub Repo：sequelize/sequelize-auto

Mermaid

采用类 Markdown 的方式从文本生成图表和流程图。

很多同学都在使用 Typora 做 Markdown 编辑器，Mermaid 就是 Typora 内置的作图工具，能够让你使用类 Markdown 的语法生成各种图表和流程图，语法非常简洁易懂。

举例，如果需要生成一个简单的流程图，只需要在 Typora 中输入代码块，选择语言为 mermaid 即可。

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

对应的流程图是这样的：

淘系前端架构 - 周刊 - 210809 期

不仅能够画流程图，还能画甘特图。

```mermaid
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2              :         des4, after des3, 5d
```

对应的甘特图是这样的：

淘系前端架构 - 周刊 - 210809 期