Web制作で開発ツールとしてよく使われるVSCode。自身が普段使用しているエディタで、HTML・CSS・JSを書くとき便利なので重宝しています。
これから初めて使い始める人が、最初に入れておくことによってVSCodeを効率よく使いこなすための設定や拡張機能の紹介とダウンロードからインストールまでのやり方を紹介します。
VSCodeとは
VSCode（Visual Studio Code）とは、マイクロソフト社が無料で提供しているテキストエディタの事です。誰でも無料で利用する事が出来ます。
拡張機能が豊富で必要に応じて機能を追加し、最終的に自分好みのエディターに仕上げられます。
VSCodeをダウンロードからインストール
下記のURLにアクセスします。
・Visual Studio Codeダウンロードサイト
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
「今すぐダウンロード」をクリックし、WindowsとMacで分かれているので、自身の対応デバイスの方をクリックしてダウンロード。
セットアップアイコンをクリックして、同意画面で「同意する」にチェックして、「次へ」をクリック。インストール先の指定がありますので任意の場所を指定して「次へ」をクリックします。「デスクトップ上にアイコンを作成する」を選択して、デスクトップにショートカットの作成されていればダウンロードからインストールの流れは完了です。
VSCode初期設定
VSCodeを初めて開いた場合は、英語表記になっているので、日本語設定をします。
View→Command Paletteをクリック。
コマンドパレットに「display」と入力すると候補にConfigure Display Languageと出ますので選択。
候補からInstall Additional Languagesを選択してクリック。
インストールをクリック。
インストール後、VSCodeを再起動すると日本語表記になっています。
その後はいつでも言語は変更可能でenとjaの表示されるのでどちらかを選択。
便利機能
VSCodeで改行を削除して1行など、空白行だけ削除したりする方法です。
標準でついている機能なので覚えておくと便利な操作になります。
改行を削除する
検索＆置換を出しますctrl + h
検索に^\nを入力。
▪*（正規表現）の部分をクリックすると、改行されている箇所を検出することができます。
置換部分は空白にして右ボタンをクリックで置換を実行します。
これで全体の改行は削除されます。
改行を削除して1行にする
検索に\nを入力。
▪*（正規表現）の部分をクリックすると、改行されている箇所を検出することができます。
置換部分は空白にして右ボタンをクリックで置換を実行します。
これで全体の改行は削除されます。
拡張機能
おススメする拡張機能の紹介になります。
- Live Serverv：即時プレビュー
- zenkaku：全角スペースの確認
- JS-CSS-HTML Formatter：コードの自動整理
Live Serverv（ライブサーバー）
拡張機能で一番使用しているのが「Live Serverv」です。
HTML、CSS、JSのコードの記述がブラウザに即時反映してくれるライブプレビュー機能です。通常であれば確認作業はHTMLの保存→ブラウザの更新の工程が必要になりますが、この拡張機能のおかげで時間短縮になります。
インストール
Live Serverと入力してLive Serverを選択しインストール。
インストールが完了したら右下にある「Go Live」をクリック。
クリック後「Port：5500」になって、自身の既定のWebブラウザが起動してプレビューができるようになります。
ショートカットキー
shift + Ctrl + Pで検索を表示。
liveと入力しEnterでプレビュー出来ます。
HTML・CSS・JSは反映されますが、PHPはサーバー経由のファイルになるので使用できません。
zenkaku
コーディングあるあるで、いつの間にか全角スペースを入力してしまっているといったことがあります。HTMLやCSSなどのマークアップ言語なら動くのでまだ大丈夫ですが、プログラミング言語になってくると、半角スペースを全角スペースを一文字分でも入れてしまった場合全く動かなくなってしまいます。
・全角スペースが入ってしまったばかりに問題解決が遅れてしまいます。
- 「コードは間違ってないのになぜか動かない」
- 「コード構造が複雑で全角スペースを見つけられない」
そうならない為に、前もって全角スペースを可視化してくれる拡張機能「zenkaku」です。
インストール
zenkakuと入力してzenkakuを選択しインストール。有効にして完了です。
CSS Formatter
インデントや半角スペースなど不要なスペースを綺麗に整理整頓してくれます。
開いているCSSファイル内の全コードを一括で整理するで、GitHubなどチームでコーディングしている場合は、CSS Formatterは無効にしておきましょう。
インストール
CSS Formatterと入力してCSS Formatterを選択しインストール。
使い方
▪ショートカットキーshift + alt + fで一括整理されます。
VSCode拡張機能の保存場所
Windows版のVSCode拡張機能のファイル場所になります。
C:\Users\ユーザー名\.vscode\extensions
![【原神】刻晴超開花パーティ 夜蘭蒸発パーティ 深境螺旋12層攻略 Genshin Impact [4K] (げんしん)](https://design-pull.com/wp-content/uploads/2022/12/gensinabyssal_spiral12_20221126-320x180.jpg)
