Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting 1 VS Code Conference Japan 2024 @unvalley_ ^^^^^^^^^^^^^

About me - unvalley - TypeScript / Rust - A core contributor of Biome - Learning Type System 2 @unvalley_ unvalley

VS Code Extensions 3 “Visual Studio Code is built with extensibility in mind. From the UI to the editing experience, almost every part of VS Code can be customized and enhanced through the Extension API. ” Extension API - https://code.visualstudio.com/api

Extensions Categories 4 - Themes - Programming Languages - Linters / Formatters - Testing / Debuggers / Snippets / Keymaps - Visualization - AI / Chat

5

How do Extensions work? 6 Extension Host (Node.js/Browser) Language Server Reference: https://snyk.io/blog/modern-vs-code-extension-development-basics/ extension.js(main) function activate() {} function deactivate() {} VS Code Editor If uses Activation Event triggers and launchers according to package.json In VS Code Process Launches the Host according to .vscode dir .vscode - tasks.json - settings.json - launch.json - extensions.json package.json Loads Loads In Another Process

Extensions for JS/TS Linting and Formatting 7 ESLint (microsoft/vscode-eslint) Prettier (prettier/vscode-prettier) Deno (denoland/vscode_deno) quick-lint-js (quick-lint/quick-lint-js) dprint (dprint/dprint) Biome (biomejs/biome-vscode) Oxc (oxc-project/oxc) Order by VS Code extension install count, starting from the top left

Language Extensions 8 Language Extensions offer features like syntax highlighting and IntelliSense without built-in language support, relying instead on APIs. 1. Declarative Language Features defined in configuration files - Syntax Highlight, Semantic Highlight, Snippet 2. Programmatic Language Features often powered by a Language Server - Hover, Completion, Definition, Other Language Features

Language Extensions 9 Language Extensions offer features like syntax highlighting and IntelliSense without built-in language support, relying instead on APIs. 1. Declarative Language Features defined in configuration files - Syntax Highlight, Semantic Highlight, Snippet 2. Programmatic Language Features often powered by a Language Server - Hover, Completion, Definition, Other Language Features

Language Server Protocol (LSP) 10 Reference: https://code.visualstudio.com/api/language-extensions/language-server-extension-guide#why-language-server The protocol used between an editor or IDE and a language server that provides language features. Extensions require both a client and a language server. Stable 3.16.0 currently. It uses JSON-RPC.

Libraries to implement LSP 11 VS Code extensions must use JavaScript or TypeScript, but Language Servers can be implemented in almost any language. We can use useful libraries. - microsoft/vscode-languageserver-node (This repository contains some modules) - ebkalderon/tower-lsp - gluon-lang/lsp-types Any other choices? We can implement the necessary features for the provided LSP according to the specifications using those libraries.

How do Linting and Formatting Extensions work? 12 Extension Host (Node.js/Browser) Language Server Reference: https://snyk.io/blog/modern-vs-code-extension-development-basics/ extension.js(main) function activate() {} function deactivate() {} VS Code Editor If uses Activation Event triggers and launchers according to package.json In VS Code Process Launches the Host according to .vscode dir Parse AST Intermediate Representation Lint Format In Another Process

How do ESLint and Prettier work? 13 - Language Server in microsoft/vscode-eslint repo - The Language Server returns the lint result to show - Uses espree parser by default - No Language Server - Format code in the VS Code Extension - Uses multiple parsers based on the target language - JavaScript → @babel/parser (ESTree) - TypeScript → @typescript-eslint/typescript-estree (ESTree)

Biome - One Toolchain for Your Web Project (10.1k stars) - Performant Web Toolchain built in Rust - Analyzer to organize imports - Linter has more than 200 rules, strict by default) - Formatter is 97% compatibility with Prettier in JS/TS/JSX - Sponsor - 時雨堂, トヨクモ, 要, nanabit, GitHub sponsors 💝 - You can see: https://opencollective.com/biome 14

Lint Example: useFlatMap 15

Behind Biome Extension 16 Language Server (biome_lsp) extension.js In VS Code Process (biome-vscode) LSP Editor It provides Format on save, Inline suggestions with quick fixes, Refactoring Request/Response In Another Process Loads

Behind Biome Extension (Extension Manifest) 17 Language Server (biome_lsp) extension.js In VS Code Process (biome-vscode) LSP Editor It provides Format on save, Inline suggestions with quick fixes, Refactoring Loads biomejs/biome-vscode/package.json - activationEvents : controls when the extension loads - contributes : defines how it extends VS Code Request/Response In Another Process

Behind Biome Extension (Entry point) 18 Language Server (biome_lsp) extension.js (main.ts) In VS Code Process (biome-vscode) LSP Editor It provides Format on save, Inline suggestions with quick fixes, Refactoring In Child Process Loads Request/Response function activate(context) { - Configures and starts the LSP server - Adds listeners for file changes and editor activity } function deactivate(context) { - Stops the running LSP client if it exists }

Behind Biome Extension (Language Server) 19 Language Server (biome_lsp) extension.js In VS Code Process (biome-vscode) LSP Editor It provides Format on save, Inline suggestions with quick fixes, Refactoring Request/Response In Another Process Loads

Linter and Formatter related crates in Biome (prefix: biome_) 20 service analyze lsp cli formatter lexer/parser CST/AST

LSP Communication Example 21 Reference: https://microsoft.github.io/language-server-protocol/overviews/lsp/overview/

The biome_lsp sequence 22

23 Code from biome_lsp (partial and edited)

Simplified flow (There are many things I haven't talked about) 24 1. Extension Host activates the extension based on files (js, ts, jsx, vue, etc.) 2. biome-vscode (LSP client) checks if the biome LSP server lives, then it reads the root biome.json 3. Users write code 4. VS Code and the LSP client detect changes and send requests 5. The Biome LSP server handles the requests and responses 6. The LSP client formats code, shows diagnostics (lint results)

Editor Tooling (Linting, Formatting and others) saves Our Time 25 - Linters help to learn new languages, frameworks and best practices without code review - Formatters help to manual operations and waste discussion - Refactor features help to refactor code design (by refactor features) Almost 100% of developers open the editor, the effect of working on Editor Tooling is significant. Check: Don't underestimate the power of editor tooling - Erika https://erika.florist/articles/dontunderestimateeditorintegration

Biome Current Developments 26 Lint Rules (Stylelint, ESLint, typescript-eslint), Rust DX Improvements, CSS Formatter, Plugin Support with GritQL, Multiple Workspace Support, GraphQL / Yaml Support and many others.

References - Extension API | Visual Studio Code Extension API https://code.visualstudio.com/api - The Biome Tool Chain https://fosdem.org/2024/schedule/event/fosdem-2024-2563-the-biome-toolchain/ - Modern VS Code extension development: The basics | Snyk https://snyk.io/blog/modern-vs-code-extension-development-basics - Prettier のしくみ - Speaker Deck https://speakerdeck.com/sosukesuzuki/prettier-falsesikumi - Prettier 3.0 の VSCode 拡張対応における技術的な意思決定 ~VSCode 拡張で dynamic import が動 かない~ - Speaker Deck https://speakerdeck.com/sosukesuzuki/prettier-3-dot-0-no-vscode-kuo-zhang-dui-ying-nioke ruji-shu-de-nayi-si-jue-ding-vscode-kuo-zhang-de-dynamic-import-gadong-kanai - Language Server Protocol の仕様 及び実装方法 https://zenn.dev/mtshiba/books/language_server_protocol - Language Server Protocol に対応したミニ言語処理系を作る https://zenn.dev/takl/books/0fe11c6e177223 27