【VSCode】インストールから初期設定の方法 [Mac]

vscode

こんにちは。菜笑[なえ] (@nae310_)です。

今回はVisual Studio Code(VSCode) のインストールから初期設定までについての備忘録です。
以下の内容で書いていきます。

  • インストール手順
  • 日本語化の方法
  • 初期設定方法
  • おわりに

VSCodeのインストール手順

こちらにアクセスすると自動的にダウンロードが始まります。

Documentation for Visual Studio Code

もし始まらない場合はdirect download link. をクリックしてみてください。

VSCodeのインストール手順

そして、ダウンロードされたzipファイルをダブルクリックで解凍します。

解凍されたアプリをアプリケーションフォルダに移動してください。

VSCodeのインストール手順

VSCodeの日本語化

VSCodeは最初英語で表示されてると思うので、日本語で使えるようにしていきます。

  1. オレンジ枠のボタンをクリック
  2. 水色枠のボックスにJapanese と入力
  3. Japanese Language Pack for Visual Studio Code を選択
  4. 赤枠のインストールボタンをクリック
VSCodeの日本語化

もしこれで反映されなければ、VSCodeを再起動してみてください。

それでもダメな場合は以下を実行してください。

  1. キーボードで⌘+Shift+P を押す
  2. Configure Display Language と入力しreturn を押す
  3. ja を選択
  4. 再起動

VSCodeの初期設定

VSCodeには設定できる項目がたくさんあります。
ただ、その全ての意味を調べながら設定していくと、とてつもなく時間がかかってしまいます。

なので初期設定として、以下の手順で最低限の設定だけ行なっていきましょう。

  1. キーボードで⌘+Shift+P を押す
  2. Open Settings (JSON) と入力しreturn を押す
  3. 以下の設定ファイルの内容を貼り付ける
  4. HTML, CSS, Railsを使わない場合は、それぞれ不要な部分を削除する
  5. 保存

設定ファイル【コピペOK】

{
  // エディターでスペースを表示するかどうか
  "editor.renderWhitespace": "all",
  // ファイル保存時に末尾の空白をトリミング
  "files.trimTrailingWhitespace": true,
  // タブサイズ (スペース数)
  "editor.tabSize": 2,
  // 行の折り返し方法
  "editor.wordWrap": "on",
  // ファイル保存時に最終行に空行を挿入
  "files.insertFinalNewline": true,
  // ファイル保存時に最終行以降の空行をトリミング
  "files.trimFinalNewlines": true,
  // 制御文字の表示
  "editor.renderControlCharacters": true,
  // activityBarの表示
  "workbench.activityBar.visible": true,
  // 下部のstatusBarの表示
  "workbench.statusBar.visible": true,

  // ↓ HTML, CSSを使わない場合は削除
  // Emmet候補をスニペットに表示
  "emmet.showSuggestionsAsSnippets": true,
  // TabキーでEmmet展開
  "emmet.triggerExpansionOnTab": true,
  // Emmet のスニペットで使用される変数
  "emmet.variables": {
    "lang": "ja" // HTMLの言語
  },

  // ↓ Railsを使わない場合は削除
  // Emmetの言語の紐付け
  "emmet.includeLanguages": {
    "erb": "html",
    "html.erb": "html",
  },
}

環境

  • macOS Mojave 10.14.5
  • VSCode バージョン1.36.1

おわりに

Visual Studio Code(VSCode) のインストール方法から初期設定の方法までを解説しました。

VSCodeはこのほかにもいろんな設定ができます。
便利な拡張機能を入れることもできますし、配色を好きな雰囲気に変えることもできます。

後日また記事にしていこうと思いますが、VSCodeの利用者数はとても多いので、わからないことがあってもすぐに情報が見つかるはずです。

自分でいろいろと調べてみることも勉強になるので、まずはぜひ調べてみてください!

SNS

Twitter:@nae310_
Instagram:310nae