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
78
Visual Studio Code リモート開発 スタートガイド
ismt7
1
30
Visual Studio Codeで始めるリモート開発入門
ismt7
1
460
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
74
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
72
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
62
Other Decks in Technology
See All in Technology
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
690
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
510
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.9k
AIエージェント入門
minorun365
PRO
32
19k
Охота на косуль у древних
ashapiro
0
120
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
230
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
750
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
120
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
220
困難を「一般解」で解く
fujiwara3
7
1.6k
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
500
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
1
170
Featured
See All Featured
Facilitating Awesome Meetings
lara
53
6.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
440
Into the Great Unknown - MozCon
thekraken
35
1.6k
Writing Fast Ruby
sferik
628
61k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
A designer walks into a library…
pauljervisheath
205
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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