vscode 拡張機能作成 #VisualStudioCode

※自分用のメモになります。

公式ドキュメント

作成環境

OS: windows10
vscode バージョン: 1.81.1

Node.jsのインストール

上記リンクへアクセス。最新の安定バージョンをダウンロードし、インストールします。

インストールパス(デフォルト) C:\Program Files\nodejs\

動作確認

λ node --version
v18.17.1

λ npm -v
9.6.7

vscode拡張機能に開発に必要なライブラリのインストール

npm install -g yo generator-code
でYeoman generator for Visual Studio Code Extensionsをインストール
npm install -g vsce
でVSCEをインストール

プロジェクトを作成する。

yo code を実行

ひとまずNew Extension (TypeScript)を作成してみる。

λ yo code                                                                   
                                                                            
     _-----_     ╭──────────────────────────╮                               
    |       |    │   Welcome to the Visual  │                               
    |--(o)--|    │   Studio Code Extension  │                               
   `---------´   │        generator!        │                               
    ( _´U`_ )    ╰──────────────────────────╯                               
    /___A___\   /                                                           
     |  ~  |                                                                
   __'.___.'__                                                              
 ´   `  |° ´ Y `                                                            
                                                                            
? What type of extension do you want to create? New Extension (TypeScript)  
? What's the name of your extension? first-extension                        
? What's the identifier of your extension? first-extension                  
? What's the description of your extension?                                 
? Initialize a git repository? Yes                                          
? Bundle the source code with webpack? Yes                                  
? Which package manager to use? npm                                         
                                                                            
Writing in C:\arrange\first-extension...                                    
   create first-extension\.vscode\extensions.json                           
   create first-extension\.vscode\launch.json                               
   create first-extension\.vscode\settings.json                             
   create first-extension\.vscode\tasks.json                                
   create first-extension\package.json                                      
   create first-extension\tsconfig.json                                     
   create first-extension\.vscodeignore                                     
   create first-extension\webpack.config.js                                 
   create first-extension\vsc-extension-quickstart.md                       
   create first-extension\.gitignore                                        
   create first-extension\README.md                                         
   create first-extension\CHANGELOG.md                                      
   create first-extension\src\extension.ts                                  
   create first-extension\src\test\runTest.ts                               
   create first-extension\src\test\suite\extension.test.ts                  
   create first-extension\src\test\suite\index.ts                           
   create first-extension\.eslintrc.json                                    
                                                                            
Changes to package.json were detected.

最後にvscodeで開くかどうかを聞かれるので、開く

For more information, also visit http://code.visualstudio.com and follow us @code.


? Do you want to open the new folder with Visual Studio Code? Open with `code`

動作確認

そのまま[F5]でデバック、仮想環境のvscodeのwindowが開く

仮想環境ウィンドウでコマンドパレットを開く(ctrl+shift+p) , Hello worldと入力するとコマンドが出てくるので実行する

Hello worldが表示される

パッケージ化

いろいろ作成するパートはまた今度とし、配布のためにパッケージ化(ビルド)を試してみる。

λ cd first-extension\
λ vsce package

結果

Executing prepublish script 'npm run vscode:prepublish'...

> first-extension@0.0.1 vscode:prepublish
> npm run package


> first-extension@0.0.1 package
> webpack --mode production --devtool hidden-source-map

    [webpack-cli] Compiler starting...
    [webpack-cli] Compiler is using config: 'C:\arrange\first-extension\webpack.config.js'
    [webpack-cli] Compiler finished
asset extension.js 623 bytes [emitted] [minimized] (name: main) 1 related asset
./src/extension.ts 1.42 KiB [built] [code generated]
external "vscode" 42 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 1887 ms
 ERROR  Make sure to edit the README.md file before you package or publish your extension.

なんか怒られた。。。readmeを書きなさいとのことでした。。。
readmeを適当に編集して再度、 vsce package を実行！

Executing prepublish script 'npm run vscode:prepublish'...

> first-extension@0.0.1 vscode:prepublish
> npm run package


> first-extension@0.0.1 package
> webpack --mode production --devtool hidden-source-map

    [webpack-cli] Compiler starting...
    [webpack-cli] Compiler is using config: 'C:\arrange\first-extension\webpack.config.js'
    [webpack-cli] Compiler finished
asset extension.js 623 bytes [compared for emit] [minimized] (name: main) 1 related asset
./src/extension.ts 1.42 KiB [built] [code generated]
external "vscode" 42 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 1900 ms
 WARNING  A 'repository' field is missing from the 'package.json' manifest file.
Do you want to continue? [y/N] y
 WARNING  LICENSE.md, LICENSE.txt or LICENSE not found
Do you want to continue? [y/N] y
 DONE  Packaged: C:\arrange\first-extension\first-extension-0.0.1.vsix (7 files, 3.73KB)

リポジトリやライセンスを書きなさいと警告が出ますが、気にせず突き進む！
DONE Packaged: C:\arrange\first-extension\first-extension-0.0.1.vsixが出来上がりました！
これが拡張機能を入れるときに必要なわけですね。

拡張機能をインストール

vscodeの拡張機能ページの VSIXからのインストールをクリックし、先ほどビルドした .vsixを選択

拡張機能のインストールが完了。
通常のvscodeから作成した拡張機能が使用可能になります。

実行！

いざ、実行！！

出来ました。
めでたしめでたし。

今後

vscodeがサポートしていないプログラミング言語のハイライトやスニペット、できればデバッガや文法チェックのような機能を開発したい。