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
190
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
200
AWS AmplifyではじめるDevOps
ismt7
0
77
VS CodeのDev Containersを活用して開発を効率化しよう
ismt7
1
830
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
93
Visual Studio Code リモート開発 スタートガイド
ismt7
1
46
Visual Studio Codeで始めるリモート開発入門
ismt7
1
510
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
88
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
99
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
76
Other Decks in Technology
See All in Technology
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
130
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
21k
Operating Operator
shhnjk
1
620
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
460
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
390
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
Contributing to Rails? Start with the Gems You Already Use
yahonda
2
110
MobileActOsaka_250704.pdf
akaitadaaki
0
170
Coinbase™®️ USA Contact Numbers: Complete 2025 Support Guide
officialcoinbasehelpcenter
0
460
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
4
290
Claude Code に プロジェクト管理やらせたみた
unson
6
4.6k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
A better future with KSS
kneath
238
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Facilitating Awesome Meetings
lara
54
6.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Faster Mobile Websites
deanohume
307
31k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
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