Behind VS Code Extensions for JavaScript / TypeScript Linting and Formatting

# Behind VS Code Extensions for JavaScript / TypeScript Linting and Formatting

This slides are used at VS Code Conference Japan 2024 https://vscodejp.github.io/conference-2024/ (15 ~ 20 minutes)

## 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-niokeruji-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

Transcript

1. Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting 1 VS Code Conference Japan 2024 @unvalley_ ^^^^^^^^^^^^^
2. About me - unvalley - TypeScript / Rust - A core contributor of Biome - Learning Type System 2 @unvalley_ unvalley
3. 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
4. Extensions Categories 4 - Themes - Programming Languages - Linters / Formatters - Testing / Debuggers / Snippets / Keymaps - Visualization - AI / Chat
6. 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
7. 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
8. 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
9. 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
10. 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.
11. 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.
12. 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
13. 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)
14. 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
15. Lint Example: useFlatMap 15
16. 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
17. 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
18. 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 }
19. 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
20. Linter and Formatter related crates in Biome (prefix: biome_) 20 service analyze lsp cli formatter lexer/parser CST/AST
21. LSP Communication Example 21 Reference: https://microsoft.github.io/language-server-protocol/overviews/lsp/overview/
22. The biome_lsp sequence 22
23. 23 Code from biome_lsp (partial and edited)
24. 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)
25. 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
26. 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.
27. 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