Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Visual Studio Codeで拡張機能をインストールしてみよう

Visual Studio Codeで拡張機能をインストールしてみよう

Visual Studio Codeで拡張機能をインストールする手順を補足資料的に作成したものです

Ishimoto Tatsuya

January 11, 2023
Tweet

More Decks by Ishimoto Tatsuya

Other Decks in Technology

Transcript

  1. 日本仮想化技術株式会社
    VirtualTech.jp
    2023/01/11
    Visual Studio Codeで
    拡張機能をインストール
    してみよう
    1

    View Slide

  2. 概要
    ● ブラウザ経由でインストールする方法
    ● Visual StudioCodeからインストールする方法
    ● extensions.jsonファイルを使っておすすめの拡張機能をチームメンバーに配布する方法
    2

    View Slide

  3. 拡張機能を使用する際の注意点
    3
    ● なにかとお世話になることが多いからこそできるだけ安全に使いたい
    ● マーケットプレイスからインストールできても100%安全ではない
    ○ 2021年に拡張機能を悪用したサイバー攻撃がニュースで話題
    ○ マーケット側でも配信時などに確認されているがイタチごっこが現状
    「羊の姿をしたオオカミ」が潜んでいる可能性もある
    ポイント
    ● GitHubのリポジトリも含めて信用できるか
    ● 非常によく似たパッケージがないか(参考記事)
    ○ 非常によく似せたなりすましの拡張機能がある
    ○ スペルミスを狙ったような ID名など手口は似ている
    ● 認証バッチが付いている
    ○ 2021年の追加機能。配信者とドメイン所有者が一致しているか
    ○ 認証バッチ取得のハードルは高くなく、玉石混交な状態
    ● VS Codeのまめなバージョンアップ
    ○ 拡張機能のKillリストなどで非推奨なものを削除してくれる 公式サイトより引用

    View Slide

  4. ブラウザ経由でインストール編
    4

    View Slide

  5. 5
    流れ
    1. インストールしたい拡張機能名(例:ESLint)を入力して、エンター(or 検索ボタンを押下)
    2. 検索結果の一覧からインストールしたい拡張機能のカードをクリック
    3. 「インストール」ボタンをクリックして
    a. [ダイアログ1]「Continue」をクリック
    b. [ダイアログ2]「Visual Studio Codeを開く」をクリック
    4. Visual Studio Codeでインストールをクリック

    View Slide

  6. 6
    インストールしたい拡張機能名を入力

    View Slide

  7. 7
    本家と似たアイコンを
    使った拡張機能もあるので注意
    インストールしたい
    カードをクリック

    View Slide

  8. 8
    クリック

    View Slide

  9. 9
    クリック

    View Slide

  10. 10
    クリック

    View Slide

  11. 11
    クリック
    インストール中
    インストール完了

    View Slide

  12. Visual Studio Codeから
    インストール編
    12

    View Slide

  13. 13
    ① アクティビティバーをクリック
    ② 「jest」を検索
    ③ 拡張機能の一覧から Jestをクリック

    View Slide

  14. 14
    クリック

    View Slide

  15. おすすめの拡張機能を設定して配布
    (extensions.json)
    15

    View Slide

  16. 16
    コマンドパレットを表示して、「 recommend」と入力

    View Slide

  17. 17
    拡張機能のIDを記載
    【拡張機能IDの調べ方】
    ① 調べたい拡張機能の歯車をクリック
    ② 「拡張機能IDのコピー」をクリック

    View Slide

  18. 18
    検索窓で「@recommended」と検索

    View Slide

  19. 19
    インストールボタンからまとめてインストールできる

    View Slide

  20. おわり
    20

    View Slide