皆様の中でも、Visual Studio Codeを使ってコーディングやプログラミングをされている方も多いとは思います。
僕も知識としては知っていたものの、現在のWEBサービスの土台づくりもあり仕事の環境を変える事に思考がまわらず、ようやく「そうだ！Visual Studio Code」を使おう！]などという今更ながら行動に移しました笑
Visual Studio Codeのインストール手順。
インストールと言ってもそんなにたいそうな作業ではないのですが、Visual Studio Codeを使用するまでに作業そして設定した作業を記しておきます。(※ちなみにですが、僕はWindowsユーザーです。)
まずは、ソフトのダウンロード。
まず、インストールするためのソフトは公式サイトからダウンロードする事が可能です。
下記Visual Studio Codeのダウンロードページへリンクしておきましょう。
Visual Studio Codeをインストールする為に必要なソフトを公式サイトから取得できます。
ここだけの話、僕は今日まで「Bracket」と呼ばれるエディタソフトとSassファイルをコンパイルしてcssファイルを生成してくれるkoalaという2つのソフトを駆使してコーディングを続けていました。
ここ最近、僕がわの環境のせいだとは思いますが、ネットワークの影響か作業中に連携が切れて、なんどもソフトを行き来する事が増えてきてしまい、Visual Studio Codeを使用する事で、この連鎖がなくなると期待しつつ、インストールに至ったという訳なのです。
何故なら、Visual Studio Codeではコンパイラがプラグインとして用意されていようなので。
インストールの為のセットアップ。
さて、公式サイトからダウンロードした.exeのファイルを起動です。
まずは、ソフトを使用する為の契約に関しての同意ですね。
ま、同意しないと使えませんよね笑。
同意をして次の作業に移りましょう。
僕は、デスクトップ上にアイコンの作成をしたいので、アイコン追加にチェックをしましたが、どちらでも大丈夫です。必要に応じてチェックをつけて下さいね。
アイコン追加していなくても、Windowsに追加されたソフトを探せばすぐに見つけれますね。
インストール先の指定に関しては、ソフトのファイルを置いておくファイルの場所の設定です。
通常Cドライブ Dドライブなどあると思いますが、選択できるときは、容量の空きが大きいほうのドライブに入れておけば問題ないですよね。ちなみに、一般的にはCドライブへのインストールが一般的ですね。
スタートメニューフォルダの指定に関しては、こちらは、Visual Studio Codeとなっていたので、わざわざ名称変更する必要もないかと思うので、表示されたそのままで次へ
インストールの準備完了ですね。
早速インストールボタンを押せば、あとはコンピューターが自動でインストールいてくれます。
問題なくスムーズにインストールできました。特に難しい知識が必要な作業はありませんでしたね。
Visual Studio Codeの日本語への対応。
インストールし終えて、待ちに待った、いざソフトを起動です。
あ、言語がすべて英語ですね。そりゃそうですね開発者様はMicrosoft様ですもんね。
実はBracketエディタもkoalaでもずっと英語表記のまま使用していたので、あまり違和感がなかったのですが、やっぱり日本語の方が慣れているので日本語対応できるのかを調べたところ、きちんと対応しているようですね。
画面のヘッダーにあるメニューの中で「View」という項目がありますが、ここの「Command Palette」という項目からちゃんと言語設定をするところを探します。
画面の少し小さいので拡大していますが、検索枠のようなところが出現しますので、「>display」と打ち込むと出てきます。おそらく「>Language」「>Configure」と調べてもヒットするかもしれませんね。
「Configure Display Language」という項目を選択致します。
すると使用できる言語の一覧が表示されますので、世界各国の言語がずらりと出てきますね、皆様はお好きな言語を選択してくださいね、僕は、今回は、日本語を選択致しました。
選択を済ませると、ポップアップが表示されて、言語変更する為に再起動しますといった文言がでてくるので「Restart」してください。
※こちらはパソコン自体が再起動するのでなく、ソフトだけの再起動ですね。
再度起動されたら日本語へと切り替わっていましたので、大成功ですね。
下記、追伸なのですが、このブログを書いているときに気が付いたのですが、紹介しておきます。
実は、インストールした一番最初に起動した際に、親切にスタート画面に言語を日本語にする人は、こちらをインストールって書いてあるではありませんか笑。
僕が行った作業よりも、相当時短ですので、今から日本語化する方は、こちらから設定してくださいね笑。
これで準備完了と言いたい所なのですが、今回のエディタへの楽しみのSassのコンパイラーの利用についてですね。
出来るとは噂に聞いていたのですが、どれがそれに当たるかわからなかったので、ググって先輩方に聞いてみたところ「Live Sass Compiler」を拡張機能で追加できると言う事です。
Live Sass Compilerの拡張機能。
正直コンパイラーを使用しないのなら、わざわざエディタを変えるところまで至っていないと思うので、実はこの作業の瞬間、どんな感じでSassの利用できるのかワクワクしています。
拡張機能(プラグイン)の追加はサイドの縦に表示されているメニューの「４つのブロック」のアイコンから取得できます。
ブロックのアイコンを選択すると色々プラグインが表示されますが、今回は、目的がはっきりしている為、検索枠に「Live Sass Compiler」と入れちゃいましょう。
左側の一覧に表示されたので、インストールボタンをおしたら、右側の画面に「Live Sass Compiler」が表示されました。
これで僕がやりたかったエディタの準備が完了致しました。
SCSSからCSS化へのコンパイル方法。
では、実際にテストでコードを入れてみて、確認しておきましょう。
$image-color:#FFF;
body{
.wrap{
background-color:$image-color;
border:2px solid #000;
}
}みたいな、適当にScssファイルを用意してみました。せっかくなので変数も利用しておきましょう。
(数秒待ったけど)・・・ファイルを作るだけではコンパイル化されなんですね。
右下のあたりにWatch Sassというのがあるので、こちらをクリックしなければならないようです。
Watch Sassをクリックすると、Working on…というカタチになりますので、この状態で先ほどの指示をもう一度保存すると自動でcssファイルとcss.mapファイルの書き出しをしてくれました。
左側のファイルを表示している部分にもファイルが増えていますね。
cssファイルの中身を確認してみましょう。
body .wrap{
background-color:#FFF;
border:2px solid #000;
}/* sourceMappingURL=test.css.map */きちんとcssとして書き出しされていますね。
でも、実は、僕が期待していたのとは、少し違った書き出しでした。
body .wrap{background-color:#FFF; border:2px solid #000;}/* sourceMappingURL=test.css.map */こんな感じで、圧縮された状態でコンパイルされると思っていたので、はじめは、少し「？」が浮かびました。
もしかしたら圧縮された状態での書き出し方法は、何か設定があるのかもしれないですね。
ま、とにかくこれで準備完了です。
今まで、クラウド上のファイルを使うとコンパイラーがうまく反応してくれず、パソコン内に落として、コーディング作業をしていたのですが、Visual Studio Codeだとクラウドでのファイルをきちんとコンパイルしてくれました。
また一歩、管理がしやすくなりました。
Visual Studio Codeをしっかりと使い込んでいきたいと思います。
