shu_web
← ブログ一覧へ
記事2024.07.24

【VS Code】でコードを書いてて「ムキィ！！」ってならないための知識まとめ：【X】に投稿したものまとめてます

【VS Code】でコードを書いてて「ムキィ！！」ってならないための知識まとめ：【X】に投稿したものまとめてます

以前から独学で簡単なプログラミングの学習はしていましたが、

フリーランスとして在宅でコーディングなどの仕事ができるようになる目的で、2024年5月から、「デイトラ」というオンラインプログラミングスクールでWeb制作を学習開始。

その中で、学んだり調べたことを【X】に日々投稿しているので、

このページでは、主にWeb制作などで、コードエディターの「VS Code」でコードを書くのを快適にする小ネタ・投稿をまとめておきます。

こういう小ネタを知ってるかどうかで、コードを書くスピード、、、

何よりも「ムキィ！！」ってなるストレスをかなり軽減できます。

まだ、ポートフォリオは作ってませんが、オンラインサブスクサイトで独学していた以前と比べ、デイトラを始めてからめちゃくちゃレベルアップできてます。

特にVS Code、開発者ツール、マウスボタンなども含めて、

ショートカットキー関連は、すぐに導入出来て、劇的に効率が変わります。

そこだけでも目次からジャンプしてみてみてください。

２ページ目には、

Windows PC 関連【VS Code 以外の小ネタ】
Chrome【開発者ツール】小ネタ
Figma関連、、、

などのネタをまとめてます。

Xの投稿リンクを大量に張りすぎて、ページの読み込み遅いです、、、ごめんなさい。

これからも、調べたことなどどんどん【X】に投稿して、ここにも追記していく予定なので、

この記事が参考になった～、って方は、【X】だけでもフォローおすすめです。

しゅう_一生成長期のおやじの【X】

この記事のネタの知識を得るきっかけの学習は、毎日↓の「デイトラ」でやってます。

キャリアに不安を感じている方へ！デイトラで新しいスキルを身につけ、Web業界で活躍しよう！

サイバーエージェントが運営する小学生向けプログラミングスクール
Tech Kids School【テックキッズスクール】

けっこうガチ目っぽいです↓↓

京大生中心のエンジニアによる中高生のためのプログラミング教室↓↓

僕がWeb制作を学んだデイトラ↓↓
継続的に学習する意思があって、何でも他人任せにするようなひとでなければ、圧倒的低価格で、圧倒的実力が身に付きます

【VS Code】 関連：コーディングを快適にする小ネタ

拡張機能

こまごま便利なものまとめたサイト

コーディングを効率化することに情熱を燃やされてる？？方が書いてるサイトみたいです↓↓

このXの投稿にリンク張ってる記事以外にも、いろいろ参考になる記事書かれてるみたいんなんで、のぞいてみると毎日のコーディングが快適になる？かもです。

Live Server：HTML・CSS、リアルタイム反映

HTMLやCSSを、VS Codeで書いたそばからリアルタイムでブラウザに反映させる拡張機能。

【X】の投稿ではないですが、デイトラで教わって使ってます。

参考サイト↓

VS Code の Live Server – ブラウザを自動的に再読込する拡張機能について

追記：Live Server、環境により超不安定？Perfect Pixcelでの確認は使わなくてもできます

Live Server、PCスペックなんかの問題で不安定なら、無理に使わなくてよさそうです。

Perfect Pixcel を使ったデザインとのずれの確認も、Perfect Pixcelの設定をいじればできました。

シークレットモードでの実行とファイルのURLへのアクセスを許可すれば、HTMLを直接ブラウザで開いてもPerfect Pixcel使えます。

Open in browser：HTMLをショートカットでデフォルトブラウザで開く

「Live server」で、リアルタイムにHTMLを同期してブラウザ表示するのは便利、、、

なんですが、Chromeの開発者ツールと同時に使ってると負荷が大きいのか僕の環境だとしょっちゅう表示崩れ起こします。

