みなさまこんにちは。連休は子供とベッタリ過ごしたコジマです。
さて。今回からはそれぞれのツールを詳しく紹介していくということで、まずはウェブ制作に欠かせないツール、エディタを紹介していきたいと思います。
まずは前提としてエディタに求めることは、
- 軽快な動作
- コード補完が充実している
- 豊富な拡張機能
- lintツールが使用できる
- 内蔵ターミナル
- gitとの連携
- 定期的な開発
などなど。
あげればキリがありませんが、これらの希望を叶えてくれるエディタは多くありません。以前は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
なお、拡張機能はインストールしすぎるとエディタ自体の動作に影響するので、使用の際にはご注意くださいませ。
