.petaBlog

Web制作

2020/10/01

VSCodeにしたらやっておきたい初期設定

※HTML・CSS・JavaScriptをいじるくらいのWebデザイナーさん向け記事です

コーディングに使用するエディターですが、これまで、Atomを使用していたのですが、1000行を超えるソースをいじっていると、アプリケーションの動作が非常にもっさりとし、編集速度が体感8割くらい落ちてしまい、正直なところお仕事になりませんでした。（原因はよくわかりませんがCSSファイルが主に当たる）

ということで、Atomよりも動作がサクサクかつ、こちらが求めている機能があるエディターがないか探したところ、VSCodeに行き着いたというお話で、その際に行った初期設定（フロントエンド向けの環境設定）を紹介したいと思います。

ちなみに、VSCodeとは、「Visual Studio Code」の略称で、マイクロソフトが開発したエディターです。

今回、Atomの代替として求めている要件はこちらでした。

サクサク（これ重要）
SCSSのコンパイルが可能
Emmetが利用できる
拡張性がある
フィーリング

よく、ブラウジングしていると、「○○を使うなら絶対いれたい拡張機能」みたいな記事を見かけますが、そういったものをゴリゴリ入れても実際に使うものって限られると思うので、自分が本当に利用したい機能だけマストであればいいと思ってます。

その上で、自分が想定していなかったけど、明らかに使える機能があったらそれはもう出会いですよね。

では、実際にVSCodeはどうだったのか、紹介します。

前提：事前にやったこと

ひとまず、VSCodeのダウンロードが必要なので、公式サイトからパッケージデータをダウンロードし、インストールしました。

VSCodeダウンロードページ：https://code.visualstudio.com/download
※VSCodeはデフォルトは英語なので、拡張機能で日本語化します

VSCode起動後、サイドバー5つ目のブロックっぽいアイコンをクリックして、検索バーに「Japanese Language Pack for Visual Studio Code」と入力し、出てきた拡張機能を導入するだけです。

拡張機能導入後、アプリケーションの再起動を促されるので、従います。

これで使用準備ができたので、さっそく見ていきましょう。

サクサク（これ重要）

今回エディターを変えたい主目的ですね。

比較を作りたかったのですが、Atomはとうの昔にアンインストールしてしまったので、VSCodeのサクサク具合だけお届けします。

1000行超えてもヌルヌル動く…！

もうこれで、代替候補としての試験をほぼパスしたようなものですね。これなら、ストレスフリーでコードを書くことに集中できそうです。

SCSSのコンパイルが可能

SASSやSCSSでCSSを書く人が増えていると思いますが、VSCodeも記述はもちろん、そのままCSSへのコンパイルもできました。

ただし、拡張機能の導入が必要なことと、以下の使用でコンパイルしたい場合は若干設定をいじる必要があります。

任意のベンダープレフィックスの追加
圧縮(compressed)でのコンパイル

ベンダープレフィックスとは、簡単に説明すると、CSSのさまざまな機能を各種ブラウザで使用できるように宣言するもので、「-webkit-」などついている接頭辞を指します。

これを、コンパイル時に自動で入れてくれるようにするというものですね。

また、圧縮でのコンパイルとは、スペースや余白をすべて排除し、データ容量の削減を施したデータを指します。

「○○.min.css」などのデータを見かけたりしたら、それですね。

私は、クライアントさまのご指定あるなしに関わらず、整理された状態でのCSSデータと、圧縮した状態でのCSSデータを納品するようにしているので、コンパイル時に両方のCSSデータが生成されるようにしたいです。

ということで、SCSSデータをCSSデータにコンパイルするためにも、「Live Sass Compiler」という拡張機能を導入します。

導入後、VSCodeの下部に、「Watch Sass」という表記が出ているので、コンパイルしたいSCSSデータを開き、「Watch Sass」をクリック、「Watching…」状態で、SCSSデータを保存(command(⌘)+S)します。