結局「Live server」は、「Perfect pixel」を使ってデザインカンプとのずれを確認するときだけにして、大まかなHTML・CSSを書くときは直接HTMLをブラウザで開いてます。

この拡張機能を使わなくても、ブラウザで開く方法はいくつかあるのですが、「Open in browser」ならショートカットで一撃でできます。

これで一回開いて、あとはコード変えて確認したいときは「Ctrl + R」でウインドウ更新！

で、だいぶ開発者ツールでの表示が安定します。

Prettier：インデントなどコード自動整形

インデントだけでなく、セーブ時に整形する設定にすると、

改行や、行末尾の「;」も【Prettier】で「Ctrl + S」でセーブするだけで補完してくれます。

ただし、過信は注意↓

スニペット登録を簡単に

拡張機能いろいろあるみたいなので、お好みのもの調べてみてください。

タグ自動編集は、使いこなさないと逆に危険

キーボードショートカット

ショートカットいろいろまとめたサイト

VS Code の便利なショートカットキー

HTMLのタグ折りたたみ

これが活躍するのは、特にSVG画像とか、SVG画像とか、SVG画像とか、、、？？

インデント整え

選択した範囲全部まとめて
Windows: Shift + Alt + F
Mac: Shift + Option + F
Linux: Ctrl + Shift + I

深く：Tab
浅く：Shift + Tab

Tabくらいは知ってたけど、地味に浅くするのとか知らんかったです

マルチカーソル

【VSCode】マルチカーソルと選択で爆速

ファイルをまたいでの検索

「VS Code、Ctrl + Shift + F でサイドバー開いて検索すると、ファイルを横断してのキーワード検索ができる！！」

これを知ってると、Sassなんかでファイル分割して変数やmixin定義してるとき、どこで使ったか迷子にならなくてすみます。

componentとか分けてると、ファイル10個以上に分割しますからね、、、

特定の行にジャンプ

ショートカットで素早く表示文字サイズ変更

一時的に、一画面に表示するコード量を増やして見るときなんかに便利。

widthとかの「数値」を↑↓キーで1ずつ増減して微調整

Pixel perfectにサイトを作ってると、数pixel単位で、数値を微調整、、、ってのを頻繁にやります。

それがだいぶストレスフリーになります。

VS Codeのショートカットキーはカスタマイズできます

VScodeのショートカットは、

設定の「キーボードショートカット」から、好きなキーに変更できます。

ほかのショートカットと、組み合わせるキーがかぶらないようにだけ注意。

「行選択と行削除」を左手だけで押せるようにすると幸せに

行削除とか頻繁にやるので、地味に結構な時短になります。

設定

パンくずリスト（HTMLタグなんかで今どの階層にいるか）

設定方法解説サイト↓↓

VSCodeでパンくずリストを有効にする方法

PHPファイルの自動フォーマット設定

文字列の中でもスニペットを呼び出す

インデント色分けをハイコントラストに

左のエクスプローラーに表示されるファイル・フォルダの並び順

好みでいろいろ選べるので、調べてみてください。

配色テーマを変えて、コードを見やすく

カッコのペアの色分け

↓の参考ブログの記事に書いてある設定だけでなく、拡張機能でもカッコを色分けできるのいろいろあります。

お好みの方法で色分けしてください。

色分けはほぼ必須？？インデントだけじゃあペアわからん、、、

[Visual Studio Code]ブラケット（括弧）のペアを色分けする

その他

タイムライン＝編集履歴（さかのぼって編集前に戻せる）

コード書いてて、やっぱ前の書き方の方がよかった～～

って時に、履歴さかのぼってもとに戻す方法。

普通に、基本的な機能としてあるのよね、、、

参考使い方サイト↓↓

VS Code ローカル履歴（タイムライン）でバージョン管理

アカウントの同期

アカウントの同期はしておこう

拡張機能や設定なんかも同期できるので、複数のPCを使う場合や、PCがぶっ壊れて初期化したとき、新しいPCを買ったときなど、ものすごく助かります。

Emett記法

コードの記述を省略できるEmmet記法。

知らないと、時間と手間の面で、本気で損をします。

