【わかりやすく解説】コードエディターはVSCodeが一番使いやすい!- インストール方法と使い方を紹介 –

コードエディターはVSCodeは一番使いやすい、インストール方法と使い方を紹介
コーディングを始めたいけど、
どのエディタを使っていいかわからないや・・・
とお悩みのコーディングを始めたい人におすすめの
無料コードエディタ「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の強みになります!

ゆうくん
おぉ!HTMLとCSSを同時で開けるのはすごくありがたい!!

開きたいファイルを右側のメイン画面にドラッグ&ドロップで分割が簡単にできます!
同じファイルでも分割して表示することができるので長文でスクロールするのが大変なコードでも安心です。

ぜひ覚えたい!必須テクニック

CtrlDで選択範囲の追加

liタグでまとめてclassやidを追加したいときにオススメ!

CtrlShiftDで行単位で選択範囲の追加

マウスでドラッグして選択範囲を指定する方法もアリ!
キーボードだけでのやり方で覚えておけばOKです。

Altorで上下移動

Macの場合は、Optionorでできるよ!

CtrlFでファイル内検索

検索窓を表示させて、今回は「あ」を「わ」に置換してみました!
置換の方法は検索窓の左側にある>をクリックし、置換するワードを入力し、右側のアイコンをクリックしたら出来ます。

CtrlShiftFでフォルダ内検索もできるよ!

便利なショートカット

CtrlBでアクティビティバーを表示・非表示できる
AltZでコードを改行or横スクロールに切り替える
ゆうくん
さいごに要れておいて間違いなしの拡張機能2選を紹介するよ!

便利な拡張機能2選

Live Server

この拡張機能は、ブラウザでプレビュー表示してくれる優れモノです!


Go Liveをクリック
ブラウザが開きプレビュー表示されます

Insert <br> Tag

この拡張機能は、ShiftEnterで改行タグ<br>をかんたんに入力してくれます。

ゆうくん
地味に便利!!

まとめ

今回はVSCodeのインストール方法・使い方・必須テクニック・ショートカット・拡張機能2点をご紹介しました!
拡張機能はまだまだ便利なモノがあるので、今後の記事にて書いていきますっ

また、VSCodeではEmmetというHTMLやCSSの入力を補助するプラグイン(拡張機能)が標準装備されております。
爆速コーディングを挑戦してみたいと思う人はぜひEmmetを紹介している記事を読んでもらえればと嬉しいです!

Emmet【HTML編】はこちら

[template id="3834"] ・HTML、CSSのコーディングに慣れてきたから速く打ちたい! ・効率よくスマートにコーディングをしたい! 今回はHTML、CSSなどのコーディング作業を爆速になる!? 「E[…]

Emmetを使って爆速コーディング!HTML版
Emmet【CSS編】はこちら

[template id="3834"] ・HTML、CSSのコーディングに慣れてきたから速く打ちたい! ・効率よくスマートにコーディングをしたい! このようなお悩みの人におすすめのEmmet【CSS】をご紹介します![…]

Emmetを使って爆速コーディング!css編

VSCodeは無料とても使いやすいコードエディターなので
気になられたらぜひ試してみてください!

最後までお読みいただきありがとうございましたっ!!

このブログを読んで「いいね」「面白かった」と思っていただけたら
下記バナーをポチッと宜しくお願いします!!今後の励みになりますっ^^