2019年版 作業環境を晒します〜エディタ編〜

みなさまこんにちは。連休は子供とベッタリ過ごしたコジマです。
さて。今回からはそれぞれのツールを詳しく紹介していくということで、まずはウェブ制作に欠かせないツール、エディタを紹介していきたいと思います。

まずは前提としてエディタに求めることは、

  1. 軽快な動作
  2. コード補完が充実している
  3. 豊富な拡張機能
  4. lintツールが使用できる
  5. 内蔵ターミナル
  6. gitとの連携
  7. 定期的な開発

などなど。
あげればキリがありませんが、これらの希望を叶えてくれるエディタは多くありません。以前はSublime Textを使用していましたが、拡張機能をインストールすることで叶えられるものもありました。ですが、できるならば標準機能として備わっていてほしいものです。

これらを踏まえて考えてみると、Visual Studio Code(以下、VSCode)がベストであるということで、弊社のフロントエンドはVSCodeに統一しています。
code.visualstudio.com

コード補完もgit連携もターミナルも標準搭載。npmスクリプトの実行も簡単にできちゃいます。それでいて動作が軽いとなれば選ばない理由はありません。

せっかくスタッフ間で同じエディタを使うわけですから、プロジェクト毎にワークスペース(xxx.code-workspace)を作成し、lintやコード整形に関する設定を同じものを使用するようにしています。そうすることで記述ミスを未然に防いだり、美しいコードを記述できるようになります。 さらに、全員が同じ環境でコーディングを行うことで、他人が記述したコードでも読み解きやすくなります。

拡張機能をご紹介

スニペットやテーマなど様々な拡張機能をインストールしていますが、ここでは使用している拡張機能の中からオススメをいくつかご紹介いたします。

絶対入れたい拡張機能

Prettier - Code formatter

インストールすることで自動フォーマットが行われる marketplace.visualstudio.com

HTMLHint

指定したルールに沿った形で記述する為に marketplace.visualstudio.com

stylelint

指定したルールに沿った形で記述する為に marketplace.visualstudio.com

ESLint

指定したルールに沿った形で記述する為に marketplace.visualstudio.com

Japanese Language Pack for Visual Studio Code

VS Codeの日本語化 marketplace.visualstudio.com

あると便利な拡張機能

Path Intellisense

ファイルパスの自動補完 marketplace.visualstudio.com

Bracket Pair Colorizer

カッコの始点と終点を見やすく marketplace.visualstudio.com

indent-rainbow

インデントをレインボーカラーで表示して見やすく marketplace.visualstudio.com

Highlight Trailing White Spaces

文末のスペースを強調表示してくれる marketplace.visualstudio.com

zenkaku

全角スペースを強調表示してくれる marketplace.visualstudio.com

なお、拡張機能はインストールしすぎるとエディタ自体の動作に影響するので、使用の際にはご注意くださいませ。