以前から独学で簡単なプログラミングの学習はしていましたが、
フリーランスとして在宅でコーディングなどの仕事ができるようになる目的で、2024年5月から、「デイトラ
」というオンラインプログラミングスクールでWeb制作を学習開始。
その中で、学んだり調べたことを【X】に日々投稿しているので、
このページでは、主にWeb制作などで、コードエディターの「VS Code」でコードを書くのを快適にする小ネタ・投稿をまとめておきます。
こういう小ネタを知ってるかどうかで、コードを書くスピード、、、
何よりも「ムキィ！！」ってなるストレスをかなり軽減できます。
まだ、ポートフォリオは作ってませんが、オンラインサブスクサイトで独学していた以前と比べ、デイトラを始めてからめちゃくちゃレベルアップできてます。
特にVS Code、開発者ツール、マウスボタンなども含めて、
ショートカットキー関連は、すぐに導入出来て、劇的に効率が変わります。
そこだけでも目次からジャンプしてみてみてください。
これからも、調べたことなどどんどん【X】に投稿して、ここにも追記していく予定なので、
この記事が参考になった～、って方は、【X】だけでもフォローおすすめです。
この記事のネタの知識を得るきっかけの学習は、毎日↓の「デイトラ」でやってます。
【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」でセーブするだけで補完してくれます。
ただし、過信は注意↓
スニペット登録を簡単に
拡張機能いろいろあるみたいなので、お好みのもの調べてみてください。
タグ自動編集は、使いこなさないと逆に危険
キーボードショートカット
ショートカットいろいろまとめたサイト
マルチカーソル
特定の行にジャンプ
ショートカットで素早く表示文字サイズ変更
一時的に、一画面に表示するコード量を増やして見るときなんかに便利。
widthとかの「数値」を↑↓キーで1ずつ増減して微調整
Pixel perfectにサイトを作ってると、数pixel単位で、数値を微調整、、、ってのを頻繁にやります。
それがだいぶストレスフリーになります。
VS Codeのショートカットキーはカスタマイズできます
VScodeのショートカットは、
設定の「キーボードショートカット」から、好きなキーに変更できます。
ほかのショートカットと、組み合わせるキーがかぶらないようにだけ注意。
「行選択と行削除」を左手だけで押せるようにすると幸せに
行削除とか頻繁にやるので、地味に結構な時短になります。
設定
文字列の中でもスニペットを呼び出す
インデント色分けをハイコントラストに
左のエクスプローラーに表示されるファイル・フォルダの並び順
好みでいろいろ選べるので、調べてみてください。
配色テーマを変えて、コードを見やすく
カッコのペアの色分け
↓の参考ブログの記事に書いてある設定だけでなく、拡張機能でもカッコを色分けできるのいろいろあります。
お好みの方法で色分けしてください。
色分けはほぼ必須？？インデントだけじゃあペアわからん、、、
[Visual Studio 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は分けた方がいい？？
バックアップはとっといた方がいい？
アカウント同期だけでも、スニペットなどの保存にはなってるんですが、2024年、Windowsも世界的に盛大にバグったので、過信は怖い？？
別サービスにたまに飛ばしとくと安心できます。
