【Other】【エディタ】サイトの開発するのに Visual Studio Code を使っているよという話

自分の開発環境について書いていなかったので書いておく記事です。
Visual Studio Code について詳しくは公式やもっと細かく説明してくれている他のサイトさんをご確認ください。

Visual Studio Code とは

Visual Studio Code（VSCode）は、Microsoftによって開発されているソースコードエディタです。
HTML・PHP・Javascriptなど様々な言語に対応しており、配色テーマや各種詳細設定の変更など、フロントエンドの開発環境としてオーダーメイドのポテンシャルを発揮します。

HTML・CSS・Javascript などフロントエンドのみならず、PHP・Python・C+などバックエンドの開発でも活躍します。

VSCodeのいいなって思う所

無料で使える

タダより高いものはないですがタダより安いものもないです。
ありがたさの極み。

Microsoftが開発している

IEやEdgeには散々泣かされてますがなんだかんだMicrosoftは好きです。

フォルダ・プロジェクトごとにウィンドウを開ける

フォルダを指定することでそのフォルダ以下のファイルにすぐにアクセスすることができます。
下記画像の左部分で指定したフォルダ以下のファイルツリーが表示されています。
ファイル名をクリックすれば右部分にファイルの中身が表示されます。

配色テーマが豊富

様々な配色テーマから自分の好きなデザインを選択できます。

Light(Visual Studio)

Quiet Light

Dark(Visual Studio)

Monokai

Red

Tommorow Night Blue

シンタックスハイライトが優秀

ソースの可読性を上げるシンタックスハイライトが各言語についているし、プロパティが間違っていたりするとひと目でわかる。

１行目…正しい表示
２行目…右辺の単位がおかしい（正しくは「rem」）
３行目…プロパティが間違っている（正しくは「display」）

構文エラーを適宜表示してくれる

文法上間違っている部分などがあれば理由付きで表示してくれるので、エラーを回避しやすい。

画面下部がエラー表示部分。
１行目…[disploy]なんてプロパティないよ
２行目…[display: inline-block]に[float: left]は効きません

拡張機能が豊富

色んないい感じの拡張機能がついているので自分好みのエディタにできる。

• 各言語のサポート
• 配色テーマ
• Todoリスト
• ブラウザプレビュー
• CSVビューア
• 入力サポート

など、様々な拡張機能が無料で配布されています。

Gitが使える

Gitのコマンドラインツール（ターミナル）をソフト内で使えたり、GUIのように使うこともできます。
コミット履歴などを確認するGit関連の拡張機能もあるので、Git初心者でも簡単にGitを活用できます。

VSCodeをダウンロードする

Visual Studio Code が気になったらぜひダウンロードしてみてください。
ダウンロード・インストール・日本語化までは公式を見て言われたとおりにやればそんなに苦労しません。

Download：Visual Studio Code – コード エディター | Microsoft Azure

便利な使い方などは今後UPしていこうと思います。