VSCodeのインストールから、ライブリピート、SCSS（Sass）のコンパイル環境の構築までのメモです。社内開発環境の統一の足掛かりとして作ったもので、必要最低限の事しか書いてありませんのでご了承ください。 ## 1. VScode（Visual Code Studio） VScode（Visual Code Studio）はMicrosoftが開発している、高性能なテキスト・エディタです。 もちろん単なるテキスト・エディタではなく、主にWebアプリケーション開発のための統合開発環境です。 これまでコーティングのために別のアプリケーションを立ち上げて処理していた作業をひとまとめにできたり、リアルタイムにプレビュー出来たりと、開発の効率化を図ることができるはずです。 ##### 1-1. VScodeをインストールする 公式サイトからアーカイブをダウンロードしてインストールしてください。インストールに関して、とくに難しいところはありません。 https://code.visualstudio.com/ ##### 1-2. VScodeの使い方 アプリを立ち上げて開発フォルダをVScodeにドロップすれば開発の準備が整います。 下記からテスト用のファイル構成をダウンロードできます。展開した「project-1」ファルダ内の「html」フォルダをVScodeにドロップしてみてください。画像のような画面になるはずです。 http://www.chaordic.co.jp/memorandum/sample/project-1.zip http://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/32/0008.png ## 2. ライブリピート機能の実装 ライブリピートとは「ブラウザの自動リロード」のことです。この機能を導入するとコードの修正保存と共に自動リロードしてくれるので作業の効率が上がります。 VScodeでライブリピートを実現する方法はいくつもありますが、一番簡単なのは「Live Server」という拡張機能で簡易サーバーを立ち上げる方法です。 ##### 2-1. VScode拡張機能「Live Server」をインストール VScodeエディタのサイドメニューにある「拡張機能アイコン」をクリックします。 http://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/32/0003.png 検索窓に「Live Server」と入力して、検索結果にでてきたそれをインストールしてください。インストール後にVScodeの再起動が必要です。 http://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/32/0002.png ##### 2-2. Live Server の起動 VScodeを開くと、青い帯のフッター右に「Go Live」が追加されています。それをクリックするとブラウザが立ち上がりGoLiveの簡易サーバーにポート「5500」でアクセスしているはずです。 http://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/32/0004.png ためしにHTMLファイルを修正して保存してみてください。ブラウザが自動でリロードしたら成功です。 ## 3. SCSS（Sass）のコンパイル機能を実装する ##### 3-1. VScode拡張機能「Live Sass Compiler」をインストール 「Live Server」の時と同じように、エディタのサイドメニューにある「拡張機能アイコン」から「Live Sass Compiler」をインストールし、VScodeを再起動します。 ##### 3-2. Live Sass Compilerの設定を変更する SCSSの監視を始める前にLive Sass Compilerの必要最小限の設定をしておきます。 この設定は「scss」フォルダに置かれた「＊＊＊.scss」ファイルの更新を監視して、コンパルされたCSSファイルを「scss」フォルダと同階層の「css」フォルダに「＊＊＊.css」として書き出すものです。 http://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/32/0007.png 再度サイドメニューの拡張機能アイコンからLive Sass Compilerを呼び出し、右クリックで「設定」を選択します。 http://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/32/0005.png http://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/32/0009.png そして｢setting.jsonで設定」をクリックして下記のJSONに書き換えます。 { // .css出力の設定 "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", // 出力拡張子を設定 "savePath": "~/../css" // 出力フォルダを設定 } ], // 対象外フォルダの指定 "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**", ".history/**" ] } 詳しい解説は控えますが、Live Sass Compilerは対象のフォルダ配下のどこに「.scss」ファイルを置いてもコンパイルしようとするので、適切に除外フォルダを設定しないと処理の負荷が高くなることが考えられます。 ##### 3-2. SCSSの更新を監視してライブでCSSをコンパイルする 開発フォルダ内に「.scss」がない場合は、まず適当な「.scss」のファイルを作ります。すると青い帯のフッター右に「Watch Sass」と表示されます。それをクリックするとSCSSの更新を監視して自動的にコンパイルされるようになります。 http://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/32/0006.png