VSCodeが格段に使いやすくなる、おすすめ拡張機能

• 作成：2019/05/20
• 更新：2019/05/20
• 開発環境 >

私が使っている VSCode のおすすめ拡張機能をまとめました。プログラミングやコーディングの効率を高めたいときに便利なもの。

エンジニア速報は Twitter の@commteで配信しています。

Swift 開発環境

Swift 開発用のエディタにする。

NSHipster

色付けやスニペット補完。

Swift Language

VS CodeVim

Vim 化させる拡張機能。Atom や VSCode など次々と新しいエディタが出てきてショートカットキーを覚えるのが億劫な人は、Vim化する拡張機能を入れて Vim のキーバインドを使うようにすれば、新しいエディタのキーバインドに振り回されることはなくなるでしょう。素早く打てるようにエスケープは jj に設定しておくとよし。

"vim.insertModeKeyBindings": [
// vim モード：jj でエスケープする
{
"before": ["j", "j"],
"after": ["<Esc>"]
}
],
"vim.normalModeKeyBindingsNonRecursive": [
// vim モード：j を gj に変更
{
"before": ["j"],
"after": ["g", "j"]
}
],

Vim

Settings Sync

エディター設定を共有する。プラグイン設定の「Generate New Token」をクリックすると New personal access token のページに移動するので、Generate token のボタンを押して作成。番号をコピーして、コマンドパレットで sync upload を押して番号を入力。

  "sync.gist": "tokenの番号", // 設定の同期
  "sync.autoUpload": true, // 設定を変更したときに設定を自動アップロードする
  "sync.autoDownload": true, // エディターを開いたときに設定を自動ダウンロードする

Settings Sync

Prettier

マークダウンにも対応している高速なコードフォーマット拡張機能。保存時にフォーマットすることができる。もちろん、フォーマットしたくない言語も指定できる。

// Set the default
"editor.formatOnSave": false,
// Enable per-language
"": {
"editor.formatOnSave": true
}

Prettier

Easy Sass

sass を自動コンパイル。フォーマットはコンパイルを圧縮するcompressedに設定して軽量化しましょう。

  "easysass.formats": [
    // sass コンパイルを圧縮に
    {
      "format": "compressed",
      "extension": ".css"
    }
  ],

Easy Sass

PrintCode

コードを印刷する。スタイルは崩れてしまうので、綺麗に印刷したい人は PDF に変換して印刷しましょう。

PrintCode

Markdown PDF

Markdown をPDFに変換する。

Markdown PDF

Debugger for Chrome

JavaScript をChromeでデバッグ。

Debugger for Chrome

Terminal

エディター上でターミナルを扱う。

Terminal

Paste Image

クリップボードにコピーした画像やスクリーンキャプチャをペーストする。

Paste Image

Material Icon Theme

フォルダ・ファイルにマテリアルデザインのアイコンが表示される。vscode-icons よりこちらが好み。

Material Icon Theme

vscode-icons

Todo +

todo リストを管理。

Todo Plus

Atom Keymap configuration

Atom のキーマップ。Atom から乗り換えたい人はこれを入れるといい。

Atom Keymap

vscode-htmltagwrap

タグで囲む。

htmltagwrap

colorize

カラーコードに色を表示。

colorize

Sass

SASS コンパイル。

Sass

SFTP

ファイル転送。sftp.json に設定を記述して使う。これがあれば FTP クライアントはいらない。

SFTP

Project Manager

プロジェクト管理。

Project Manager

Slack

メッセージやファイルを Slack に送信する。

Slack

ビジュアルエディター

VS Code をビジュアルエディターに変える拡張機能。私は使ってませんが、ビジュアルエディターにしたい人は入れるとよいでしょう。

Gimli