Visual Studio Code の初期設定など

Sublime Text 2 のときから 5 年ほど使用していましたが、空いたタイミングで移行しました。 まだ慣れない所、設定できていない所などありますが、移行メモを残しておきます。

環境：Mac 職種：フロントエンドエンジニア（主に HTML/CSS を書きます。）

テーマ

だいたい有名どころは Sublime Text と同一のテーマが配布されているようです。 自分は Spacegray が見慣れているので vscode でもこちらにしました。

vscodethemes のページからプレビュー見ながら人気のテーマも選べます。 その他、有名どころはコリスさんの記事 Visual Studio Code で見やすいテーマファイルのまとめ も参考にしました。

UI のパーツひとつひとつ設定できるみたいですが、そこまではこだわって設定はしていません。 Visual Studio Code Theme Color Reference

settings.json

基本的にはデフォルトで vscode 側の設定があり、そこから上書きしたい場合はユーザー設定 or ワークスペースごとに変更するという形のようです。

設定方法は 「cmd」+「,」 で Settings ファイルを開いて編集画面から編集するか、右上の「・・・」から「settings.json を開く」を選択して json を追記します。 編集画面から編集するものに関しては、一度手を入れてデフォルト地に戻しても、json 上では設定値としては残ってしまうようです。 悩み中でこれからいじるかもしれないものは、デフォルト値の設定項目が入っています。

主に参考にしたのは下記の 3 記事になります。コメントも拝借させていただきました。

• Visual Studio Code の初期設定と最低限必要な拡張機能 - フロントエンド向け - - Qiita
• 今日からはじめる Visual Studio Code 設定 - Qiita
• 今日から Unity + Visual Studio Code を用いた快適な開発生活(随時更新中) - Qiita

{
  "breadcrumbs.enabled": true, // 開いているファイルのパンくず（パス）の表示
  "editor.formatOnPaste": true, // ペースト時に自動でフォーマット
  "editor.formatOnSave": true, // ファイル保存時に自動でフォーマット
  "editor.formatOnType": true, // 入力した行を自動でフォーマット
  "editor.cursorBlinking": "smooth", // カーソルがにゅるっと点滅する
  "editor.fontFamily": "Source Han Code JP", // フォントファミリー
  "editor.fontSize": 13,
  "editor.multiCursorModifier": "ctrlCmd", // マルチカーソルのショートカットキー
  "editor.renderWhitespace": "all", // 半角スペースを常に表示
  "editor.snippetSuggestions": "top", // Emmet などのスニペット候補を優先して表示
  "editor.scrollBeyondLastLine": true, // エディタで最後の行を超えてスクロールを行うか。
  "editor.showFoldingControls": "always",
  "editor.tabSize": 2, // タブのサイズ変更
  "editor.wordWrap": "on", // エディターの幅で折り返し
  "editor.wordSeparators": "./\\()\"':,.;<>~!@#%^&*|+=[]{}`~?", // 選択単語の区切り文字
  "editor.minimap.enabled": false, // ミニマップの表示
  "extensions.autoUpdate": true, // 拡張機能を自動更新
  "emmet.showSuggestionsAsSnippets": true, // Emmet の候補を表示
  "emmet.triggerExpansionOnTab": true, // TAB キーで Emmet を展開できるようにする
  "emmet.variables": { "lang": "ja" }, // Emmet で展開される HTML の言語を変更
  "files.insertFinalNewline": true, // ファイルの保存時に末尾を改行
  "files.trimFinalNewlines": true, // ファイルの保存時に最終行以降をトリミング
  "files.trimTrailingWhitespace": true, // ファイルの保存時に行末の空白をトリミング
  "[markdown]": { "files.trimTrailingWhitespace": false }, // Markdown のファイルは行末の空白をトリミングしない
  "files.encoding": "utf8", // ファイルの読み取り/書き込みで使用する規定の文字エンコーディング
  "sftp.debug": true, // 拡張機能 SFTP設定
  "window.closeWhenEmpty": true, // 最後のエディタを閉じたときに、VS Code 自体も自動的に閉じる
  "window.openFilesInNewWindow": "off", // 再起動時に開いていたウインドウをすべて復元する
  "window.title": "${activeEditorMedium}${separator}${rootName}", // ウインドウ上部に表示する文字列の設定
  "workbench.statusBar.feedback.visible": false, // 下部ステータスバーのTwitterのフィードバックの非表示
  "workbench.colorTheme": "Spacegray Ocean Dark", // テーマ
  "workbench.startupEditor": "none", // Welcome Page を表示しない
  "workbench.editor.labelFormat": "short", // タブに表示する文字列の設定
  "workbench.editor.tabSizing": "shrink" // タブの表示設定
}

全部について書くと長くなるので、3 つだけピックアップします。

マルチカーソルのショートカットキー変更

"editor.multiCursorModifier": "ctrlCmd"

