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
140
Visual Studio Codeで拡張機能をインストールしてみよう
Visual Studio Codeで拡張機能をインストールする手順を補足資料的に作成したものです
Ishimoto Tatsuya
January 11, 2023
Tweet
Share
More Decks by Ishimoto Tatsuya
See All by Ishimoto Tatsuya
AWS AmplifyではじめるDevOps
ismt7
0
36
VS CodeのDev Containersを活用して開発を効率化しよう
ismt7
1
580
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
56
Visual Studio Code リモート開発 スタートガイド
ismt7
1
15
Visual Studio Codeで始めるリモート開発入門
ismt7
1
350
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
54
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
46
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
34
DevOpsを始めるために知っておきたい技術_クライアント開発環境_編___1_.pdf
ismt7
0
22
Other Decks in Technology
See All in Technology
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Adopting Sorbet at Scale
ufuk
71
8.8k
Thoughts on Productivity
jonyablonski
64
4.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Side Projects
sachag
451
42k
Design by the Numbers
sachag
277
18k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Become a Pro
speakerdeck
PRO
15
4.8k
A Modern Web Designer's Workflow
chriscoyier
689
190k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
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