blog
blog copied to clipboard
Aaaaash
✍️不定期断更
[上一篇文章](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) 的基本功能和实现原理, 经过这段时间的开发, 已经实现了令我比较满意的使用体验  主要做了几点优化 - 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...