Visual Studio Codeでやっておいた方がよい設定

  • 公開日アイコン
  • 更新日アイコン
Visual Studio Codeでやっておいた方がよい設定 メイン画像

Ad Area

ユーザー設定

ファイル > ユーザー設定から設定する。

タブの設定

Tabキーを打ったときのタブ数の設定 Editor: tab size で設定する

Emmetの日本語設定

emmetでhtml:5と打ったときに展開するとデフォルトでは英語設定<html lang="en">なので、日本語<html lang="ja">になるようにする。

settings.json をクリック

{
  …(略)
  "emmet.excludeLanguages": [
    "markdown"
  ],
  "emmet.variables": {
    "lang": "ja"
  }
}

不可視文字の設定

Editor:render control characters(すべてのスペースを可視化する)にチェックを入れる。

HTMLの自動整形

検索バーに html.format.enable html.format.indentinnerhtml を入力して、チェックを入れる

拡張機能

メニューの「拡張機能」アイコンから、検索ボックスで名前を検索してインストールする。

  • Japanese Language Pack for Visual Studio Code…VS CodeのUIを日本語化する
  • zenkaku…全角を可視化
  • HTMLhint…コードを間違えたときに波線でエラーを表示する

デフォルトのターミナルをGit bashにする

デフォルトでPowershellになっているターミナルをGit bashに変更する。

検索バーに terminal.integrated.shell.windows を入力

setting.jsonで編集をクリックし、terminal.integrated.shell.windowsの設定値にGit bashのパスを入力する。

{
    ...(略)
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    ...(略)

}

Visual Studio Code v1.56 から "terminal.integrated.shell.windows" が非推奨となったため、以下に変更

{
    ...(略)
    "terminal.integrated.profiles.windows": {
        "Git Bash": {
            "path": "C:\\Program Files\\Git\\bin\\bash.exe"
        }
    },
    "terminal.integrated.defaultProfile.windows": "Git Bash",
    ...(略)

Ad Area