こんにちは。フロントエンドエンジニアのしばみです。
今回は、コーディングする際には欠かせないアレ！
現場で実際に使われている「テキストエディタ」についてご紹介します！
テキストエディタとは、パソコンでコードや文章を作成する際に使用するソフトのことです。プログラマーを想像してみると、黒い画面にアルファベットなど文字を打ち込んでいたりしますよね！あれです！
テキストエディタは、その名の通り、テキストを編集することに特化したソフトで、コードを打ち込むとハイライトされるなど、便利な点がたくさんあります！
中でも、アイ・ファクトリーのフロントエンドエンジニアたちがよく使用している「Visual Studio Code（通称 VSCode）」をご紹介します。
VSCodeとは、Microsoftが提供する無料のテキストエディタです。
https://code.visualstudio.com/
・Windows、macOS、Linuxなど主要なプラットフォームで利用できる
・多くの言語に対応し、シンタックスハイライトしてくれる
・Gitと連携できる
・拡張機能が豊富で、自分が使いやすい形にいくらでもカスタマイズできる
などが特徴です！
VSCodeを便利に使える醍醐味といえば、拡張機能です！
いくつかご紹介します。
VSCodeはデフォルトでは英語表記ですが、拡張機能「Japanese Language Pack」をインストールすることで、日本語に変更することができます。
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
「HTMLHint」は、HTMLの文法をリアルタイムでチェックしてくれる拡張機能です！
閉じタグが足りない、DOCTYPE宣言が不足している、などなど、HTMLの文法で間違っている箇所をハイライトして、エラー内容を教えてくれます。
https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint
「Auto Rename Tag」は、HTMLの開始タグを変更すると、自動で閉じタグも更新してくれる拡張機能です！
うっかり閉じタグだけ変更し忘れて文法エラーになることもあるので、優しい拡張機能ですね。。！
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
「CSS Peek」は、HTMLファイルから対象のタグやクラスに対してどのようなスタイルが指定されているか調べることができる拡張機能です。
HTMLを開いている画面内に表示したり、該当のCSSファイルを直接開くことができるので、HTMLのスタイルを変更したいときに、簡単に修正するべきCSSファイルにたどり着くことができます！
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
今回はアイ・ファクトリーの現場でよく使われているテキストエディタ「Visual Studio Code」と、その拡張機能についてご紹介しました。VSCodeには他にもたくさんの拡張機能があったり、背景色やテキストの色、フォントなどカスタマイズは無限大です！
ぜひ皆さまの使いやすいカスタマイズをしてみて、良いコーディングライフを！
