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

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

Transcript

1. 日本仮想化技術株式会社 VirtualTech.jp 2023/01/11 Visual Studio Codeで 拡張機能をインストール してみよう 1
2. 概要 • ブラウザ経由でインストールする方法 • Visual StudioCodeからインストールする方法 • extensions.jsonファイルを使っておすすめの拡張機能をチームメンバーに配布する方法 2
3. 拡張機能を使用する際の注意点 3 • なにかとお世話になることが多いからこそできるだけ安全に使いたい • マーケットプレイスからインストールできても100%安全ではない ◦ 2021年に拡張機能を悪用したサイバー攻撃がニュースで話題 ◦ マーケット側でも配信時などに確認されているがイタチごっこが現状 「羊の姿をしたオオカミ」が潜んでいる可能性もある ポイント • GitHubのリポジトリも含めて信用できるか • 非常によく似たパッケージがないか(参考記事) ◦ 非常によく似せたなりすましの拡張機能がある ◦ スペルミスを狙ったような ID名など手口は似ている • 認証バッチが付いている ◦ 2021年の追加機能。配信者とドメイン所有者が一致しているか ◦ 認証バッチ取得のハードルは高くなく、玉石混交な状態 • VS Codeのまめなバージョンアップ ◦ 拡張機能のKillリストなどで非推奨なものを削除してくれる 公式サイトより引用
4. ブラウザ経由でインストール編 4
5. 5 流れ 1. インストールしたい拡張機能名(例：ESLint)を入力して、エンター(or 検索ボタンを押下) 2. 検索結果の一覧からインストールしたい拡張機能のカードをクリック 3. 「インストール」ボタンをクリックして a. [ダイアログ1]「Continue」をクリック b. [ダイアログ2]「Visual Studio Codeを開く」をクリック 4. Visual Studio Codeでインストールをクリック
6. 6 インストールしたい拡張機能名を入力
7. 7 本家と似たアイコンを 使った拡張機能もあるので注意 インストールしたい カードをクリック
8. 8 クリック
9. 9 クリック
10. 10 クリック
11. 11 クリック インストール中 インストール完了
12. Visual Studio Codeから インストール編 12
13. 13 ① アクティビティバーをクリック ② 「jest」を検索 ③ 拡張機能の一覧から Jestをクリック
14. 14 クリック
15. おすすめの拡張機能を設定して配布 (extensions.json) 15
16. 16 コマンドパレットを表示して、「 recommend」と入力
17. 17 拡張機能のIDを記載 【拡張機能IDの調べ方】 ① 調べたい拡張機能の歯車をクリック ② 「拡張機能IDのコピー」をクリック
18. 18 検索窓で「@recommended」と検索
19. 19 インストールボタンからまとめてインストールできる
20. おわり 20