jtk

Visual Studio Code の初期設定など

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

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

テーマ

f:id:jotaki:20181214053541p:plain

だいたい有名どころは 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 記事になります。コメントも拝借させていただきました。

settings.json を展開する

{
  "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 のと比べてどちらか使うか決めたいです。

参考

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

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

ショートカット

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

keybindings.json を展開する

[
  {
    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 の独自スニペットで設定と思います。

困っていること

日本語入力がしづらい

f:id:jotaki:20181214053621p:plain

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

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

画面分割がしづらい

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


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