【最強エディタ】はじめてのVisual Studio Code入門(オススメの設定・プラグイン・使い方)

VSCodeは、最強のエディタ

自分は、過去に Dreamweaver → Brackets → Atom と使っていたのですが、

昨年「Visual Studio Code」(以下、VSCode)に乗り換えた経緯があります。

使用環境

Mac
※Winの方は「Cmd」を「Ctl」に変更してください。

VSCodeの良いところ

動作が軽い

どんなエディタよりも動作が軽いのが特徴です。(自分の体感)

最初から機能満載

ATOM、Sublime Textに比べて、インストールした直後から即戦力の機能を持っています。
  • Emmet使用可能
  • VSCODEでターミナルを起動
  • 矩形選択ができる

おすすめ設定

日本語化

拡張機能>「Japanese Language Pack」>インストール

詳細設定

「Cmd + ,」または「Code」>基本設定>設定

オススメ詳細設定(setting.json)

おすすめのプラグイン

「Shift + Cmd + X」 → 拡張機能の名前を入力して検索する

開始タグ変更で、閉じタグも変更

Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

選択範囲を新規タグで囲む

htmltagwrap – Visual Studio Marketplace
タグで囲みたい文字列を選択して「Alt + W」を押す。
https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

括弧に色を付けてくれる

Bracket Pair Colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

タグ簡単入力

VS CodeでHTMLのタグを[shift+enter]で入力するエクステンション作った
https://marketplace.visualstudio.com/items?itemName=1natsu.insert-br-tag

インデントの背景色を変えて見やすくする

indent-rainbow
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

scssの整形(フォーマット)

Sass Formatter
https://marketplace.visualstudio.com/items?itemName=sasa.vscode-sass-format
コマンド:sudo gem install sass –no-user-install
キーボードショートカット:「ShiftOptionF」」

TypeScriptの整形(フォーマット)

https://qiita.com/yasu_yyy/items/70963d26309ea6ceb605
https://qiita.com/akisx/items/4b90106c7faca4965852

CSSクラスの入力補完

IntelliSense for CSS class names in HTML
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

VSCodeの使い方

移動

「Cmd + P」 ファイルのパスを記述してファイルを開く

検索

「Cmd + F」ーーーー エディタ内の検索
「Cmd + H」ーーーー エディタ内の置換
「Cmd + Shift + F」ー ファイル内の検索
「Cmd + Shift + H」ー ファイル内の置換
「F3 / Shift + F3」ーー 次の/前の検索結果にジャンプ

複数選択/マルチカーソル系

「Alt + クリック」 ーー ーカーソル追加。
「 Alt + Cmd + ↑/↓」 ー マルチカーソルを上/下に追加
「Cmd + D」  ーーー ーハイライトされた文字列を選択に追加し、マルチカーソルモードにする。
「Cmd + Shift + L」ー ーハイライトされた文字列と一致する文字列をすべて選択し、マルチカーソルモードにする。
「Alt + Shift + ドラッグ」 ー 矩形選択後、マルチカーソルモードになる。
「Esc」  ーーー ーーーーマルチカーソルを解除する。

HTMLのコード整形(フォーマット)

(全体)Shift+Option+F
(部分)Cmd+K→Cmd+F

おすすめブログ

Visual Studio Code の初期設定と最低限必要な拡張機能 – フロントエンド向け –

https://qiita.com/hi85/items/eaede5ebb509f21f27f5

vscodeおすすめ拡張

https://qiita.com/EbXpJ6bp/items/4b87a092a3d6a0ecf595

Visual Studio Code 入門~オススメ設定と拡張機能編~

https://necojackarc.hatenablog.com/entry/2017/03/16/090000

VS Code の便利なショートカットキー

https://qiita.com/12345/items/64f4372fbca041e949d0