VSCode設定まとめ｜Python・インデント・Emmet・Git連携とエラー対処

はじめに

VSCodeの設定について、これまで個別に書いてきたメモを1本にまとめ直しました。

Python環境の準備から、言語ごとのインデント設定、Emmet、Git連携、環境移行、そして詰まりやすいエラー2つまでを順番に扱います。上から読めばひととおり設定が終わる構成にしてあります。

キーバインドは Windows / Linux 表記です。macOSの場合は Ctrl を Cmd に読み替えてください。

Python環境の設定

公式拡張機能を入れる

Ctrl + Shift + X で拡張機能タブを開き、検索バーから「python」を探してインストールします。

まずこれを入れないと、以降のインタプリタ選択や補完が出てきません。

インタプリタを選択する

Ctrl + Shift + P でコマンドパレットを開き、「Python: Select Interpreter」を選びます。

一覧から使いたいPythonを選べば完了です。プロジェクトごとに仮想環境を切っている場合は、ここで対象の仮想環境を選び直します。設定がうまく効かないときは、たいていここがずれています。

カッコを自動補完させる

Ctrl + , で設定を開き、拡張機能 > Python Configuration > Auto Complete: Add Brackets にチェックを入れます。

関数名を補完したときに () まで一緒に入ってくれます。

エディタ上でJupyterのセルを使う

.py ファイルの中に次の1行を書くと、そこがJupyterのセルとして扱われます。

# %%

セル単位で実行できるので、pandasでデータをいじりながら書くときに便利です。ノートブックを別ファイルで管理しなくて済みます。

インデント幅を言語ごとに変える

HTMLは2、Pythonは4、というように言語ごとに変えたい場合の設定です。

Ctrl + Shift + P で「Preferences: Configure language specific settings」と入力
設定を変えたい言語を選択
開いた settings.json に editor.tabSize を書く

{
  "[html]": {
    "editor.tabSize": 2
  },
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[python]": {
    "editor.tabSize": 4
  }
}

言語ごとの設定は、全体設定（editor.tabSize）より優先されます。プロジェクトによって流儀が違う場合は、ワークスペースの .vscode/settings.json に同じ書き方で置けば、そのプロジェクトの中だけで効きます。

HTMLの雛形とEmmet

雛形を一瞬で作る

HTMLファイル上で ! と入力して Tab を1回押すと、雛形が展開されます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body></body>
</html>

雛形の lang を ja にする

ただし初期設定では lang="en" になります。日本語のページを書くことが多いなら、変えておくと毎回直す手間がなくなります。

設定（Ctrl + ,）から拡張機能タブのEmmetを開き、settings.json で編集します。

VSCodeの設定画面。拡張機能タブのEmmet設定を settings.json で開いているところ

以下を足します。

"emmet.variables": {
  "lang": "ja"
}

これ以降、! で展開される雛形は lang="ja" になります。

よく使うショートカット

操作	キー
インデントを増やす	`Ctrl + ]`
インデントを減らす	`Ctrl + [`
一括コメントアウト	`Ctrl + /`
コマンドパレット	`Ctrl + Shift + P`
設定を開く	`Ctrl + ,`
拡張機能タブ	`Ctrl + Shift + X`

複数行を選択してから Ctrl + / を押せば、まとめてコメントアウトできます。コメント記号は開いているファイルの言語に合わせて切り替わります。

GitHubにプッシュするまで

ターミナル側の作業

管理したいフォルダ直下でローカルリポジトリを作ります。

$ git init

ユーザ情報の設定は初回のみです。

$ git config --global user.name "ユーザ名"
$ git config --global user.email メールアドレス

# 登録情報の確認
$ git config -l

VSCode側の作業

Ctrl + Shift + P から「git add remote」と入力
「Git: リモートの追加」でGitHubのリポジトリ情報を入力
ソース管理画面でコミット
ソース管理からプッシュ先を選んでプッシュ

途中でユーザ名とパスワードの入力を求められます。

バージョン管理から外す

管理フォルダ直下に .gitignore を作り、除外したいものを書きます。ここに書いた設定は、それ以下のフォルダすべてに適用されます。

# 特定の拡張子を除外
*.pyc

# 特定のフォルダの中身をすべて除外
folder_name/

Ubuntuで設定を移行する

環境を作り直したときは、以下2箇所のフォルダを新しい環境にコピーすれば戻せます。

パス	中身
`~/.vscode`	プラグイン
`~/.config/Code/User`	基本設定、キーコンフィグ

複数マシンを行き来するなら、VSCode本体のSettings Sync（歯車アイコン > 設定の同期をオンにする）を使うほうが手間は少ないです。手元で完結させたい場合や、一度きりの移行ならフォルダコピーで十分です。

つまずきやすいエラー2つ

「この大規模なワークスペース内のファイル変更を監視できません」

Linux上で大きめのリポジトリを開くと出ます。inotifyの監視上限にぶつかっているのが原因です。

/etc/sysctl.conf を開いて、

$ sudo vim /etc/sysctl.conf

末尾に以下を追加して保存します。

fs.inotify.max_user_watches=524288

設定を反映させます。

$ sudo sysctl -p

これで再起動後も上限が維持されます。

`terminal.integrated.shell.windows` が非推奨

次の警告が出るケースです。

これは推奨されていません。既定のシェルを構成するための新しい推奨方法は、#terminal.integrated.profiles.windows# にターミナルプロファイルを作成し、そのプロファイル名を #terminal.integrated.defaultProfile.windows# の既定値として設定することです。

settings.json を、プロファイル方式に書き換えます。

// これをコメントアウトもしくは削除
// "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",

// 新しく足す設定
"terminal.integrated.defaultProfile.windows": "Command Prompt",
"terminal.integrated.profiles.windows": {
  "PowerShell": {
    "source": "PowerShell",
    "icon": "terminal-powershell"
  },
  "Command Prompt": {
    "path": [
      "${env:windir}\\Sysnative\\cmd.exe",
      "${env:windir}\\System32\\cmd.exe"
    ],
    "icon": "terminal-cmd"
  },
  "Git Bash": {
    "source": "Git Bash"
  }
}

シェルを1つ指定する形式から、複数のプロファイルを定義して既定を選ぶ形式に変わった、と考えると分かりやすいです。

おわりに

VSCodeの設定は、一度決めてしまえばあとは settings.json を持ち回るだけで済みます。

環境を作り直すたびに調べ直していたので、この記事にまとめました。同じところで止まった方の役に立てば幸いです。

関連記事

この記事を書いた人