tags

VS codeのおすすめ拡張機能と設定の変更

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

● = でコードを揃える「Code alignment」

https://marketplace.visualstudio.com/items?itemName=cpmcgrath.Codealignment

● 選択範囲の拡張を細かくする「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 → : )でメソッド一覧を表示することができます。 https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense

● ファイル比較(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 」ファイルが生成されます。

      // 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": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?" ,
添付ファイル1
No.1237
08/17 14:22

edit

添付ファイル