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

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

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