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
160
AWS AmplifyではじめるDevOps
ismt7
0
63
VS CodeのDev Containersを活用して開発を効率化しよう
ismt7
1
750
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
79
Visual Studio Code リモート開発 スタートガイド
ismt7
1
30
Visual Studio Codeで始めるリモート開発入門
ismt7
1
460
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
75
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
73
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
62
Other Decks in Technology
See All in Technology
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
5
6.8k
MLflowはどのようにLLMOpsの課題を解決するのか
taka_aki
0
140
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
370
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
300
Pwned Labsのすゝめ
ken5scal
2
570
アジリティを高めるテストマネジメント #QiitaQualityForward
makky_tyuyan
1
400
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
220
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.9k
OPENLOGI Company Profile for engineer
hr01
1
20k
スクラムというコンフォートゾーンから抜け出そう!プロジェクト全体に目を向けるインセプションデッキ / Inception Deck for seeing the whole project
takaking22
3
170
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
220
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building an army of robots
kneath
303
45k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Automating Front-end Workflow
addyosmani
1369
200k
BBQ
matthewcrist
87
9.5k
Become a Pro
speakerdeck
PRO
26
5.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
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