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を入力。
▪*（正規表現）の部分をクリックすると、改行されている箇所を検出することができます。
置換部分は空白にして右ボタンをクリックで置換を実行します。
これで全体の改行は削除されます。
▪徹底解説Visual Studio Code
テキストエディタとして人気を集めている「Visual Studio Code(VS Code)」について、使い方の基礎から応用テクニックまで幅広く解説しています。
Visual Studio Codeをすぐに使いこなせる便利な拡張機能を紹介するだけでなく、プラグインの開発方法までも掲載しており、これからプログラミングを始める人も、プログラミング経験はあるがVisual Studio Codeに触れたことのない人も、必読の1冊です!
拡張機能
おススメする拡張機能の紹介になります。
- 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で一括整理されます。
▪Visual Studio Code実践ガイド–最新コードエディタを使い倒すテクニック
基本と意外と知らない基本機能からカスタマイズまで。そして拡張機能開発までを扱うVisual Studio Code解説書の決定版です。
VSCode拡張機能の保存場所
Windows版のVSCode拡張機能のファイル場所になります。
C:\Users\ユーザー名\.vscode\extensions↓下記本はHTML&CSSとWebデザインが 1冊できちんと身につく本です。
▪HTML&CSSとWebデザインが 1冊できちんと身につく本
Web制作の基礎言語であるHTMLやCSSの書き方だけでなく、多くのWebサイトが採用している4つのレイアウト手法を学ぶことで、1冊を読み終えると各言語の知識とWebデザインの基礎が身につく作りとなっています。学習用ではない「現場で役に立つ」実践的なテクニックを数多く盛り込まれています。
↓初心者から抜け出すために必要な知識を学びたい方ようです。
▪プロの「引き出し」を増やす HTML+CSSコーディングの強化書
HTML・CSSの基本をマスターして初心者を脱して、コーダー/マークアップエンジニアとして制作現場でバリバリ活躍する力をつけたい。そんな方に向けた本です。
