どのエディタを使っていいかわからないや・・・
無料コードエディタ「VSCode」についてと導入方法を解説していきます！
VSCodeとは
Visual Studio Code（ビジュアルスタジオコード）を略してVSCode、
Microsoft社が無償で公開しているコードエディターになります。
それ以外に「Dreamweaver」「Sublime Text」「Atom」「Brackets」などの
コードエディターがありますが、僕が今まで触ってきた経験上VSCodeが一番良かったです！
VSCodeを使う特徴・メリット
- 無料で配布されている
- オープンソースとして開発されている
- クロスプラットフォーム対応（Windows、Mac、Linux）
- 動作が軽い
- Emmetなどが標準仕様
- 拡張機能が多い
- アップデートが頻繁にある
- マルチカーソルなど便利な機能
などが挙げられます。
ここ最近では一気に使用ユーザーも増え、デファクトスタンダート（業界標準）になってます。
やはり人気の理由は「無償で軽くて高機能」ですね！
さっそくインストール方法を紹介していきます。
インストール方法
上記の公式サイトにアクセスして、左側の青いボタンをクリックしてダウンロード！
※下矢印をクリックするとMac、Windows、Linuxを選択することができます。Stableで大丈夫です！
日本語パックを拡張
インストールしたばかりだと、デフォルト（標準）が英語表記になってしまってわかりずらいので
日本語表記できるように拡張機能を使います！
一番左のアクティビティバーの最下部の四角が4つ表示しているアイコンをクリック。
そして検索窓に、
Japanese Language Pack for Visual Studio Code
とコピペして検索をかけてください。
そうするとMicrosoftが作成した日本語パックが表示されますのでインストールして有効化してください！
VSCodeの使い方
まず覚えておきたいことは、一番左のアクティビティバーです！
アクティビティバー
一番左に位置するバーの意味をご紹介。
 |
エクスプロ―ラー | ファイルやフォルダー、ワークスペースを一覧表示 |
 |
検索 | ファイルやフォルダー内の指定したキーワードを検索 |
 |
ソース管理 | Gitなどの連携 |
 |
実行とデバッグ | プログラムを実行・デバッグ |
 |
拡張機能 | 拡張機能をインストールしたり、機能を管理 |
とくに「エクスプローラー」「検索」「拡張機能」はよく使います！
「ソース管理」「実行とデバッグ」に関しては僕はあまり使用していないので割愛させていただきます。
画面分割
画面を分割できる機能もVSCodeの強みになります！
開きたいファイルを右側のメイン画面にドラッグ＆ドロップで分割が簡単にできます！
同じファイルでも分割して表示することができるので長文でスクロールするのが大変なコードでも安心です。
ぜひ覚えたい！必須テクニック
liタグでまとめてclassやidを追加したいときにオススメ！
マウスでドラッグして選択範囲を指定する方法もアリ！
キーボードだけでのやり方で覚えておけばOKです。
Macの場合は、Option＋↑or↓でできるよ！
検索窓を表示させて、今回は「あ」を「わ」に置換してみました！
置換の方法は検索窓の左側にある＞をクリックし、置換するワードを入力し、右側のアイコンをクリックしたら出来ます。
Ctrl＋Shift＋Fでフォルダ内検索もできるよ！
便利なショートカット
便利な拡張機能2選
Live Server
この拡張機能は、ブラウザでプレビュー表示してくれる優れモノです！
Go Liveをクリック
ブラウザが開きプレビュー表示されますInsert <br> Tag
この拡張機能は、Shift＋Enterで改行タグ<br>をかんたんに入力してくれます。
まとめ
今回はVSCodeのインストール方法・使い方・必須テクニック・ショートカット・拡張機能2点をご紹介しました！
拡張機能はまだまだ便利なモノがあるので、今後の記事にて書いていきますっ
また、VSCodeではEmmetというHTMLやCSSの入力を補助するプラグイン（拡張機能）が標準装備されております。
爆速コーディングを挑戦してみたいと思う人はぜひEmmetを紹介している記事を読んでもらえればと嬉しいです！
VSCodeは無料でとても使いやすいコードエディターなので
気になられたらぜひ試してみてください！
最後までお読みいただきありがとうございましたっ！！
コメント