terutika.com

神エディターVisual Studio Code!WEB制作者のためのおすすめ設定はこれ

神エディターVisual Studio Code!WEB制作者のためのおすすめ設定はこれ

2020-09-23

エディターってなんだ?とりあえず入れたけど使い方がまったくわからない、、

そんな方向けに僕おすすめのエディター Visual Studio Code の初期設定から使い方までを画像付きで解説します! 僕は現在WEB制作のコーダーとして Visual Studio Code を実際に使用してコードを書いています。 非常に使いやすくおすすめです!
僕が実際にコードを書いている経験をもとに「これは便利だ!」と思った設定を紹介します。
自分に当てはまるものだけで構いませんのでマネしてみてください!

Visual Studio Code の初期設定

インストールはもう済んでるものとして進んでいきます。

まだインストールしていない方はこちらの記事で紹介しているのでご覧ください。

 

初期設定からしていきましょう。ついてきてください!

Flile > Preferences >Settungsの順に進みます。

Auto save  off→afterDelay オートセーブの設定です。afterDelayにすることで変更を加えた後に自動で保存してくれるため、保存忘れがなくなります。絶対に設定しておきましょう。

Tab Size  4→2

Tabサイズの変更です。僕は4だと大きすぎてコードが見にくいなと感じましたので2にしています。

Word Wrap off→on

折り返し機能有効化です。onにしておくことで長いコードを書いても自動で折り返して表示範囲に収めてくれます。

Visual Studio Codeの使い方

設定はとりあえずやったけど、、どうやって使えばいいの?

今回はWEB制作向けということでHTMLを書いて、そのコードをウィンドウに表示させてみましょう!

まずはデスクトップフォルダーを作成します。
今回は「first」という名前で作成しました。

Open Folder」で先ほど作ったフォルダーを選択し、開きます。

画像の赤丸の箇所をクリックし、HTMLファイルを作成します。
今回は「index.html」というファイルを作成してみましょう。 

作成出来たら「index.html」ファイルにhtmlを記述してみましょう。

次にブラウザを開き、「index.html」の赤丸の箇所をブラウザにドラッグアンドドロップしてみましょう。

うまく表示されたでしょうか?
今後はこのようにhtmlをブラウザに表示しながら作業していくことになります!

あわせてデベロッパーツールの使い方も勉強しておくといいでしょう。

最後に

今回はVisual Studio Codeのおすすめ設定や使い方を紹介しました。

今後は使いながらご自身の開発する環境に応じて設定やプラグインを模索していってください!
ここを甘く見ている人は仕事ができないと僕は思います。

たったワンクリック分のタイムロスですが、ここをしっかり極められる人とおろそかにする人とでは業務において結果に差が生まれるでしょう。
自分の業務1つ1つに効率を求め、少しでも時給をあげる意識で上を目指しましょう!