blog
blog copied to clipboard
✍️不定期断更
[上一篇文章](https://github.com/Aaaaash/blog/issues/11)简单介绍了 LSP 协议和如何利用 LSP 为 Monaco 编辑器提供语言特性功能,以及如何向 Web 端的在线编辑器适配 LSP 服务。本文将继续深入这一话题,了解面向在线编辑器环境下,利用 LSP 实现这些功能有哪些需要注意的点以及填坑指南。由于笔者水平有限,如有疏漏之处还请指出。 ## 从搭建一个简单的 WebSocket 服务器开始 上篇说到,要实现这样一个服务,需要有一层 WebSocket 与客户端相连接做中转层,由于 LSP 服务不涉及其他功能,所以这个服务器只需要有一个简单的 HTTP 服务,能够与客户端连接相互通信即可。 我们使用 [socket.io](https://github.com/socketio/socket.io) 来搭建 WebSocket 服务,代码非常简单 ```typescript...
> 本系列文章为Monaco-Editor编辑器折腾、踩坑记录,涉及到协同编辑、代码提示、智能感知等功能的实现,不定期更新 ## Monaco-Editor简介 [monaco-editor](https://github.com/Microsoft/monaco-editor)是微软开源的一款web端文本编辑器,也就是vscode内置的编辑器,扩展性很强,原生暴露了很多用于代码提示、高亮显示等API > 仅为核心编辑器部分,不包含vscode的插件系统、文件数及terminal ## 基本用法 monaco的基本用法非常简单,导入核心依赖及相应语言依赖包,调用`monaco.editor.create`方法即可创建一个简单的编辑器 ```javascript import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands'; import 'monaco-editor/esm/vs/editor/contrib/find/findController'; // php依赖包,提供代码语法解析及代码高亮等功能 import 'monaco-editor/esm/vs/basic-languages/php/php'; import 'monaco-editor/esm/vs/basic-languages/php/php.contribution'; const container =...
> 写这篇文章是因为最近一段时间的工作涉及到 Cloud Studio 插件这一块的内容,旧的插件系统在面向用户开放后暴露了安全性、扩展性等诸多问题。调研了几个不同架构下 IDE 的插件系统实现( Theia, VSCode 等),也大致阅读了一遍 VSCode 插件系统相关的源码,在这里做一个简单的分享,个人水平有限,如有错误之处还请观众老爷们指点一下。 ## 从加载一个插件开始 以我们熟悉的 vscode-eslint 为例,查看源码会发现入口是 extension.ts 文件里的 activate 函数,它的函数签名像这样: ```typescript activate(context: ExtensionContext): void ``` 需要了解的一点是, package.json 里的 activationEvents...
VSCode 作为时下最为流行的代码编辑器,自2015年推出以来逐渐蚕食了 Sublime Text、Atom 等编辑器的市场份额,占领了编辑器领域的半壁江山,截至目前其 GitHub 仓库的 star 数已经达到了 7w+,GitHub 2018年度报告 显示 VSCode 占据开源项目热度第一,Contributors 接近 2w。 上一篇文章 只对插件系统及其运行机制做了粗略的剖析,本文将开始尝试从源码入手解读 VSCode 的整体架构。 ## Workbench Workbench 即「工作区」,也就是 VSCode 主界面,众所周知 VSCode 是基于 Electron 构建的桌面应用程序,Electron...
> 上个月 GitHub 一个[新功能(Navigating code)](https://help.github.com/en/articles/navigating-code-on-github)开启 beta 测试, 目前只对部分用户开放. 作为一个非常依赖 GitHub 看源码/学(chao)技(dai)术(ma)的程序员, 虽然我日常一直使用 sourcegraph 插件作为源码辅助阅读工具, 看到 GitHub 官方终于开始着力提升代码阅读体验, 还是期待了很久. 简单来说它主要的作用是在 GitHub 仓库代码里点击相应符号显示一些信息(譬如函数签名, 变量类型)并且可以跳转到定义的位置, 也就是我们在 IDE 里常用到的 **hover** 和 **gotoDefinition.** 可以方便的在线阅读代码, 对于一些中大型的项目可以省去...
之前[一篇文章](https://zhuanlan.zhihu.com/p/73837942)大致介绍了 [lsif-typescript-chrome-extension](https://github.com/Aaaaash/lsif-typescript-chrome-extension) 的基本功能和实现原理, 经过这段时间的开发, 已经实现了令我比较满意的使用体验 ![](https://raw.githubusercontent.com/Aaaaash/lsif-typescript-chrome-extension/master/snapshot/hover-navigate-jump.gif) 主要做了几点优化 - documentSymbol 的样式优化了一下, 和 VS Code 大致体验相同 - Hover 的样式也变好看了一点, 同样基本照抄了 VS Code - 添加了 gotoDefinition 功能, 鼠标放到相应 token 上面点击一下, 不过第三方依赖暂时无法跳转 其中插件几个 script...
# 树 树是一种分层数据的抽象模型,一个树结构包含一系列存在父子关系的节点,每个节点都有一个父节点(除了根节点)以及多个子节点. * 树顶部的节点叫做`根节点`. * 由一个子节点以及其后代组成`子树`. * 节点有个`深度`属性,表示当前节点在树的层级. * 所有节点深度的最大值被称为树的`高度`. ## 二叉树和二叉搜索树 `二叉树`中一个节点最多只能有两个子节点,分别为左侧节点以及右侧节点 `二叉搜索树`(BST)是另一种二叉树,但是它只允许左侧子节点存储比父节点小的值,而右侧子节点存储比父元素大的值 二叉树的节点`Node`类有一个指向左侧子节点的属性`left`以及一个指向右侧子节点的属性`right`,以及表示自身的属性`key` ```typescript class Node { constructor(public key: Node, public left?: Node, public right?: Node){} }...
[Visual Studio Code](https://github.com/Microsoft/vscode) 是微软开源的一款轻量级代码编辑器,支持数十种主流语言的语法高亮、智能补全提示及 Git、Docker 集成等特性。因其自身使用 TypeScript 语言及 Electron 平台开发,对 ES/JavaScript/NodeJS 支持度较高,已经逐渐成为前端领域的主流开发工具。 前几篇文章介绍了 LSP 协议及在 Web 端在线编辑器中的集成,可以看到基于 LSP 协议,我们只需要找到对应语言的实现,就可以以非常低的成本在多个编辑器中使用语言服务器,甚至是在 Web 端。 ## VSCODE 调试器协议 同样在 VSCODE 中还存在一个 [vscode-debug-protocol](https://github.com/Microsoft/vscode-debugadapter-node/blob/768e505c7d362f733a29c89fa973c6285ce8fb27/protocol/README.md),这是一个通用的调试协议,允许在 VSCODE 的通用调试器...
> 本系列文章为Monaco-Editor编辑器折腾、踩坑记录,涉及到协同编辑、代码提示、智能感知等功能的实现,不定期更新 ## LanguageServerProtocol [LanguageServerProtocol](https://microsoft.github.io/language-server-protocol/)(以下简称LSP)是由微软提出,并与 Redhat、Codenvy、Sourcegraph 等公司联合推出的开源协议。用于语言服务程序向编辑器、IDE 等工具提供一系列代码提示、定义跳转等功能的通用协议。它将高级语言相关的一些功能特性从传统 IDE 中抽象出一个单独的程序来运行,LSP 定义了一套通用的API,遵循LSP协议实现某个语言的特性功能后,编辑器只需要调用该语言的 LanguageServer ,即可实现代码提示、定义跳转、代码诊断等功能。 传统的IDE或编辑器要实现诸如智能提示、自动补全等功能,需要根据不同的IDE来开发相应语言的特性功能程序,多个 IDE 要想支持多种高级语言,且每个 IDE 的具体实现及 API 可能都大不相同,开发成本非常高。LSP的出现则很好的解决了这个问题,N 个 IDE 和 M 个语言,只需要开发一次相应语言的语言服务器程序即可在每个IDE中使用。 [LanguageServerProtocol起源](https://github.com/Microsoft/language-server-protocol/wiki/Protocol-History) ## 概览 LSP使用[JSON-RPC](http://www.jsonrpc.org/)协议作为 Server/Client...
## 利用ImmutableJS实现Pure-Render `PureRender`是react应用中最常见的优化方式之一,顾名思义是纯·渲染,React的核心思想可以用一个表达式来概括 `view = f(model)` 这个很简单的表达式阐述了一个最基本的思想,数据的更新触发视图的更新,如果把它看做一个[纯函数](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976),那么给定相同的输入必定得到相同的输出,简而言之就是如果state&props没有改变,理论上讲组件不会重新渲染 React生命周期有一个函数`shouldComponentUpdate`,看名字就知道这个函数决定了组件要不要更新(重新渲染),默认情况下这个函数始终返回`true` 但是过多的rerender势必会引起性能问题,所以在必要的情况下开发者需要自己手动实现shouldComponentUpdate: ```javascript shouldComponentUpdate(nextProps, nextState) { return this.props.value !== nextProps.value; } ``` 事实上在较新版本的React中内置了一个已经实现shouldComponentUpdate方法的类,叫做`PureComponent`,使用时只要将原先的Component替换为PureComponent即可 ```javascript import react, { PureComponent } from 'react'; class MyPage...