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

2022 1/03

2019年7月17日 2022年1月3日

URLをコピーしました！

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

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

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

VSCodeのインストール手順

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

Documentation for Visual Studio Code

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

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

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

VSCodeの日本語化

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

オレンジ枠のボタンをクリック
水色枠のボックスにJapanese と入力
Japanese Language Pack for Visual Studio Code を選択
赤枠のインストールボタンをクリック

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

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

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

VSCodeの初期設定

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

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

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

設定ファイル【コピペ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",
  },
}