VSCodeの拡張機能を作っている話

VSCodeの拡張機能を作っている話株式会社HRBrain 江原一博

Agenda 1. 自己紹介 & 会社紹介 2. 開発の経緯 4. 開発で大変だったところ 3.
デモ画面 5. まとめ

自己紹介

株式会社HRBrain 技術本部 X（Twitter）@yakiniku040220 フロントエンジニア（たまにサーバーサイドも書きます。）自己紹介江原一博カラオケ、ゲーム、料理、音楽鑑賞が趣味です。

会社紹介人事評価

皆さんに質問です。

開発中にSlack通知が来ることはありますか？

その時にSlackに切り替えるの毎回大変ですよね。。。

今VSCode上からSlackにメッセージを送る拡張機能を作ってます。

デモ画面

開発で大変だったところ

Reactの導入 VSCodeのWebview部分の開発がすごいやりづらい。 function getWebviewContent() { return `<!DOCTYPE html> 　　<html lang="en">
　　<head> 　　　<meta charset="UTF-8"> 　　　<meta name="viewport" content="width=device-width, initial-scale=1.0"> 　　　<title>Cat Coding</title> 　　</head> 　　<body> 　　　<img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" /> 　　</body> 　</html>`; }

Reactの導入 Reactのsetup yarn add react react-dom

index.tsx import { createRoot } from "react-dom/client"; import { App
} from "./App"; const root = createRoot(document.getElementById("app")!); root.render(<App />); Reactの導入 index.tsx作成

extension.ts function getWebviewContent() { return ` <!DOCTYPE html> <html lang="ja">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body class="bg-white text-slate-900"> <div id="app"></div> </body> </html>`; } Reactの導入 HTML Contentの更新

webpack.config.js const webviewConfig = { ...baseConfig, target: ["web", "es2020"], entry:
"./src/index.tsx", experiments: { outputModule: true }, output: { path: path.resolve(__dirname, "dist"), filename: "webview.js", libraryTarget: "module", chunkFormat: "module", }, }; Reactの導入 webpack.config.jsの更新

Slack APIでのCORS問題 React component側でSlack APIにリクエストを投げたが、CORSが発生してデータが取得できない問題が発生。

Slack APIでのCORS問題現状VSCode側ではサポートされていない？ There is no vscode support for changing
this. You should think of the webview more as an html view (one that does not have any server or origin) rather than a webpage Posters on stackoverflow may have suggestions for workarounds https://github.com/microsoft/vscode/issues/72900#issuecomment-487140263

Slack APIでのCORS問題 Proxy Serverを作ってCORSを回避した。

まとめ

・VSCodeの拡張機能の開発はハードルが低い。・サンプルプログラムが豊富。・拡張性を求めるとハードルが高くなる。・package.jsonがちょっと曲者

ご清聴ありがとうございました。

VSCodeの拡張機能を作っている話

VSCodeの拡張機能を作っている話

Kazuhiro Ebara

More Decks by Kazuhiro Ebara

Other Decks in Technology

Featured

Transcript