文系大学生のためのVisual Studio Codeの設定

3 min read

本記事は OJK の『文系大学生のための ◯◯ 入門』シリーズのために用意したものです。

OJK 著の 『文系大学生のための ◯◯ 入門』シリーズ では、Visual Studio Code(VSCode)の最低限の設定として、以下の三つの拡張機能の追加を推奨しています。

  • Japanese Language Pack for VS Code
  • Live Server
  • Prettier

「Japanese Language Pack」はメニューの日本語化をするものです。これは好み次第ですが(デザイン的には英語のままのほうがいいので)、本記事は日本語化されたメニューの用語や画像を使って説明しています[1]

Live Server」は ライブプレビュー機能 といって、HTML/CSS/JavaScript を編集して保存するだけで、ブラウザを再読み込みしなくてもブラウザの画面が更新されます。
Prettier」は コードフォーマッタ といって、ファイルを保存したときなどにコードを綺麗に整形してくれます。

また、初心者のうちは全角スペースが知らずのうちに紛れ込んでうまく動作しないことも多いので、全角スペースを強調表示する拡張機能をインストールしておくとよいかもしれません。いろいろありますが、全角スペースのみを強調表示する EvilInspector を紹介しておきます。

  • EvilInspector

拡張機能のインストールと設定

VSCode の左側にあるブロックが崩れたようなアイコンを押すと、お勧めの拡張機能の一覧が表示され、上部のテキストボックスから拡張機能の検索ができます。

拡張機能のインストール

上図は Live Server を検索してインストールしたときのものです。
拡張機能がインストールされると、上図のように[無効にする][アンインストール]と表示されています。インストールされていないときは[インストール]と表示されます。

同様に、Japanese Language Pack と Prettier をインストールしてください。
必要な拡張機能をインストールしたら、一度 VSCode を再起動したほうが確実です。

Prettier はインストールするだけでなく、設定が必要です。VSCode の左下の歯車マーク(VSCode の設定はここから行えます)から[設定]を選んでください。

VSCodeの設定へのアクセス

設定タブが開きますので、上部にある検索テキストボックスに「save」と入力してください。Editor: Format On Saveという項目がありますので、そこにチェックを入れてください(すでにチェックが入っているかもしれません)。

Format on Saveの設定

また、「format」で検索すると、Editor: Default Formatter という項目が出てきますので、その内容が「esbnp.prettier-vscode」になっているか確認してください。ここが「null」になっていると Prettier が動作しません。

どうもこの[Default Formatter]が定期的に null に戻ってしまう環境があるようです。Prettier が動かないぞ…と思ったら確認してみてください(ついでに[Format On Save]も)。

その他、VSCode の設定

その他、以下の設定をしておくとよいでしょう。

  1. インデントを 2 にする
  2. 右端で折り返す
  3. ようこそページの非表示

まず、インデント とは、プログラムコードの字下げ幅です。
『文系大学生のための ◯◯ 入門』シリーズのサンプルコードでは、インデントの字下げ幅を「2」としています。

VSCode の左下の歯車マークから[設定]を選び、「tab size」で設定項目を検索して、Editor: Tab Sizeの項目の数値を 2 に変更します。

Tab Sizeの設定

続いて、「wrap」で検索して Editor: Word Wrap を「on」にします。先頭にヒットする Diff Editor: Word Wrap ではないので注意してください。

Word Wrapの設定

最後に、「startup」で検索して Workbench: Startup Editor を「none」にします。これでフォルダを開く度に「ようこそ画面」が表示されなくなります。

Startup Editor

JavaScript を学習する場合

JavaScript を学習する場合は Prettier の設定をもう一つしておきます。
まずは、勉強用のフォルダをどこかに一つ作ってください。『文系大学生のための ◯◯ 入門』の各チャプターの作業フォルダをその下に配置していく場所になります。

次に、VSCode で新規ファイルを作成し、以下の内容をコピー&ペーストしてください。そして、先ほど作成した勉強用フォルダに「.prettierrc」という名前で保存します。ファイル名の先頭のドット . を忘れないようにしてください。

.prettierrc
{
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 120,
}

この設定ファイルは、勉強用フォルダよりも下に作成されたファイルやフォルダに対して有効になります。もし、特定のフォルダ(プロジェクト)では異なる設定にしたければ、そのフォルダに独自設定の「.prettierrc」を置いてください。

なお、printWidth の項目は、1 行のコードを改行展開[2]するときの閾値(文字数)です。通常は初期設定のままで構わない(.prettierrc に記述しなくてよい)のですが、『文系大学生のための ◯◯ 入門』シリーズでは、サンプルコードを読みやすくするために 120 文字まで改行展開しないようにしています。

脚注
  1. Japanese Language Pack は VSCode を更新(アップデート)すると無効になってしまう場合があります。その場合は拡張機能のメニューから Japanese Language Pack を一度アンインストールし、続けてインストールしてから、VSCode を再起動してください。 ↩︎

  2. 改行展開というのは OJK の独自表現です。JavaScript のコードは途中で改行してもしなくても構いません。通常は途中改行しないのですが、長くなってくるとエディタから見切れてしまうので、途中改行して読みやすいように整理します。これを本記事では改行展開と呼んでいます。 ↩︎

Discussion

ログインするとコメントできます