前端LSP真是越来越多了

朱雀 2022-09-04 12:49 156阅读 0赞

前端领域发展多年，不仅没有式微，反而势力逐渐扩大。

一个直观的现象：市场上**「前端」**、**「后端」**岗位需求一直居高不下，与**「前端」**同样偏**「前」**的原生开发（IOS、安卓）则逐渐式微。

虽然**「前端」**发展迅猛，但是太阳底下没有新鲜事，`web`前端终将走过**「原生应用程序」**曾经走过的路。

如果以史为鉴，那么一个趋势是不可阻挡的 —— 前端会越来越**「左」**。

> 本文内容参考Language Servers are the New Frameworks\[1\]以及Compilers are the New Frameworks\[2\]

## 什么是“左”？ ##

IBM曾发明一个计算机术语Shift Left\[3\]（左移）。

对开发者来说，**「开发」**这一行为可以分为不同阶段：

*  Read（肉眼看到我们编写的代码出现在屏幕上时）
 *  Save（保存代码时）
 *  Commit（提交代码时）
 *  Build（编译代码时）
 *  Run（运行代码时）

![ddc7820e03cb0004b676f8803923ff80.png][]

当开发者的注意力越向左，越能尽早发现`bug`（即**「左移」**）。举两个极端例子：

*  对于`Read`，依赖于`TS`的静态分析，在编写代码的同时就能知道类型推导相关的错误
 *  对于`Run`，某些`bug`可能要运行好几天，用户反馈过来才知道

所以，对于成熟的开发体系，开发者的注意力肯定会更多放在**「左边」**。

为了赋予开发者更多支持，前端**「基建」**会越来越偏左。

## 从Run到Build ##

**「前端框架」**的发展是个明显的例子：

### 中世纪 ###

作为前端领域第一大框架，`jQuery`是绝对的运行时方案，它帮助开发者在代码运行时抹平浏览器的差异。

![c48e9efac2fdb4891918b36b7f290be5.png][] jQuery yyds

### 近代 ###

到了`React`、`Vue`，都需要引入编译能力。

`React`需要编译`JSX`，`Vue`需要编译模版语法。

### 现代 ###

前段时间`StackOverflow`公布的《2021年开发者报告》中最受欢迎的前端框架`Svelte`更是打出了**「零运行时」**的口号。

![5a2f44ad560dd023b7d7222321517b15.png][]

## 从Build到Read ##

但是，`Build`毕竟不是最偏左的，有没有从`Build`直接往`Read`（最左边）发展的呢？

有，这就是`LSP`（Language Server Protocol，即语言服务协议）。

![e5d97cdbd1ac5079ae23d69d8ec1954f.png][] 当然，不是这个LSP

`LSP`是编辑器和语言工具（例如`linter`、`静态类型检查`、`代码风格检查`）之间进行通信的标准协议。

没有`LSP`，不同语言需要实现这些工具与不同编辑器的通信。

![fa7a65943a0fa754c4bf66fb126c4ef8.png][]

有了`LSP`，他就能作为语言与编辑器之间沟通的桥梁。

对于前端领域，不同前端框架都在积极探索`LSP`方面的可行性，比如：

*  Vetur\[4\]作为`Vue`针对`VSCode`的工具集，是`Vue`开发者的标配
 *  相比`Vue`的模版语法，`React`直接写`JS`可以获得更好的`静态类型分析`。

虽然`Hooks`在书写上有些规则限制，但是`React`通过`Hooks`相关`lint`很好规避了开发者书写错误`Hooks`的可能性。

同时，所有`Hooks`有统一`useXXX`的前缀也为未来进一步的编译时分析提供可能。

*  `Angular`也提供了Angular Language Service\[5\]
 *  `TailwindCSS`提供了`Tailwind CSS IntelliSense`

![008456b6302666cd528b2a7659650087.png][]

## 总结 ##

这些趋势对于普通业务开发同学来说，意味着：未来会有越来越多前端工具提供**「编译工具」**、**「IDE插件」**，现在有**「webpack配置工程师」**，未来可能需要团队专属**「IDE配置工程师」**。

对于想错位竞争的前端同学，可以学习`LSP`相关知识，未来走大厂基建岗位。

### 参考资料 ###

\[1\]

Language Servers are the New Frameworks: https://dev.to/dx/language-servers-are-the-new-frameworks-1lbm

\[2\]

Compilers are the New Frameworks: https://tomdale.net/2017/09/compilers-are-the-new-frameworks/

\[3\]

Shift Left: https://devops.com/shift-left-can-you-be-left-out/

\[4\]

Vetur: https://github.com/vuejs/vetur

\[5\]

Angular Language Service: https://github.com/angular/vscode-ng-language-service

[ddc7820e03cb0004b676f8803923ff80.png]: /images/20220829/aee53b2bf1f24465be2270ce8b0e0b1d.png
[c48e9efac2fdb4891918b36b7f290be5.png]: /images/20220829/848eff5b52ec41c8958bb1758f4669ba.png
[5a2f44ad560dd023b7d7222321517b15.png]: /images/20220829/de61230483ef4004b75170a5c5606c48.png
[e5d97cdbd1ac5079ae23d69d8ec1954f.png]: /images/20220829/f94309d7fc354fd8aa4a11639198c182.png
[fa7a65943a0fa754c4bf66fb126c4ef8.png]: /images/20220829/63a1fec68fcc4aea9c736a06828d3769.png
[008456b6302666cd528b2a7659650087.png]: /images/20220829/28eb7bb4ba9d4523ab89366b6590c39d.png