文字通り、必須スキルで、皆さん知っていると思いますが、結構まだ知らない書き方もあったりします。

特殊文字を辞書登録

文字列の中でスニペットを使う方法
属性の「= “”」の中でのスニペットの代用

Emettで展開できず、スニペットにも登録できないなら、Windowsの辞書機能に登録しちゃえ！ってはなし。

後日<br />はスニペットでいけることが判明しましたが、<?php ?>も含めてそれでも辞書登録しとくと便利です。

スニペットに不必要な改行入ってない？？

スニペットに不必要な改行が入ってると、そこでコードの行が別の行として分割されるので、ガッツリエラーになりまする、、、

改行でコードが途切れてないか簡単確認

左の行番号見れば一撃、、、だったりします

文字サイズ変更

常に文字を大きくしてると、ひと画面に表示される情報減ってしまうので、

状況に応じて、ショートカットで素早く文字サイズ変更してみやすく。

単語単位で検索

VS Codeも「Ctrl + F」で検索できるのは、皆さん使ってると思うのですが、

僕が長いこと気づかなかった便利機能、、、

「.about」で単語単位で検索すると、

「.about__inner」とか「.about__header」とか、余分なものが付いた単語は除外して、

「.about」だけ！を検索できます。

MAMPのPHPのエラーログなんかもVS Codeで見ると便利

生成AIでコードアシスト

この投稿をした、2024/07月時点では、「Gemini code assist」↓ は、まだβ版。

結局今のところ、コードアシストには「Github Copilot」↓をメインで使ってます。

ちなみにでいうと、ブログ記事書く補助などの、普段使いのAIは「Gemini」に課金して使ってます。

ブログとか書いてると、Google製品を頻繁に使うので、、、

注！仕事の情報をAIに吸い上げられないように！

仕事で使うなら、、、

生成AIを仕事で使うなら、機械学習に情報を抜かれないように設定変更するよう注意！！

機密情報なんかAIに学習させないように！！

仕事で使うコードアシストと、プライベートのAIは分けた方がいい？？

バックアップはとっといた方がいい？

アカウント同期だけでも、スニペットなどの保存にはなってるんですが、2024年、Windowsも世界的に盛大にバグったので、過信は怖い？？

別サービスにたまに飛ばしとくと安心できます。

サイバーエージェントが運営する小学生向けプログラミングスクール
Tech Kids School【テックキッズスクール】

けっこうガチ目っぽいです↓↓

京大生中心のエンジニアによる中高生のためのプログラミング教室↓↓

僕がWeb制作を学んだデイトラ↓↓
継続的に学習する意思があって、何でも他人任せにするようなひとでなければ、圧倒的低価格で、圧倒的実力が身に付きます

次のページへのリンク

２ページ目には↓↓関連のネタまとめてます。

Windows PC 関連【VS Code 以外の小ネタ】

Chrome【開発者ツール】小ネタ

Figma関連

デスク回り環境関連

CSS・JavaScript・PHP関連の小ネタまとめた記事リンク

僕の受講中のオンラインプログラミングスクール【デイトラ】

Windows PC 関連【VS Code 以外の小ネタ】

【変換・無変換】キーで日本語・アルファベット切替

ノートPCで、備え付けのキーボードだとできないかもしれませんが、WindowsモードとMacモードなんかを切り替えられる外付けのキーボードでできました。

タスク切替を見やすく

標準カラーだと枠がみにくい、、、

マウスボタンカスタマイズ

マウスのサイドボタンに【コピペ】割り当てるのは危険？？

マウスのボタンカスタマイズに、コピペを割り当てると、ムダにミスが増える、、、

というお話、、、

タスク切替は【Windows + Tab】の方が便利かも？？

しばらくマウスサイドボタンに、

「Alt + Tab」と「Ctrl + Tab」を割り当ててましたが、

Figma、VS Code、学習の動画、、、とウインドウを切り替えるには、どうやら「Alt + Tab」より「Windowsキー + Tab」の方が使いやすそうです。

とくに、デュアルディスプレイだと、