vscode でのデフォルトが「option」になっているので、Sublime Text で「cmd」にしている人は必要と思います。

選択単語の区切り文字

"editor.wordSeparators": "./\\()\"':,.;<>~!@#%^&*|+=[]{}`~?"

自分の好みとしてハイフンも入ってたほうがやりやすいのでハイフンを追加しています。

TAB キーで Emmet を展開できるようにする

"emmet.triggerExpansionOnTab": true

もともと vscode には Emmet がインストールされていて、.html ファイルを編集すると使用可能なのですが、Tab で展開したいときは上記を追記 or 設定する必要があります。

参考 vscode で Emmet が Tab(ショートカットキー)で動かない人へ - Qiita

拡張機能

入れたものを箇条書きしておきます。 一気に入れたのでまだ使えていない or 機能を把握できていないものもあります。

Auto Close Tag

自動的に閉じタグを補完する "auto-close-tag.SublimeText3Mode": true とすると</とタイプした際に自動で補完します。

Auto Rename Tag

例えば、<h1>タイトル</h1> というテキストがある場合、 開始タグの<h1>を<p>に変更すると、閉じタグの</h1>も</p>に自動的にリネームする

Auto-Open Markdown Preview

.md ファイルを開いた際に自動的にプレビュー画面を分割して表示する

Bracket Pair Colorizer 2

対応するカッコに対してそれぞれ別色をつける

HTML CSS Support

CSS の編集の際に class 名や ID 名の補完を行う

Japanese Language Pack for Visual Studio Code

vscode を日本語にローカライズする

JavaScript (ES6) code snippets

JavaScript (ES6) の入力補完をする

Live Server

ローカルサーバーを立ち上げる。まだ使えていないので webpack のと比べてどちらか使うか決めたいです。

参考

• VS Code：ライブリロード機能を備えた簡易ローカルサーバーを起動できる拡張機能「Live Server」 | NxWorld
• 自動リロードするローカル Web サーバーを起動する方法 | Hypertext Candy

Markdown Preview Github Styling

GitHub の.md ファイル表示のような見た目にプレビューをスタイリングする

markdownlint

.md ファイルの lint 機能

Partial Diff

コード選択して右クリックから差分を表示する。複数テキスト選択でもクリップボードでも可能。

Path Intellisense

ファイルのパス補完をする link src など

Prettier - Code formatter

コードの整形。settings.json に "editor.formatOnSave": true で保存時自動整形になる。

Sass

Sass のシンタックスハイライト、自動補完、スニペット

sftp

vscode 上で SFTP のサーバーアップロード。sftp.json への設定で保存時自動アップロードなども可能。

Trailing Spaces

半角スペースを赤色で明示する。

vscode-input-sequence

連番の入力補助。 マルチカーソル状態で「option」+「cmd」+「0」でパネル表示。 連番のフォーマット（「1」や「01」）を入力すると「1/2/3...」もしくは「01/02/03...」のように入力されます。 Sublime Text の InputSequence と同じ感じです。

Vue 2 Snippets

Vue.js のスニペット。

WordPress Snippet

WordPress のテンプレートタグなどのスニペット。

zenkaku

全角スペースを白半透明色で明示する。

ショートカット

ファイルのタブの動きだけでほかはデフォルトにしています。

[
  {
    key: "ctrl+shift+tab",
    command: "workbench.action.previousEditor"
  },
  {
    key: "ctrl+pageup",
    command: "-workbench.action.previousEditor"
  },
  {
    key: "ctrl+tab",
    command: "workbench.action.nextEditor"
  },
  {
    key: "ctrl+pagedown",
    command: "-workbench.action.nextEditor"
  }
];

スニペット

こちらは未設定なのでこれからですが、Dash 連携とも悩みますが、vscode の独自スニペットで設定と思います。

• 独自のスニペットを作成 | 非公式 - Visual Studio Code Docs
• Visual Studio Code で、ユーザー定義スニペットで楽をする - Qiita
• Visual Studio Code ユーザー スニペットの使い方まとめ │ Web-Guided – web 制作の現場で使えるカモしれない備忘録

困っていること

日本語入力がしづらい

Google 日本語入力の IME を ON にしている場合、サジェストが文字にかぶってしまうのでかなり打ちづらいです。 こちらの issueにも上がっていますが、現状ですと過去参照とリアルタイムをオフにしないといけなそうで、結局見づらいと思いながらも使っています。

また日本語で文字を打ち間違えた際にバックスペース連打すると、半角スペースが空いてしまうのがデフォルト（？）のようで、そこが慣れていないです。

画面分割がしづらい

自動で画面分割になったりするのは良いのですが、「option」+「cmd」+「2」で同じファイルが両画面に表示されたり、ただ均等にしたいだけなのに 3 分割になってしまうというのは、 ショートカットキー変更すべきかこちらに慣れるべきか迷っているところです。

ほかは今の所満足です。細かい所で気になると思いますが、そのうち慣れそうです。