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
moyashi
September 16, 2023
Programming
0
120
Visual Studio Codeの使い方 基礎編
Visual Studio Codeの使い方 基礎編
2023/9/16 Mie WordPress Meetup #14のスライド
moyashi
September 16, 2023
Tweet
Share
More Decks by moyashi
See All by moyashi
AIコーディングエージェントのはなし
moyashi
0
95
機械学習で画像を分類してみた話
moyashi
1
84
自分の学習データで画像生成AIを使ってみる話
moyashi
2
750
メールを受信トレイに届けよう - Gmailガイドラインの話
moyashi
3
830
プログラミング支援AI GitHub Copilot すごいの話
moyashi
0
4.6k
アナログ電話のナンバーディスプレイを安価にIT化する話
moyashi
1
180
Other Decks in Programming
See All in Programming
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1k
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.1k
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
340
Catch Up: Go Style Guide Update
andpad
0
170
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
150
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
590
クラシルを支える技術と組織
rakutek
0
190
CSC509 Lecture 04
javiergs
PRO
0
290
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
240
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
520
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Navigating Team Friction
lara
189
15k
What's in a price? How to price your products and services
michaelherold
246
12k
A Tale of Four Properties
chriscoyier
160
23k
How to Ace a Technical Interview
jacobian
280
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Rails Girls Zürich Keynote
gr2m
95
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Transcript
Visual Studio Codeの使い方 基礎編 2023/9/16 Mie WordPress Meetup #14
もやし工房 石黒 光茂 @koike_moyashi mitsushige.ishiguro もやし工房
テキストエディタ? ✓ワープロ的な装飾はできない、 純粋にテキストだけを編集するツール ✓軽く文章を書いたり、 Web系であればプログラム書いたり CSSやHTML書いたりできる
テキストエディタ? ✓どんなPCにも入ってる メモ帳、テキストエディット ✓これでプログラム書いたりHTML書いたりもできますが、 これの高機能版も沢山出ています
テキストエディタ? Sublime Text Atom Bracket Visual Studio Code Notepad++ サクラエディタ
TeraPad Coda Dreamweaver Vim Emacs などなど。ホームページ作成ツールも一部混じってます。
メモ帳ではなく専用のものを使うメリット 1.記述ミスが少なくなる 自動補完 自動整形 タグごとの色付け(シンタックスハイライト) エラーチェック(実行しなくても赤くなったりする) 2.書くスピードが上がる&正確なものができあがる
Visual Studio Code Visual Studio Code
VSCodeの特徴 ✓無料で使える ✓それなりに軽く動く ✓拡張機能で機能追加ができる ✓補助機能(インテリセンス)が使える ✓Git連携 ✓使っている人が多いので情報が多い ✓機能が多いので初見では分かりにくい(使いにくい?)
インストール方法 https://code.visualstudio.com/ よく似た名前の「Visual Studio」があるので注意→青色◦。 紫色×
VSCodeを使ってみよう オンライン版:https://vscode.dev/ 多くの拡張機能が入らないけど、基本的な部分は一緒
VSCodeを使ってみよう 1. https://vscode.dev/ をひらく 2. デスクトップに適当なフォルダを作る 3. ファイル→フォルダーを開く 4. 新規作成→index.html
5. ↓ htmlと打つ→html:5を選択 body内に <p>テスト</p> <style></style> 保存 <p> テスト2(全角スペース)</p> 保存
VSCodeを使ってみよう(基本機能) ✓タイムライン ✓自動成形 ✓補完 ✓マルチカーソル ✓コメント ✓左右分割 ✓ワークスペース ✓拡張機能 Shift
+ Alt(Option) + F Alt(Option) + クリック Ctrl(cmd) + D Ctrl(cmd) + / 左下 Tag or Enterで確定 右上 左
拡張機能 WordPressで言うところのプラグイン https://marketplace.visualstudio.com/vscode
拡張機能 1. functions.phpを新規作成 2. <?php get_t とか 3. tabかエンターキーで確定
おすすめの拡張機能(Web系) Prettier コードを綺麗にしてくれる HTML CSS Support 読み込んだCSSをhtmlのclassやidで補完してくれる Live Server ブラウザ再読込しなくても、
保存するとリアルタイムに反映してくれる DartJS Sass Compiler and Sass Watcher SCSS(SASS)からCSSを作ってくれる Auto Rename Tag 前後のタグをいい感じに直してくれる Git Lens Gitの中身をいい感じに表示してくれる Code Spell Checker 間違った英語に青線引いてくれる Project Manager 複数の案件を管理できる GitHub Copilot AIによる補完 Markdown Preview Enhanced マークダウンのプレビューを表示してくれる
Prettier / コードを綺麗にしてくれる
HTML CSS Support / 読み込んだCSSをhtmlのclassやidで補完してくれる
Live Server / ブラウザ再読込しなくても、保存するとリアルタイムに反映してくれる 高萩さんが紹介してくれます
local by flywheelのリアルタイム反映(VS Code関係ないです) CSSを書き換えるとリロード無しで反映してくれる
DartJS Sass Compiler and Sass Watcher / SCSS(SASS)からCSSを作ってくれる 高萩さんが紹介してくれます
Auto Rename Tag / 前後のタグをいい感じに直してくれる 高萩さんが紹介してくれます
Git Lens / Gitの中身をいい感じに表示してくれる ローカル GitHub サーバ Git
Git Lens / Gitの中身をいい感じに表示してくれる ローカル GitHub サーバ Git Gitを使うメリット 1.
複数人で触るときに安心。 サーバに入っているAさんの更新を上書きしてしまう的な事にならない。 2. 過去のデータを見られる。 差分が出る、戻せる、分岐できるので、何かあっても安心。 3. 前回と比べ、どの行を更新したかがわかる。どのファイルが更新されて るかがわかる、前日に何をやっていたかを思い出せて、安心。 4. あれ、この更新ファイルってサーバに入れたんだっけ?が無くなる git pullと叩くだけ
Git Lens / Gitの中身をいい感じに表示してくれる
Code Spell Checker / 間違った英語に青線引いてくれる
Project Manager / 複数の案件を管理できる
Markdown Preview Enhanced / マークダウンのプレビューを表示してくれる
GitHub Copilot / AIによる補完(有料サービスを使用)
最後に 慣れは必要だけど、慣れると便利 YouTubeでも「VSCode 初心者」とかで沢山講座出てきます。