MicrosoftのVisual Studio Code(VSCode)を使って、爆速のコーディング環境を構築してみましょう。
CONTENTS
給付金で最大54万円OFF！独学では手に入らないウェブスキルが身に付く日本初のW3C認定スクールが無料カウンセリング受付中！
VSCodeとは？
VSCodeはMicrosoftが開発したテキストエディタです。最初に登場したのは2015年で、動作の軽さと拡張機能の豊富さで徐々に人気になっていきました。さらにVSCodeは自分の環境に合わせたカスタマイズが可能で、ウェブデザイナーだけでなくフロントエンドやバックエンドなどのエンジニアも使用するアプリになっています。
また、WindowsだけでなくMacでも使えるのも魅力です。
Emmetを使う
ウェブデザイナーにとってHTMLとCSSのコーディングは必須です。このコーディングで時間がかかっていてはもったいないのでEmmetは常に使用していきましょう。Emmetはテキストエディタにプラグインとしてインストールすることで使用できるようになりますが、VSCodeはプリインストールされていますので何もしなくても利用することができます。
実際の使用方法は簡単で、省略されたコードを書いてTabを押すだけです。
例えば下記のようにHTMLを省略して書いたとします。
#container>ul>a.link
Tabをクリックすると下記のように展開されます。
<div id="container">
<ul>
<ul><a href="" class="link"></a></ul>
</ul>
</div>
コメントアウトもCtrl+/でできたりしますので、チートシートを見ながら習得しておきましょう。
スニペットを使う
スニペットとは頻繁に使うクラス名やコードなどを登録しておくことができる定型文のような機能です。VSCodeではJSONファイルにスニペットを登録するため慣れるのに苦労しますが、使用頻度が高いコードなどは事前に登録しておきましょう。
Sassを使う
次にCSSのコーディングです。CSSをコーディングするにはSassのSCSSを使うのがおすすめです。Sassとはプログラムのように変数や引数が使えたりネストができるようになった機能で、「Less」と「SCSS」という2種類が存在します。
Lessとは？
LessはSassの標準的な書き方です。インデントでプロパティを区切ったり、括弧やコードの最後にセミコロンを使わないことが特徴です。
記述量が圧倒的に少ないメリットがありますが、インデントの使用に慣れる必要があります。
body font-size: $font-size color: #333
SCSSとは？
SCSSはSass 3というバージョンで登場した書き方です。CSSに拡張性を持たせたもので、既存のCSSファイルの拡張子を.scssにするだけで使うことができるため、すでに作成されているCSSファイルをSCSSに置き換えることも簡単です。
body {
font-size: $font-size;
color: #333;
}
SCSSがよりポピュラーな書き方になっています。
Sassはコンパイルしないと使えない
Sassはとても便利ですが、最終的にはブラウザが認識できる.cssにコンパイルする必要があります。コンパイルするためには様々な方法がありますが、「DartJS Sass Compiler and Sass Watcher」という拡張機能を使うと便利です。
VSCodeを開き拡張機能をインストールしておきましょう。
「DartJS Sass Compiler and Sass Watcher」をインストールしたあとにCtrl+Sで.scssファイルを上書きすると.scssがあるディレクトリに.cssとmin.cssが生成されます。
CSS ├── style.css ├── style.min.css └── style.scss
HTMLでは.min.cssを読み込み、編集するときは.scssで行ってください。
他にコーディングをサポートできる拡張機能
コーディングをさらに強力にしてくれる拡張機能です。適宜必要なものを入れることで誰よりも早く駆け抜けることができるようになりますよ。
Prettier – Code formatter
Prettier＜プリティア＞はコードを自動でインデントを付けて整えてくれる拡張機能です。
Auto Rename Tag
Auto Rename TagはHTMLを自動で補完してくれる拡張機能です。
さいごに
というわけで、コーディングのスピードを爆速にする方法でした。VSCodeはかなり優秀なテキストエディタですので、拡張機能などの環境を整えておきましょう！
