vscodeの導入入門(sass/標準圧縮編)

なんだって！？
Bracketsのサポートが2021年9月1日に終了だって？！？！

えぇ、、、
どうしよう、、、と思ったので、vscodeを導入しました。
結構さくっと導入できたので、方法を残しておこうと思います。

ダウンロードから使い始めるまで15分で完了！

Visual Studio Code - Code Editing. Redefined

上のリンクに飛んで、右上のダウンロードをクリック
その後、Windows・Mac・.deb/.rpmから選択するとダウンロードが始まります。

ローカルにダウンロードしたら、解凍して(macの場合)アプリケーションにいれます。
Windowsの場合、Appなんちゃらに入れました←

解凍したデータをダブルクリックで起動！

なんとこれで使えます！
ただし、コードが書けるようになっただけなので、sassも使えるようにしたいと考えている方は下も合わせて行ってください。

sassを対応するためには「Live Sass Compiler」をインストール

vscode左端の四角ブロックが4つあるマーク。

　□
□
□□

なんかこういうやつ。

これは拡張機能を追加する部分で、自分が使いやすいようにカスタマイズすることが可能です。

今回はsassをターミナルなしで使いたいので、拡張機能のLive Sass Compilerをインストールします。

あとはエクスプローラーで変更したいscssファイルを選択し、アンダーバーの「Watch Sass」をクリックするだけ。

あとは勝手に.cssと.map.cssが生成されます！

cssを標準で圧縮したい場合はLive Sass Compilerの設定を変更

あれ？
css圧縮されてなくない？ってなったので、保存時に常時圧縮される方法をGoogle先生に聞いたところ、「Live Sass Compiler」の設定を変更することで可能という答えをいただけました！

ありがとう、Google先生！

早速設定変更します。
拡張機能タブで先ほどインストールしたLive Sass Compilerをクリックすると、下の画像のようなページが出てくるので歯車アイコンをクリック。

セレクトでいろいろ選択肢が出てきますが、その中の「拡張機能の設定」をクリック。

「ユーザー」と「ワークスペース」のタブがあるので、ワークスペースを選択。
たーくさん英語が並んでおり、ゾワゾワしますがLive Sass Compile>Settings:Formatsセクションの「setting.jsonで編集」を押します。

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

上記の記述が出てきますので、下記のように追記。

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

圧縮されていないcssは.original.cssで出てくるよ。
圧縮されたcssは.cssで出てくるよっていうコードです。

コードを変更したら保存。

scssを保存してコンパイルできていれば成功です！

エディターをあまり触ったことのない方でも15分程度でできましたので、Bracketsから他のエディターにしたいと考えているかたはぜひ試してみてください。

■参考記事

MacOSでVisual Studio Codeをインストールする手順 - Qiita

Visual Studio CodeでSASSのコンパイルを標準で圧縮（minify）する方法