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