一時期 VSCode を使うも Atom に戻っていたのですが、 どういうわけか GREP 検索ができなくなってしまい 再び VSCode を使うことにしました。

どうせならプラグインも見直してしっかりメインエディタになるように設定もしたのでそのあたりを書き留めておきます。

Visual Studio Code（VSCode）とは

Microsoft が提供しているオープンソースのエディタで、MacOS・Windows・Linux で動作します。

gulp も webpack も使わずエディタベースでSASS（SCSS）コンパイルとライブリロード

自分が使う分には gulp なり webpack なりを使うのですが、人に教える時にもう少し手軽に使える方法が欲しいと思っていたところ、最近エディタ単位で SASS のコンパイルができると聞いたのでプラグインをインストールしました。

DartJS Sass Compiler and Sass Watcher

2022年1月22日追記

Sass の @import が廃止になるのでこれまでは Live Sass Compiler を解説に入れていましたが、Dart Sass のコンパイラの解説を入れておきます。

https://marketplace.visualstudio.com/items?itemName=codelios.dartsass

プラグインをインストールするにはエディタ左下にある歯車マークをクリック→拡張機能 もしくはショートカット Mac: command + shift + X 、 Win: Ctrl + Shift + X

検索ボックスが出現するので、 DartJS Sass Compiler and Sass Watcher と入力し、プラグインが表示されたら install

こちらは監視の必要がなく、パーシャルファイルとなる元ファイルを保存することで css ファイルが吐き出されます。

吐き出し先はデフォルトだと Sass ファイルと同階層に吐き出されるので、CSS を専用の CSS フォルダに吐き出したい場合は設定を変更します

表示＞コマンドパレット

を表示し、コマンドパレットに

setting.json

を入力。

基本設定：ワークスペース設定を開く（JSON）

を選択し、以下のコードを追記します。

"dartsass.targetDirectory": "css",

こんな感じになっていればOK

他の設定項目などは環境によって異なりますが、どこかに挿入し、行の最後に「 , 」をつけ忘れないようにしておきましょう。行末に追記する場合「 , 」は不要になります。

Live Sass Compiler

このプラグインは Sass の @import が廃止になるため、利用せずに上記で追記してある Dart Sass の利用を推奨します：2022年1月22日追記

VSCode で SASS をコンパイルするにはこのプラグインが必要になります。

プラグインをインストールするにはエディタ左下にある歯車マークをクリック→拡張機能 もしくはショートカット Mac: command + shift + X 、 Win: Ctrl + Shift + X

検索ボックスが出現するので、 Live Sass Compiler と入力し、プラグインが表示されたら install

エディタの下に

が出現したら、このボタンをクリックすると watch（監視） が開始します。

あとは SASS（SCSS）ファイルを更新して保存すればファイルが存在する場所にcssファイルが吐き出されます。

SASS（SCSS）と css を別のディレクトリで管理したい場合は

インストールしたときと同様、拡張機能から Live Sass Compiler を検索し、 Live Sass Compile › Settings: Formats の項目より setting.json で編集 を選択

{
    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css"
        }
    ]
}

と記述。（すでに他の設定がある場合は追記になります。）

AutoPlefixer の設定なども書けますがより詳しい事はドキュメントをどうぞ。

もしインストールしても使えないという場合、 Node 及び node-sass が必要になると思うので、それぞれインストールしてください。

Live Server

ライブリロードを行うプラグインで、ファイル編集時に保存されるとブラウザを自動的に更新。

gulp でライブリロードを使っていましたが、それよりダントツに早くて快適。

拡張機能から Live Server と検索し、インストールするとエディタで開発用ディレクトリを開いている場合下記 Go Live ボタンが出現します。

こちらをクリックすると ポート 5500 版でブラウザに編集中のファイルが表示され、ライブリロードがかかるようになります。

他にインストールしているプラグイン

PHP Server

PHP サーバーを起動するプラグイン。インストールすると右上に

が出現するのでこちらをクリックすれば起動します。

Alignment

json や CSSのソースコード整形を行うプラグイン。 option + = もしくは ctrl + = で実行します。

Atom Sass Snippet

VSCode 用 Atom の Sass Snipet。キーワードを入力すると候補がある場合サジェストされるので、リターンを押せば該当するものが展開されます。

EditorConfig for VS Code

エディタコンフィグを使うためのプラグイン

複数人で開発する場合、人によってエディタの設定が異なるためソースコードのルールが統一化されません。

それを解決するため、 .editorconfig という設定ファイルを利用してコーディングルールを統一化します。

root = true

[*]
end_of_line  = lf
charset      = utf-8
indent_style = space
indent_size  = 2
trim_trailing_whitespace = true
insert_final_newline     = false

設定できる項目

Japanese Language Pack for Visual Studio Code

エディタを日本語化

WordPress Snippets

WordPress のスニペット表示

Auto Rename Tag

shift + return で <br> タグを挿入できます。地味に便利。

Diff

ファイルの比較

コマンドを入力するウィンドウを出すには command + shift + p です

キーボードショートカット

エディタはキーボードショートカットを使えば使うほど便利なんですが、逆に多すぎて覚えるのが大変なので一覧表をおいておきます。

文中 →→ というのは、コマンドを2回連続で実行するものです。

基本操作

折り返しの切り替え

1行が長い場合端で折り返すかの設定を切り替えられます。

option + z

一般

キーボードショートカットを開く

キーボードショートカットが知りたくなったらこのコマンド

command + k →→ command + s

ナビゲーション

検索と置換

選択した項目を次の一致項目に追加

同じキーワードを検索＋選択したい場合に

command + d

選択し過ぎた場合 command + u で1つ戻れます。

マルチカーソル、選択

マルチカーソルはすごく便利。使ったことがない人はぜひ使ってみてください。

カーソルを挿入

option + クリック

ボックス選択

ドラッグやキーボードを利用して連続する行を複数選択も可能です

shift + option + ドラッグ もしくは shift + option + command + 方向キー

一致するすべての出現箇所を選択

同じ項目をすべて選択できます。

shift + command + l

すべての出現箇所を変更 に command + f2 もあるのですが、違いがわかりません…

言語編集

ドキュメントのフォーマット

インデントを一発で整形できます。ノーインデントのソースを整形したい場合など便利ですね。

shift + option + f

エディター管理

ファイル管理

ファインダー（エクスプローラー）でアクティブ ファイルを表示する

エディタから現在アクティブになっているファイルをファインダー（エクスプローラー）で開けます。

command + k →→ r

アクティブ ファイルのパスのコピー

現在のアクティブファイルのパスをクリップボードに貼り付け。

command + k →→ p

表示

サイドバーの表示切り替え

サイドバーが邪魔なときはショートカットでサクッと隠せます。

command + b

デバッグ

ターミナル

僕は MacBook Pro の英字キーボードを使っているのですが、 PageUp PageDown などは存在しないため、 fn + → を押す必要があるので同時に押すボタンが多すぎてちょっと無理だなっていう組み合わせもあります。

こういう時物理キーが欲しくなりますね。

なお英字キーボードの場合 ￥ キーがありませんが、 \ キーが該当になります。

お役に立てたらお願いします🙇