【JavaScript】JavaScript開発に便利なエディタ設定（VSCode）

javascript-icon JavaScript
2022.05.26

こんにちは、かつコーチです。

前回はconsole.logを使ったデバッグの基本を解説しました。

入門編の最後となる今回は、JavaScriptを書くうえで定番のエディタ「VSCode（Visual Studio Code）」の便利な設定を紹介します。

エディタの設定を整えるだけで、ミスに気づくスピードが上がり、学習効率も大きく変わってきます。

VSCodeとは？

JavaScript開発の定番エディタ

VSCode（Visual Studio Code）は、Microsoftが無料で提供しているソースコードエディタです。

軽量で動作が速く、拡張機能が豊富なことから、JavaScriptに限らず幅広い言語の開発現場で標準的に使われています。

公式サイト（code.visualstudio.com）からダウンロードするだけで、無料ですぐに使い始められます。

なぜ最初にエディタ設定を整えるべきなのか

私が初心者だった頃、インストールしたままの初期設定でずっとコードを書いていました。

しばらくして拡張機能を入れてみたところ、それまで気づかなかった文法ミスが次々と赤い波線で表示されるようになり、「今まで自分で気づけていなかったミスがこんなにあったのか」と驚いた経験があります。

エディタの設定は、後回しにしがちですが、最初に整えておくほど学習効率への恩恵が大きい部分です。

最低限入れておきたい拡張機能

ESLint：文法・構文のミスを自動チェック

ESLintは、JavaScriptの文法ミスやコーディングルール違反を自動で検出してくれる拡張機能です。

VSCodeの拡張機能タブで「ESLint」と検索し、Microsoft公式のものをインストールします。

インストール後、コードにミスがあると赤い波線が表示されるようになり、保存前に気づけるようになります。

// ESLintを入れていると、こういったミスに波線で気づける
consle.log("スペルミス"); // console の綴りが間違っている

Prettier：コードの見た目を自動整形

Prettierは、インデントや改行、クォーテーションの種類などを自動で統一してくれる拡張機能です。

チーム開発では特に重要ですが、個人学習の段階でも「見やすいコード」を自然に書けるようになるので、早めに導入しておく価値があります。

保存時に自動整形されるよう設定しておくのがおすすめです。

保存時に自動整形する設定

settings.jsonでの設定方法

VSCodeでは、Cmd/Ctrl + ,で設定画面を開けますが、細かい設定はsettings.jsonを直接編集したほうが早い場合もあります。

コマンドパレット（Cmd/Ctrl + Shift + P）で「Preferences: Open User Settings (JSON)」と入力すると開けます。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}
  • editor.formatOnSave：ファイル保存時に自動整形する
  • editor.defaultFormatter：整形にPrettierを使うよう指定する
  • editor.codeActionsOnSave：保存時にESLintで直せるミスを自動修正する

この設定を入れておくと、保存するだけでコードが整うようになり、インデントのズレなどを手作業で直す手間がなくなります。

つまずきやすいポイント：全角スペースと文字コードのミス

かつコーチが実際にハマった原因

私が初心者の頃、日本語でコメントを書いていて、コードがまったく動かないというトラブルに遭遇したことがあります。

❌ Before：気づかないうちに全角スペースが混入している

function greet(name) {
  console.log("こんにちは、" + name +　"さん"); // 「+」の後に全角スペースが混入
}

greet("かつコーチ");

見た目上は普通のコードに見えるのですが、実行すると次のようなエラーが出て動きません。

Uncaught SyntaxError: Invalid or unexpected token

原因は、+の後ろに紛れ込んでいた全角スペースでした。

日本語入力に切り替えたまま何気なく空白を入力すると、見た目では半角スペースとほとんど区別がつかないため、エラーの原因になかなか気づけませんでした。

✅ After：全角文字を可視化する拡張機能を入れる

この問題を防ぐには、「Highlight Trailing White Spaces」や「zenkaku」といった、全角スペースを可視化してくれる拡張機能を導入するのが効果的です。

導入後は、全角スペースが背景色付きでハイライト表示されるようになり、目視ですぐに気づけるようになります。

function greet(name) {
  console.log("こんにちは、" + name + "さん"); // 半角スペースのみで統一
}

greet("かつコーチ");

console.log("結果: " + name)のように動作確認をしながら、コード中に紛れ込んだ全角文字がないかを疑う癖をつけておくと、同じトラブルを避けやすくなります。

効率アップに役立つそのほかの設定・拡張機能

行末の自動保存とファイル監視

files.autoSaveをafterDelayに設定しておくと、一定時間ごとに自動保存されるようになり、保存し忘れによる「変更が反映されない」というトラブルを防げます。

{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

括弧の対応関係を見やすくする

コードが複雑になってくると、{ }や( )の対応関係が分かりにくくなってきます。

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true
}

この設定はVSCodeの標準機能として組み込まれているため、拡張機能を追加しなくても、設定を有効にするだけで対応する括弧が色分け表示されるようになります。

括弧の閉じ忘れによるSyntaxErrorに気づきやすくなるので、早い段階で有効にしておくことをおすすめします。

Live Server：HTMLの変更をリアルタイム確認

Live Serverは、HTMLファイルを保存するたびに、ブラウザの表示を自動でリロードしてくれる拡張機能です。

インストール後、HTMLファイルを右クリックして「Open with Live Server」を選ぶだけで使えます。

毎回手動でブラウザを再読み込みする手間がなくなるので、前回・前々回で扱った<script>タグの動作確認をするときにも重宝します。

まとめ

この記事のポイント

  • VSCodeは無料で使える、JavaScript開発の定番エディタ
  • ESLintとPrettierを入れることで、ミスの発見と見た目の統一を自動化できる
  • settings.jsonで保存時の自動整形・自動修正を設定しておくと効率が上がる
  • 全角スペースの混入は見た目で気づきにくいため、可視化する拡張機能で予防する
  • 括弧の対応関係の色分けやLive Serverも、初心者のうちから使う価値が高い

次に読むべき記事

環境が整ったところで、次はいよいよJavaScriptの基本文法に入っていきます。

まずは、コードを書くうえで欠かせない「変数」の宣言方法から見ていきましょう。

→ 次の記事：変数の宣言：let・const・varの違い

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