Skip to content

Instantly share code, notes, and snippets.

@nuovotaka
Last active April 20, 2023 04:42
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save nuovotaka/7bfb8130e0be8b3dae83 to your computer and use it in GitHub Desktop.
Save nuovotaka/7bfb8130e0be8b3dae83 to your computer and use it in GitHub Desktop.
Visual Studio Code でGitHub Gistを使ってみた

##Visual Studio Code でGitHub Gistを使ってみた(Mac)

先ずは、Extension の Installの方法 SHIFT + COMMAND + PもしくはView > Command Palette...Command Paletteを表示させたら >installと入力します。

ext_install

Install Extensionsが選択されてext install となりますので必要な語彙を入力してみましょう。 大概のものは用意されていると思います。

===

gist のエクステンションをインストールする


先ほどのext install に続いてgistと入力してみましょう。

インストールは、雲のマークをクリックすることでインストールすることができます。

Install Extension のサンプル

install_sample

Gist をInstallした後はshow installで確認することができます。

installed_gist

次にGitHub Authenticationを行わなければいけません。

二段階認証を設定されている方、及び、ターミナルを使いたくない方は**”GitHub でTOKENを取得する”**をご覧ください。

ターミナルを開いて以下のコードをコピー&ペーストしてEnterします。

curl -v -u USERNAME -X POST https://api.github.com/authorizations --data "{\"scopes\":[\"gist\"], \"note\": \"VSCode-Gist-Extension\"}"

Gist - READ ME

こちらでTOKENが取得できた方は、**"GitHubでTOKENを取得する - set_gist_token"**をご覧ください。

===

GitHub でTOKENを取得する


View_profile and more

GitHubにLoginし右上のView your profile and moreをクリック

View_profile and more

Settings

Settingsをクリック

Settings

Personal_access_token

Personal access tokensをクリック

Personal_access_token

Generate_new_token

Generate new tokenをクリック

Generate_new_token

Token_description & select scopes gist

Token descriptionはTokenの覚書を入力し、チェックボックスは左下のgistを選びGenerate tokenボタンを押してください。

Token_description & select scopes gist

Copy new personal access token

TOKENが表示されますのでそれをコピーします。

Copy new personal access token

set_gist_token

Visual Studio Codeを開き**COMMAND + ,(カンマ)**または、Code > Preferences > User Settingsによりユーザー設定を表示し下記のコードを記述します。

set_gist_token

"gist.oauth_token": "YOUR_TOKEN"

[YOUR_TOKEN] = 先ほどコピーしたTOKENをペーストします。

Extension インストール後の初回はGitHubのユーザー名とパスワードを求められますので入力してください。

===

Visual Studio Code での使い方


gist new create

SHIFT + COMMAND + PもしくはView > Command Palette...Command Paletteを表示させたら >gist new publicと入力します。

use_gist_new

これにより新規の公開gistを作成することができます。

gist open and edit

gist open コマンドを使う

use_gist_open

gist open 後ファイルを選択する

use_gist_opened

gist openでファイルを選択した後、編集する。保存はCOMMAND + S。Macのショートカットが使えます。 保存をすると、gistの場合は直接syncしなくてもファイルがアップデートされます。 リモート側では、バージョン管理がされているのでその都度バージョンが上がることになります。

use_gist_selected

【 注 意 】 ファイルを開いた状態で上記の操作をするとそのままGistへ上がってしまうので気をつけてください。 思わず失敗しましたので。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment