current position:Home>There are more and more front-end LSPs

There are more and more front-end LSPs

2021-08-23 09:57:48 Tong ouba

Content reference Language Servers are the New Frameworks[1] as well as Compilers are the New Frameworks[2]

What is? “ Left ”?

IBM Once invented a computer term Shift Left[3]( Move left ).

For developers ,「 Development 」 This behavior can be divided into different stages :

  • Read( When the naked eye sees the code we write appear on the screen )
  • Save( When you save the code )
  • Commit( When code is submitted )
  • Build( When compiling code )
  • Run( When running code )

When the developer's attention goes to the left , The sooner we can find out bug( namely 「 Move left 」). Take two extreme examples :

  • about Read, Depend on TS Static analysis of , While writing code, you can know the errors related to type derivation
  • about Run, some bug It may take several days to run , Only when the user gives feedback does he know

therefore , For a mature development system , Developers will certainly pay more attention to 「 On the left 」.

To give developers more support , front end 「 infrastructure 」 Will be more and more left .

from Run To Build

「 The front frame 」 The development of is an obvious example :

the medieval times

As the largest framework in the front-end field ,jQuery Is an absolute runtime solution , He helps developers smooth out browser differences when code runs .

jQuery yyds


here we are ReactVue, Need to introduce compilation capabilities .

React Need to compile JSX,Vue Template syntax needs to be compiled .


Some time ago StackOverflow released 《2021 The developer's report 》 The most popular front-end framework in Svelte It's more like 「 Zero running time 」 The slogan of the .

from Build To Read

however ,Build After all, it's not the leftmost , Have you ever learned from Build Go straight to Read( Leftmost ) The development of ?

Yes , This is it. LSP(Language Server Protocol, Language service agreement ).

Of course , Not this one LSP

LSP It's an editor and language tool ( for example linter Static type check Code style check ) Standard protocol for communication between .

No, LSP, Different languages need to implement the communication between these tools and different editors .

With LSP, He can act as a bridge between language and editor .

For the front-end field , Different front-end frameworks are actively exploring LSP The feasibility of , such as :

  • Vetur[4] As Vue in the light of VSCode The toolset of , yes Vue Standard configuration for developers
  • comparison Vue The template syntax of ,React direct writing JS You can get better Static type analysis .

although Hooks There are some rules on writing , however React adopt Hooks relevant lint It's good to avoid developers' writing mistakes Hooks The possibility of .

meanwhile , all Hooks There is unity useXXX The prefix also provides the possibility for further compile time analysis in the future .

  • Angular Also provided Angular Language Service[5]
  • TailwindCSS Provides Tailwind CSS IntelliSense


These trends for ordinary business development students , signify : In the future, more and more front-end tools will be provided 「 Compiler tools 」「IDE plug-in unit 」, Now there is 「webpack Configuration engineer 」, In the future, it may need to be exclusive to the team 「IDE Configuration engineer 」.

For front-end students who want to dislocation competition , You can learn LSP Related knowledge , In the future, take the post of infrastructure construction in large factories .

Reference material


Language Servers are the New Frameworks:


Compilers are the New Frameworks:


Shift Left:




Angular Language Service:

This article is from WeChat official account. - Front end canteen (webcanteen)

The source and reprint of the original text are detailed in the text , If there is any infringement , Please contact the [email protected] Delete .

Original publication time : 2021-08-10

Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .

copyright notice
author[Tong ouba],Please bring the original link to reprint, thank you.

Random recommended