Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Visual Studio Codeで拡張機能をインストールしてみよう
Search
Ishimoto Tatsuya
January 11, 2023
Technology
0
170
Visual Studio Codeで拡張機能をインストールしてみよう
Visual Studio Codeで拡張機能をインストールする手順を補足資料的に作成したものです
Ishimoto Tatsuya
January 11, 2023
Tweet
Share
More Decks by Ishimoto Tatsuya
See All by Ishimoto Tatsuya
Visual Studio CodeのDev Containersを使って開発環境構築してみよう(2024/09/07版)
ismt7
0
150
AWS AmplifyではじめるDevOps
ismt7
0
60
VS CodeのDev Containersを活用して開発を効率化しよう
ismt7
1
740
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
76
Visual Studio Code リモート開発 スタートガイド
ismt7
1
28
Visual Studio Codeで始めるリモート開発入門
ismt7
1
450
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
73
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
67
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
60
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
アジャイル開発とスクラム
araihara
0
160
2.5Dモデルのすべて
yu4u
2
610
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
Larkご案内資料
customercloud
PRO
0
600
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Six Lessons from altMBA
skipperchong
27
3.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Making Projects Easy
brettharned
116
6k
Rails Girls Zürich Keynote
gr2m
94
13k
How GitHub (no longer) Works
holman
313
140k
We Have a Design System, Now What?
morganepeng
51
7.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Transcript
日本仮想化技術株式会社 VirtualTech.jp 2023/01/11 Visual Studio Codeで 拡張機能をインストール してみよう 1
概要 • ブラウザ経由でインストールする方法 • 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