「Alt + Tab」は、メインのモニターの方にすべてのモニターのタスクが並んでしまうけど、「Windowsキー + Tab」なら、モニターごとに別々にタスクが並ぶので選びやすいです。

必要に応じて、Chromeや VS Codeのウインドウは、「Figmaと講座動画は別タブにする、、、」など、

あえて、別々にして複数開いた方が別タスク扱いになるので選択しやすくなります。

そのかわり、マウスでタスクを選択しないといけないです。

それが嫌な人は、「Alt」と「Tab」のキーをそれぞれ別のボタンに割り当てて、「Alt」押しながら「Tab」キー何回かカチカチ、、、

で対応してください。

参考にしたブログ↓↓

［Alt］＋［Tab］キーよりも爆速なタスク切り替えショートカットキーを使いこなせ！

ホイールクリックを動画の【再生・一時停止】にすると幸せに

デイトラなんかの動画見ながらコード書いてるとき、コードエディターからカーソル全く動かさずに、こまめに動画止めながらコード書けます。

これも、デュアルディスプレイだと恩恵絶大です。

そもそも、カスタマイズボタンの多いマウスもある

ちょっと投資すると、めちゃくちゃ便利なマウスがありました。

9ボタンマウスのつもりで買ったら、7個しかボタンなかったので表記ミス？？と思ったら、それ以上に便利なマウスでした。

自分はこのマウスに、
通常時、

  • ←（左キー：学習動画の5秒戻し目的）
  • 動画の再生・一時停止
  • アプリのサイクル=「Windowsキー + Tab」
  • Hyper Shift キー（このボタンを押しながら他のボタンを押すと別の機能になる）

Hyper Shift を押した状態のボタンに、
（Hyper Shift を押しながらなので、右クリックや左クリック・ホイールスクロール上下も機能割り当てて普通に使える）

  • VS Code の行選択
  • VS Code の行削除
  • コピー＝「Ctrl + C」
  • ペースト＝「Ctrl +V」
  • 検索＝「Ctrl + F」（コードの検索でほんと頻繁に使う）
  • VS Code：Emmet のバランス（外側）
  • Page Up/Down（ホイールスクロール上下に割り当て）

をとりあえず割り当ててみました。

5ボタンマウスなら泣く泣く削っていた、中ボタンクリックもそのまま残せてますし、間違えて押すとコードが壊れるリスクのあったコピペも Hyper Shift で使えば、押し間違えないので問題なく使えます。

Figmaのデザインカンプからまとめて取り込んだ、CSSをトリミングするのも、マウスだけで完結できます。

保存＝「Ctrl + S」も頻度高いので登録する？？取り消し＝「Ctrl + Z」も便利？？

などなど、まだ、いろいろ試して迷ってる最中ですが、工夫次第でもっと便利になりそうです。

後日追記：最初気づかず使ってたのですが、ボタンのカスタマイズパターン、何パターンも名前を付けて登録しておいて、簡単に切り替えて使えます。

普段VS Codeでコーディングをする時よう、最後にコードを一気にトリミングして不要コードを消すときよう、kindleで本を読むときよう、、、

など、ほんとうに価格以上の価値のある活躍をしてくれてます。

正直、もっとボタンの数の多いマウスもあるのですが、ほんとうにゲーム目的で、遅延予防のため有線接続のものばかりでした。

あとは、口コミによるとドライバのサポートすら怪しいような中華製品とか、、、

その点こいつは、Bluetoothで、ドライバもちゃんとしてるし、ほんとに便利、、、↓

マルチモニター画面間でウインドウまるっと移動

画面大きいモニターに、ウインドウごと素早く移動させてみやすく。

生成AIは、カスタマイズして使うと一気に便利に

モニターがでかいは正義！？【デュアルモニター】はほんとに世界が変わる

自分の場合は、2024年７月現在、13.3インチと、23インチでデュアルモニターで使ってます。

13.3インチの方が、VS CodeとFigma並べてみるには小さい？？ので、27インチモニターを購入しようか迷ってます。

