WEB系エンジニアにオススメのVisual Studio Code の拡張機能

VS Code

https://code.visualstudio.com/

● 爆速 自動リロードサーバ 「Live Server」

かなり高速です。gulpの「gulp-webserver」「gulp-connect」より速い。

・VS code Live Server の起動方法

・VS code で表示させたいフォルダを開く
・「Command + Shift + P」 → 「Live Server: Change Liver Server work space」からフォルダを選択
・「Command + Shift + P」 → 「Live Server: Open with Liver Server」でブラウザで 「http://127.0.0.1:5500」が開く
（または画面一番下のステータスバーのところ Go Live を押しても ok）

● ブックマーク機能をつける「Bookmarks」

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

● ケースを変換 （ PascalCase → camelCase ）

https://github.com/wmaurer/vscode-change-case

● = や : でコードを揃える「AutoAlign」

https://marketplace.visualstudio.com/items?itemName=bladnman.auto-align

● 選択範囲の拡張を細かくする「expand-region」

https://marketplace.visualstudio.com/items?itemName=letrieu.expand-region
インストール後に「expand-region」の動作を「Command + space」に割り当てると SublimeTextぽくなります。

● HTML + CSS 用インテリセンス（IntelliSense for CSS class names in HTML）

https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

● SHIFT + return で ＜BR＞ コードを入力する （Insert ＜br＞ Tag）

● PHP用 インテリセンス

入力補完や（ command + shift + o → : ）でメソッド一覧を表示することができます。 PHP Intelephense の方が高速に動作するのでお勧めです。（remote で使用するにはライセンスキー購入が必要です。） https://intelephense.com/

● ファイル比較（diff）

比較したい二つのファイルを開いておいて「Command + shift + P」 → 「diff」でファイル比較を実行してくれます

● デフォルトのカラーテーマの色を変更する

C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-defaults\themes

を変更する

● ローカルのファイル名入力を自動で保管

https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename

● 自動でバックアップ

https://marketplace.visualstudio.com/items?itemName=xyz.local-history

● SCSS (SASS) をコンパイル 「Live Sass Compiler」

次のような設定ファイルを「Code」→「基本設定」→「設定」 に記述しておきます。
.scss ファイルを開いて、画面一番下の Watch アイコンをクリックして、 .scss ファイルを保存すると自動的に 「 ../css/xxxxx.css 」「 ../css_min/xxxxx_min.css 」ファイルが生成されます。
なお Watch するのは style.sass などメインの scss ファイルのみでOKです。

      // Live Sass Compiler
      "liveSassCompile.settings.formats":[
        // css
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css/"
        },
        // css (minified)
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../css_min/"
        }

● CSSを自動でフォーマット

https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-csscomb

・インストール後の設定方法

1. 設定ファイルを下記サイトから作成する

http://csscomb.com/config

2. 任意のフォルダに csscomb.json で保存する

csscomb.json の 例

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "\t",
    "color-shorthand": false,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": true,
    "quotes": "double",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": " ",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "\n",
    "vendor-prefix-align": true
}

3. VS code の設定ファイルに csscomb.json の場所を記述して保存

      // CSS, scssファイル保存時にCSSCombを実行
      "csscomb.formatOnSave": true,
      // csscomb.json の場所を指定
      "csscomb.preset": "YOUR_FOLDER/VS_code_csscomb/csscomb.json"

● VS Codeでダブルクリックした時にハイフン（ - ）も選択されるようにする

「Code」 →「基本設定→「設定」を開き、
左側の設定見本の editor.wordSeparators を右側に追加し ダブルクリック時に選択されて欲しい文字を消す。

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

↓ （例： $ と - を消します）

      // ダブルクリック時に自動選択して欲しくない文字
      "editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?" ,

● VS Code で HTMLタグ内を自動選択

キーボードショートカットの設定で editor.emmet.action.balanceOut を検索してそこに好きなキーを当てると使えるようになります。