これで、SCSSデータと同ディレクトリにCSSデータへのコンパイルがされます。

ただ、先ほど述べたように、任意のベンダープレフィックスも追加したいし、圧縮でのコンパイルもしたいので、拡張機能の設定をいじります。

該当の拡張機能の歯車アイコンをクリックして、「拡張機能の設定」をクリック。

とりあえず「settings.json」を開きたいので、どの項目でもいいので、「settings.jsonで編集」をクリックし、以下のソースを丸っとコピペしちゃいます。

{
  "liveSassCompile.settings.autoprefix": [
        // ベンダープレフィックス(「日本国内のシェアが1%以上」または「最新バージョンから数えて2つまで」)
        "> 1% in JP",
        "last 2 versions"
    ],
    "liveSassCompile.settings.formats": [
        // CSSコンパイル(確認用)
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css"
        },

        // CSSコンパイル(圧縮用)
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/css"
        }
    ]
}

※他の設定で「settings.json」に記述を加えているなら、必要な項目だけ記述します

これで「settings.json」を保存すればOK。

それぞれ、コメントアウトで記載している内容でCSSデータをコンパイルしてくれます。

SCSSコンパイルも、Atomと変わらない仕様でできることがわかりました。

Emmetが利用できる

HTMLとかCSSを爆速で書くうえで欠かせない「Emmet」。

「a」とか、「ul>li」とか打ち込んで、「tabキー」などで展開するだけでタグを生成してくれるやつです。

一度は聞いたことがある人も、すでに利用している人もいると思いますが、Atomでは拡張機能で導入しているこの機能、VSCodeは標準搭載でした。

しかも、補完機能もあり、使いやすい…！（aタグで言えば、リンク展開や、メールアドレス展開を選べる）

これはすごく使いやすいですね。

ただ、1点だけ、すべてのエディターでEmmetを使用するときのあるあるとして、「!」と打って展開するHTML5の宣言、「lang」が「en」で展開されます。

99％、クライアントさまは日本人の方で、制作するものも日本人向けのサイトなので、「lang」は「ja」にしたいところ。

VSCode左下の歯車アイコンから「設定」を開き、「拡張機能＞Emmet」にある「Variables」で、「項目」を「lang」、「値」を「ja」にします。たったこれだけ。

改めて「!」で展開すると、「lang」が「ja」になってますね。

ただ、わざわざ案件をいただくたびに、HTML5の宣言から書き始める機会がどれくらいあるかわかりませんが…。

拡張性がある

Atomと同様、オープンソースソフトウェアなので、いろいろな拡張機能が開発されてます。

冒頭で、拡張機能ばかり入れて、結局使わないと述べましたが、本当に使えるものだけを入れる分にはかなり重宝します。

私は今のところ、先に紹介した2つの拡張機能以外に、もうひとつ加え、計3つの拡張機能しかいれてません。

それが、「Live Server」です。

どんな拡張機能かというと、ローカルサーバー上で、リアルタイムでHTMLファイルを展開してくれます。

「な…何を言っているのかわからねーと思うが」状態ですが、こんな感じです。

VSCode下部の「Go Live」をクリックすると、ローカルサーバーを立ち上げ、ブラウザでHTMLデータを開きます。

ファイルを変更して保存すれば、リアルタイムで反映されるというスグレモノ。

この機能はとても感動したし、実用性があるので入れています。

フィーリング

最後は、やっぱりフィーリング。

そのアプリをかわいいと思えるかだと思っていて、愛せないアプリなら使用しないです。

VSCodeは、UI設計もそうですし、ビジュアルもよかったので、Atomからの乗り換えとしては文句なしで採用となりました。

まとめ

ということで、今回はAtomからVSCodeに乗り換えましたという備忘録のような記事でした。

最低限使えるような形で紹介してみたので、気になる方は導入してみてはいかがでしょうか。

制作をお願いしたいと思ったら

制作に関するご相談、お見積りはお問い合わせより承っております。

お問い合わせする