• 虹色ミツバチ
  • freoカスタマイズメモ、テンプレート・プラグイン配布/officeTIPS
検索プラグイン
虹色ミツバチ

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

【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)
Light(Visual Studio)
Quiet Light
Quiet Light
Dark(Visual Studio)
Dark(Visual Studio)
Monokai
Monokai
Red
Red
Tommorow Night Blue
Tommorow Night Blue
シンタックスハイライトが優秀

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

シンタックスハイライト

1行目…正しい表示
2行目…右辺の単位がおかしい(正しくは「rem」)
3行目…プロパティが間違っている(正しくは「display」)

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

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

構文エラー

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

拡張機能が豊富

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

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

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

Gitが使える

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

Git

VSCodeをダウンロードする

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

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

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

ページ移動

関連記事

ページ上部へ