モニター3つ並べるのもいいですし、23インチと27インチのデュアルモニターでも、だいぶ視認性増しそう、、、

ノートPCで15インチくらいの備え付けのモニターで使ってる人も、ほとんどのノートPCで、ケーブル使えば、外付けでデュアルモニターにできます。

モニターの大きさも含めて、デュアルモニターは、誇張抜きで、ほんとうに世界が変わります。。。

僕の場合、多分、、、結局、近いうち27インチ買うと思います、、、

後日追記：結局、24インチを追加で購入して、デュアルモニターどころか、トリプルモニターになりました↓↓

二つある大きな画面で、VS Codeと作成中のサイトの開発者モードを見て、小ぶりな画面で同時にFigmaのデザインカンプも、、、

一回一回タブを切り替えてみる必要がないので、めっちゃ作業時短で快適になりました。

一応、今回自分の買ったやつ置いときますね↓↓

Chrome【開発者ツール】小ネタ

まずは基本！Web制作での基本的使い方の詳しいサイト

↓で紹介してるサイトは、ほんと早い段階で見といた方がいいです。

ショートカットキー

文字サイズ変更

VS Code の方にも書きましたが、開発者ツールでも同じショートカットが使えるので、、、

設定リセット

自分の場合、開発者ツールを日本語化したのがきっかけ？？で、動作が不安定になりました。

もしかしたら、他の設定もプログラミング学習を始めた初期のころにいじってしまってたかも、、、

なので、いったん開発者ツールをデフォルトにリセット！！

簡単にできます。

表示が崩れたときの対処法

自分の環境だと、

「Live Server」と「Perfect Pixel」と「開発者ツール」、もちろん「VS Code」なども同時進行で動かしてると、負荷がでかいせいか、頻繁に表示崩れを起こします。

そんなときの対処法↓↓

これに気づくまで、キャッシュ削除しても、拡張機能とか立ち上げなおししても、「ムキィ！！直らん！！」ってなって、めちゃくちゃ時間使いました。

「Home・End・Page Up・Page Down」普通に使えるのね、、、

開発者ツール右のコードの部分でも、左のページをレスポンシブにして表示してるところでも、ふっつ～に使えます。

結構長いこと気づかなかった、、、

マウスホイールだけだと、大きく移動するとき不便なのよね、、、

レスポンシブに、特定のwidthのデバイス登録

コードを書いて、表示確認するとき、「デザインカンプ指定の特定のwidth」の表示に頻繁に切り替えるのに、いちいちwidthの数値入力せずにサクッと変更できます。

レスポンシブ表示の時に、全体を拡大縮小

「〇％」のタブ開いた下の方にある、Auto-adjust zoom 選択して％変更で、全体を拡大縮小。

これに気づく前は、レスポンシブのwidth広くすると全体が縮小表示されて見にくかった、、、

Web制作は、おっさんの視力では厳しいのか！？と、勘違いするところでした。

Figma関連

Figmaのカンプからのコーディング、最初はあえて雑に

デザインカンプの指定通り、細かくpxひろってコード書いていっても、いざ一通り作ってPerfectPixcelの画像重ねたら、めっちゃあちこちずれてます。

意外と、デザインカンプで出てくる数値はあてにならない、、、

慣れてくると、PerfectPixel重ねた状態で、開発者ツールで微調整するのがめっちゃ楽になるので、そこから数値コピペが速いです。

僕も、学習始めた最初は、

「PerfectPixelなんて、なんて費用対効果の低いムダな努力をするんだ、、、」

と勘違いしてましたが、逆にPerfectPixelのおかげで楽ができます。

SVG画像は、自分で書き換えて加工もあり

Figmaからエクスポートした画像の色が、使いたい色と違う場合なんか、

SVGでエクスポートして、その画像コードの中の「fill」を直接使いたい色に書き換えたらあっという間、、、なんですよね、、、

これに気づかず、画像編集ソフト調べたり、結構時間使った、、、

画像などのエクスポート先フォルダ選択

