ホーム > ブログ > Windows女子 > VS Codeが便利で腰抜かしそうになった件

VS Codeが便利で腰抜かしそうになった件

2015.08.01

先日、VisualStudio CodeをDLしたのですが、最近ちょいちょいつついて便利すぎて腰抜かしそうになったので使い方について簡単にまとめてみました。

そもそも、VisualStudio Codeってなんぞ?

VisualStudio Codeはコーディングに特化したテキストエディタです。
Visual Studioがとても優秀なのは使ったことがある方なら十分知っているとは思うのですが、こちらはより軽量でMacやLinaxでも使えます。

DreamWeaverの重さにうんざりした私たちコーダーにピッタリのツールの一つと言えるでしょう。

SublimeText、ATOMなど素敵なテキストエディタもありますが、MSやってくれたな!というのが正直な感想。先日、早速アップデートしたし早い進化を期待しちゃうぞ(^^♪

使い方を少しまとめてみました

フォルダを一括で読み込む

プロジェクトごとにまとめたフォルダを一括で読み込むことができます。

右側からフォルダオープン。

code_01.jpg

すると以下の通りだーっと、ツリー上に表示されます。

code_02.jpg

地味に便利、画面を分割して表示

ファイルを分割して表示可能です。新たに開きたいファイルを選択して、右クリック。
そうするとOpen to the Sideと表示されます。Control + EnterでもOK。

code_03.jpg

ソースの長いファイルを編集したいときは2重に開くことも可能です。右上のSlpit Editorをクリックするか、ショートカットControl + \で分割できます。

code_04.jpg

画面は最大3分割までできます。

ステータスバーからステータスを変更

画面下側にステータスバーと呼ばれるものがありますが、変えたい項目をクリックすると変更可能です。
例えば、言語の種類など、Plane Textからhtmlに変更すると、シンタックスハイライトが効いてコードも見やすくなります。

code_06.jpg

コマンドパレットが便利

Sublime Textでもありますが、コマンドパレット便利ですね。

もちろん、VS Codeにもあります。

ファイル名の右横あたりをクリックするかControl +Pでコマンドパレットを起動できます。

code_05.jpg

ざっとこんな感じ

  • >…ショートカット一覧の表示
  • :…任意の行の移動(:30と入力すると30行目に移動)
  • !…エラーの検索

補完が効く

補完が効くのでコードを覚えなくても大丈夫。VSの補完機能はピカイチだと思っている。

おすすめショートカット

まとめて同じフレーズを変更

変えたいフレーズを選んでControl + shift + Lです。
他にも便利なショートカットがあるので、コマンドパレットに>と入力して、ちょっとずつ覚えていきましょう。

コメントアウト

コメントアウトしたい部分を選んでControl + K,Control + Cです。ちょっとしたコンボですね(笑)

どうでもいいけどテーマも選べる

はっきり言ってどうでもいいけど、テーマも変更可能です。
View>themeで3種類から選べます。

はっきり言ってどうでもいいです。

大切なことなので2度言いました。

Emmetが最初から入っている!!

最近知ったEmmetですが、VS Codeには最初から入ってます。
ちょっと書き方を覚えないといけませんが、これは相当便利です。

せっかくなのでチャレンジしてみたいこと

今度はここら辺をチャレンジしたいです~^ε ^。

Visual StudioのWebサイト開発のタスクをVSCodeでも

この記事を書く際に参考にしたサイト

この記事のタグ