文系大学生のためのVisual Studio Codeの設定
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 の設定はここから行えます）から［設定］を選んでください。
設定タブが開きますので、上部にある検索テキストボックスに「save」と入力してください。Editor: Format On Saveという項目がありますので、そこにチェックを入れてください（すでにチェックが入っているかもしれません）。
また、「formatter」で検索すると、Editor: Default Formatter という項目が出てきますので、その内容が「Prettier - Code formatter」になっているか確認してください。ここが「null」になっていると Prettier が動作しません。
その他、VSCode の設定
その他、以下の設定をしておくとよいでしょう。
- インデントを 2 にする
- 右端で折り返す
- ようこそページの非表示
まず、インデント とは、プログラムコードの字下げ幅です。
『文系大学生のための ◯◯ 入門』シリーズのサンプルコードでは、インデントの字下げ幅を「2」としています。
VSCode の左下の歯車マークから［設定］を選び、「tab size」で設定項目を検索して、Editor: Tab Sizeの項目の数値を 2 に変更します。
続いて、「wrap」で検索して Editor: Word Wrap を「on」にします。先頭にヒットする Diff Editor: Word Wrap ではないので注意してください。
最後に、「startup」で検索して Workbench: Startup Editor を「none」にします。これでフォルダを開く度に「ようこそ画面」が表示されなくなります。
JavaScript を学習する場合
『文系大学生のための◯◯入門』シリーズで JavaScript を学習する場合は、さらに Prettier の個別設定をしておくとサンプルコードと見た目が一致してわかりやすくなります。まず、拡張機能の一覧から Prettier を選びます。「アンインストール」の右側にある歯車アイコンをクリックし、さらに「拡張機能の設定」を押してください。
まず、1 行のコードを改行展開[2]するときの閾値（文字数）を 80 文字から 120 文字に変更します。
次に、JavaScript の文字列などを書こう引用符を二重から一重に変更します。HTML では二重引用符を使うので、コードが混ざることのある JavaScript では一重引用符を使ったほうがよいためです。
最後に、配列やオブジェクトを複数行に分けて書いたときの最後のカンマを設定を変更します。既定値では、配列などの最後の項目の後ろにもカンマが付くのですが、『文系大学生のための◯◯入門』シリーズでは付けていませんのでそれに合わせます。
Prettier の設定ファイルを使う
上記の設定は、VSCode の設定パネルを使わず、.prettierrc というファイルを所定の位置に置くことでも可能です。この方法だと VSCode に直接設定しないので、学校の PC など、VSCode の設定が毎回リセットされてしまう場合に便利です。
まず、勉強用のフォルダをまだ作っていない人はどこかに一つ作ってください。これから勉強する『文系大学生のための ◯◯ 入門』の各チャプターの作業フォルダをその下に配置していく場所になります。
次に、VSCode で新規ファイルを作成し、以下の内容をコピー＆ペーストしてください。そして、先ほど作成した勉強用フォルダに .prettierrc という名前で保存します。長いのでコピペすると良いでしょう。ファイル名の先頭のドット . を忘れないようにしてください。
{
"singleQuote": true,
"trailingComma": "none",
"printWidth": 120,
}
この設定ファイルは、勉強用フォルダよりも下に作成されたファイルやフォルダに対して有効になります。もし、特定のフォルダ（プロジェクト）では異なる設定にしたければ、そのフォルダに独自設定の .prettierrc を置いてください。
Discussion