ブラウザ版だと、ブラウザでダウンロードしたファイル保存先の設定に依存。

ようするに、Figmaではなく、ブラウザの設定をいじる、、、

普通にFigmaの設定だけみて「できねえのかよ、、、不便だな」とぼやいてました、、、

要素の位置微調節

この記事の中でも紹介した「VS Codeの拡張機能まとめた記事」も書いてる、コーディングを効率化？快適化？することに情熱を燃やしている？方のサイト↓↓

Figmaの拡張機能もまとめてくれてます。

主にWebデザイン関連やる人にとって便利なもの？

他にもこの方のサイト、いろいろコーディング快適にするネタ詰まってるみたいなんで、のぞいてみるといいかも？です。

デスク回り環境関連

学習などの時間計測して記録

モニターの高さ

モニターの高さは「モニターの上辺が座った時の目線と同じ高さくらい」が目安らしいです。

小型のサブモニターの位置が低い状態で、前かがみで連日長時間作業してたら、がっつり腰痛になりました。

皆さんもご注意を～

腰サポート補助イス

腰痛改善に、これ↓も買ったら、予想以上にいい感じです。

腰の後ろのS字部分をバネみたいに押してくれるので、座ってて結構気持ちいい。

モニターの高さ調節とこれで、使い始めて１週間くらいしかたってませんが、だいぶ腰痛改善してきました。

キーボードはフルサイズじゃないと多分しんどい

プログラミング関連やるなら、キーボードは安物でいいので、フルサイズじゃないといろいろ使いにくいところでてきます。

テンキーや、home、endとかもほんと頻繁に使います。

あと、日本語キーボードか、USキーボードかでも使いやすさがだいぶ違うみたいですが、自分は今のところ日本語キーボードでやってます。

正直USキーボードについては詳しくないので、気になったら調べてみてください。

ボタンのカスタマイズがごりごりできるマウス

VS Codeの行削除とか、検索、学習動画の再生・一時停止、「Windowsキー + tab」、、、などなど、

ショートカットをごりごり登録して使ってます。

CSS・JavaScript・PHP関連の小ネタまとめた記事リンク

普段、Web制作学習してて、課金しているGoogleの生成AI、Geminiにものに解説をつくってもらったのをまとめた記事↓↓

この記事がコーディングを快適にする小ネタ、なら、↓の記事はCSS・JavaScript・PHPの知識関連です。

あなたの学習の参考や、忘れかけた知識を再確認するきっかけになる？？かも？？

CSS関連の記事リンクはこちら

Web制作学習で詰まったところ、AI解説などまとめ【主にCSS関連】

JavaScript・PHP関連の記事へのリンクはこちら

Web制作学習で詰まったところ、AI解説などまとめ【JavaScript・PHP（WordPress）関連】

僕の受講中のオンラインプログラミングスクール【デイトラ】

そもそも、何を調べればいいかわからないとどうしようもない

この記事にまとめた知識は、ほぼすべて「デイトラ」で教えてもらったり、デイトラで学習していて気になって調べたものです。

独学でやってたら、何を調べていいかがわからずに、ほんと、確実に、こんな知識は得られてないと思います。

一般的なプログラミングスクールは何十万円もしますが、デイトラは10万円前後。

僕のこのブログや【X】のように、受講生の口コミをメインに拡散していて、広告料をあまり使っていないからできる価格だそうです。

デイトラ紹介記事も、過去に書いてるので、気になった人は見てみてください↓

キャリアに不安を感じている方へ！デイトラで新しいスキルを身につけ、Web業界で活躍しよう！

サイバーエージェントが運営する小学生向けプログラミングスクール
Tech Kids School【テックキッズスクール】

けっこうガチ目っぽいです↓↓

京大生中心のエンジニアによる中高生のためのプログラミング教室↓↓

僕がWeb制作を学んだデイトラ↓↓
継続的に学習する意思があって、何でも他人任せにするようなひとでなければ、圧倒的低価格で、圧倒的実力が身に付きます

前のページへのリンク

【VS Code】 関連：コーディングを快適にする小ネタ