VSCodeおすすめの初期設定【html・css・js 初心者編】

スポンサーリンク
スポンサーリンク


Visural Studio Codeを、初心者さんが、html・css・JavaScriptエディタとして使う時のおすすめの初期設定をまとめました。

いずれも、サクッとはじめられるように必要最低限の初期設定です。

経験値がアップしていった時には、他にも追加していけば、よいかと思います。

3つの設定場所について


VSCodeには、設定情報を保存しておく場所が3カ所ありますが、慣れないうちは、ユーザー設定 に保存していくのが、無難だと思います。

慣れてきたら、ワークスペース設定 or フォルダ設定 と進めていけばよいかと思います。

なお、設定が適用されるときには優先順位は、以下のとおりです

  1. フォルダ設定
  2. ワークスペース設定
  3. ユーザー設定

くわしくは、こちら。

VSCodeのユーザー・ワークスペース・フォルダの設定の違い、優先順位を整理
VSCodeには、ユーザー・ワークスペース・フォルダの3つの設定方法があります。が、違いや優先順位などで、頭が混乱しませんか? 少し整理してみました。

共通設定編

html・css・jsエディタとして使う時の、共通のおすすめ初期設定です。

右端で折り返す



エディタを画面の右端で折り返すには、設定の Editor: Word Wrap の値を on に変更します。

また、指定文字数で折り返すには、Editor: Word Wrap の値を wordWrapColumn にし、さらに Editor: Word Wrap Column に折り返す文字数を設定します。

くわしくは、こちら。

VSCodeエディタの行を、右端で折り返す方法
Visual Studio Codeで、メニューバー[表示] → [右端での折り返し]をやっているのに、他のファイルを開いたりすると、エディタの行を、右端で折り返していない! ということがありませんか?

なお、メニューバー[表示] → [右端での折り返し]では、開いているファイルを一時的にしか変更になりません。

半角スペース & TAB を表示



半角スペース と TAB を表示するには、Editor: Render Whitespace の値を all に変更します。

なお設定値には、以下のものがあります。

  • none:表示しない
  • boundary:単語間の単一半角スペース以外を表示する
  • selection:選択したテキストにのみ表示する(デフォルト)
  • trailing:行末尾のみ表示する
  • all:すべて表示する

くわしくは、こちら。

VSCodeで、半角スペース & TAB を表示する方法
Visual Studio Codeで、半角スペース & TAB を表示する方法の説明。なお全角スペースを表示するには、拡張機能をインストールする必要があります。

全角スペースのみを表示



全角スペースのみを(コメントも含めて)表示するには、以下の2設定をします。

  • Unicode Highlight: Ambiguous Characters のチェックをOFF
  • Unicode Highlight: Include Comments の値を true

VSCode 1.63で、全角のスペース ! [ ]などの文字が強調表示されるようになりました。ですが、全角の! [ ]も強調表示されるとジャマ…

ということで、全角のスペースのみ強調表示するには、上記の2設定をします。

くわしくは、こちら。

VSCodeで、全角スペースをハイライト表示する方法
Visual Studio Code v1.63以降では、拡張機能をインストールせずに、設定だけで全角スペースをハイライト表示できるようになりました。その方法を説明します。

インデントをTabで入力



インデントをTabで入力するには、Editor: Insert Spaces のチェックを外し、 Editor: Tab Size に、インデント数を入力します。

なお、初期設定では、半角スペースでインデントが入力されます。

くわしくは、こちら。

VSCodeで、インデントをTabで入力したい時の設定方法
Visual Studio Codeで、インデントを、(初期設定されている)半角スペースではなく、Tabで入力する時の設定方法を説明しますね。

html編

htmlエディタとして使う時のおすすめの初期設定です。

<html lang=”ja”>にする



html:5 と入力して、htmlテンプレートを作成するとき <html lang=”ja”> にするには、 Emmet : variables に 項目 lang 、値 ja を追加します。

変更しないと、 <html lang=”en”> になってしまい、 <html lang=”ja”> に修正しなければならないので、不便です。

くわしくは、こちら。

VSCodeで、html:5と入力した時、lang="en" を lang="ja" にする方法
VSCodeで、html:5 または ! と入力し、Tabキーを押して、htmlテンプレート作成するとき、lang="ja"にする方法です 。

JavaScript編

JavaScriptエディタとして使う時のおすすめの初期設定です。

{} () [] の対応範囲を、色つきの線で表示



{} () [] の対応範囲を、色つきの線(=カラーガイド)で表示するには、Guides: Bracket Pairs を、true にします。

詳しくはこちら。

VSCodeで{} () [] の対応範囲を、カラーガイドで表示する方法
Visural Studio Codeで、行が異なる位置にある {} や () や []、つまり ブラケット や 丸カッコ や 角カッコ の、ペアの対応範囲が、わからなくて、困っていませんか? Guides: Bracket Pairs を、trueにすると、カラーガイド(色つきの線)が表示され、対応範囲が見えるようになります。

設定変更項目は、青色の縦ライン


設定を変更した項目は、左側に青色の縦ラインがあります。

設定変更後、しばらくたって『あれっ? この設定項目は、初期設定の状態から変更したっけ?』というときに、便利です。

なお、変更した全ての設定項目を、初期設定へ戻す方法などは、以下の記事にまとめてあります。

VSCodeで『この設定項目は、初期設定の状態から変更したっけ?』という時に確認する方法
Visual Studio Codeで『あれっ? この設定項目は、初期設定の状態から変更したっけ?』というときはありませんか? 左側に青色の縦ラインがある項目は、初期設定の状態から変更されています。

まとめ

というわけで、今日はVSCodeを、初心者が、html・css・JavaScriptエディタとして使う時のおすすめの初期設定をまとめました。

いずれも、サクッとはじめられるように必要最低限の初期設定です。

経験値がアップしていった時には、他にも追加していけば、よいかと思います。

コメント

タイトルとURLをコピーしました