VSCodeが格段に使いやすくなる、おすすめ拡張機能
私が使っている VSCode のおすすめ拡張機能をまとめました。プログラミングやコーディングの効率を高めたいときに便利なもの。
エンジニア速報は Twitter の@commteで配信しています。
Swift 開発環境
Swift 開発用のエディタにする。
色付けやスニペット補完。
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"] } ],
Settings Sync
エディター設定を共有する。プラグイン設定の「Generate New Token」をクリックすると New personal access token のページに移動するので、Generate token のボタンを押して作成。番号をコピーして、コマンドパレットで sync upload を押して番号を入力。
"sync.gist": "tokenの番号", // 設定の同期 "sync.autoUpload": true, // 設定を変更したときに設定を自動アップロードする "sync.autoDownload": true, // エディターを開いたときに設定を自動ダウンロードする
Prettier
マークダウンにも対応している高速なコードフォーマット拡張機能。保存時にフォーマットすることができる。もちろん、フォーマットしたくない言語も指定できる。
// Set the default "editor.formatOnSave": false, // Enable per-language "": { "editor.formatOnSave": true }
Easy Sass
sass を自動コンパイル。フォーマットはコンパイルを圧縮するcompressedに設定して軽量化しましょう。
"easysass.formats": [ // sass コンパイルを圧縮に { "format": "compressed", "extension": ".css" } ],
PrintCode
コードを印刷する。スタイルは崩れてしまうので、綺麗に印刷したい人は PDF に変換して印刷しましょう。
Markdown PDF
Markdown をPDFに変換する。
Debugger for Chrome
JavaScript をChromeでデバッグ。
Terminal
エディター上でターミナルを扱う。
Paste Image
クリップボードにコピーした画像やスクリーンキャプチャをペーストする。
Material Icon Theme
フォルダ・ファイルにマテリアルデザインのアイコンが表示される。vscode-icons よりこちらが好み。
Todo +
todo リストを管理。
Atom Keymap configuration
Atom のキーマップ。Atom から乗り換えたい人はこれを入れるといい。
vscode-htmltagwrap
タグで囲む。
colorize
カラーコードに色を表示。
Sass
SASS コンパイル。
SFTP
ファイル転送。sftp.json に設定を記述して使う。これがあれば FTP クライアントはいらない。
Project Manager
プロジェクト管理。
Slack
メッセージやファイルを Slack に送信する。
ビジュアルエディター
VS Code をビジュアルエディターに変える拡張機能。私は使ってませんが、ビジュアルエディターにしたい人は入れるとよいでしょう。
スポンサード リンク
関連記事
- npm install エラー「Library not loaded」の対処法
- M1 Mac で homebrew が使えなかったときの対処法
- UbuntuにWordPressをインストール
- Vagrant+Virturlbox+VCCWの使い方(Mac/Windows)
- プログラマーにおすすめのATOMパッケージ
- コーディングに便利なCodepenの使い方とカスタマイズ(有料版と無料版)
- 確実に参考になる!Atomひと通りの使い方(Windows・Mac編)
- Vimの使い方
- 最高にわかるChromeデベロッパーツールの使い方(チートシート付き)
- スマートフォンサイト構築時に気をつけたいポイント集
Leave a Comment