VSCodeToNotion とは？

このプラグインは、VSCode から NotionAPI を通して、新規投稿、編集、削除をするプラグインです。

vscodetonotion

使い方

まず、準備として、新規作成のデータベースを用意し、NotionAPI キーの取得と、ページ ID を取得しましょう。

サンプルのデータベースをご用意しました。動作確認に複製してご自由にお使いください。

Notion Developer Portalにアクセスし、新しいインテグレーションを作成します。
インテグレーションを作成したら、NotionAPI キーを取得します。（大切な情報なので厳重に保管してください）
先ほど複製した Notion のページにアクセスし、右上の三点リーダーをクリックしインテグレーションをコネクトの追加から追加します。（インテグレーションが反映されるまでに時間がかかる場合もあります。）
ページ ID を取得するには、ページの共有からリンクをコピーします。「https://notion.so/(NotionPageID)/?v=ランダム文字列」

次に、拡張機能を有効にしたら、サイドバーに Notion のアイコンが追加されるので「設定画面を開く」から先ほど設定した取得した NotionAPI キーとページ ID をそれぞれ設定してください。

setting

その次に、「Notion のページ一覧を開く」を選択すると下記のような画面になります。

pages

左側が Notion のデータベースを読み込んだ状態になります。

edit

左側の項目にフォーカスすると、鉛筆マークが出ますが、これは、Notion にページを更新したい時に使用します。ゴミ箱マークは削除です。

右上のノートのマークは、新規で Notion に投稿したいときに使います。

更新や新規でデータを投稿する時、エディタが立ち上がりますが、保存をしなくてもデータは送信ができます。

データを送信したい時

エディタで編集を終えたら、エディタ画面で右クリックを押します。すると下記のようになります。

update

「エディター内容を Notion のデータベースに送信する」を選択するとデータベースにデータが送信されます。

注意事項

画像について

使っているライブラリの関係で、外部画像の URL に関しては、送信できますが、ローカルにて画像のファイルを送ることができません。

そのため、カバー画像や、アイコン、記事本文の画像に関しては、Notion 上で編集していただけるようにお願いいたします。

Release Notes

0.0.1

カスタムプロパティにて新規投稿、更新できるように調整 (2023/5/6)

0.0.2

プロジェクトを開いている時に、 Notion のウェルカム画面が表示されない問題解決(2023/5/6)

0.0.3

設定ファイルを変更したときに、再度 VSCode を開き直すかどうかの確認メッセージを出力(2023/5/7)
markdown を立ち上げた時、プレビュー画面が表示されるようになる。(2023/5/7)

0.0.4

100 件以上の記事ページが表示するよう対応(2023/5/8)

0.0.5

プレビュー画面の微調整(2023/5/8)

0.0.6

エラーハンドリング調整(2023/5/13)
Notion から markdwon に変更内容を更新する機能追加(2023/5/13)
新規に Notion にデータ送信した際に、Notion のページからデータを取得するように変更(2023/5/13)

参考サイトやお借りした素材サイト

Thanks!

VScodeToNotion

naomina121