記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【初心者向け】vscodeでの作業に便利な機能を紹介

vscodeの便利な機能を紹介。vscodeは世界中のエンジニアの中でも利用者の多い人気ソフトです、なぜ人気なのか?選ばれる理由の一つに、便利な機能が多い事があげられます。便利機能を紹介していきます。

カテゴリ: Visual Studio Code

vscodeって「どんな便利な機能があるの・・?」
「もっと便利に使いたい・・!」「少しでも効率的な開発をしたい・・!」
そんな風に考えている方も多いのではないでしょうか?

本記事ではvscodeの便利機能3点「ショートカットキー」「Emmet」「拡張機能」について解説していきます。

本記事を見ればvscodeの便利機能を知り、より効率的な開発を行う事ができます。一つでも取り入れてみてください。

Visual Studio Codeとは?

Visual Studio Code(vs code)とは、マイクロソフト社が無料で提供しているテキストエディタの事であり、世界中のエンジニアの中でも利用者の多い人気ソフトです。

vs codeが人気のある理由として5点があがられます。

1.オープンソースであり、誰でも無償で利用する事ができる。
2.Windows版・macOS版・Linux版と各OSに対応している。
3.多くの言語に対応している(英語、日本語、フランス語、ドイツ語、中国語、ロシア語)などその他、各国の言語に対応している。
4.拡張機能が豊富(デバック機能、コード補完、ソースコードのシンタックスハイライトなど)
5.軽量で早く動く(余計な機能は最初から省かれているので、ストレスなく動く)

以上の理由から最も人気のあるテキストエディタになっています。
そこで、今回はvscodeの便利機能について解説していきます。

便利機能①(ショートカットキーが豊富)

vscodeには便利なショートカットキーが豊富に用意されています。
vscodeは、マウスを使ってほとんどの操作が行えます、
しかし操作速度を上げ効率的な操作を行う為には、ショートカットーキーが欠かせません。

ショートカットキーを使いこなす事ができれば開発時間を短縮する事ができます。
便利なショートカットキーをmac/widows版で紹介します。

キー 動作 コマンドID
mac:↑+Cmd+N
win:Ctrl+Shift + N
新しいウィンドウを開く workbench.action.newWindow
mac: ↑+Cmd+W
win:Ctrl+Shift+W
ウィンドウを閉じる workbench.action.closeWindow
mac:Cmd+W
win:Ctrl+W
エディターを閉じる workbench.action.closeActiveEditor
mac:Cmd+ K F
win:Ctrl+K F
フォルダーを閉じる workbench.action.closeFolder
mac:Cmd + \
win:Ctrl + \
新しいファイル workbench.action.files.newUntitledFile
mac:Cmd+O
win:Ctrl+O
ファイルを開く workbench.action.files.openFile
mac:Cmd+S
win:Ctrl+S
保存 workbench.action.files.save
mac:↑+Cmd+S
win:Ctrl+Shift+S
名前を付けて保存 workbench.action.files.saveAs
mac:Cmd+ K W
win:Ctrl+W
ファイルを閉じる workbench.files.action.closeFile
mac:Cmd + K 、 Cmd + W
win: Ctrl+K Ctrl+W
すべてのファイルを閉じる workbench.files.action.closeAllFiles
mac:Cmd+K Enter
win: Ctrl+K Enter
作業中ファイルに追加 workbench.files.action.addToWorkingFiles
mac:Cmd + C
win: Ctrl + C
行のコピー(未選択) editor.action.clipboardCopyAction
mac:↑ + ⌘ + K
win:Ctrl+Shift+K
カーソル行削除 editor.action.deleteLines
mac:Cmd + Enter
win:Ctrl+Enter
下に行追加 editor.action.insertLineAfter
mac:↑+Cmd+Enter
win:Ctrl+Shift+Enter
上に行追加 editor.action.insertLineBefore
mac:option+↓
win:Alt+Down
カーソル行を下に移動 editor.action.moveLinesDownAction
mac:option+↑
win:Alt+Up
カーソル行を上に移動 editor.action.moveLinesUpAction
mac:↑+option+↓
win:Shift+Alt+Down
カーソル行を下にコピー editor.action.copyLinesDownAction
mac:↑+option+↑
win:Shift+Alt+Up
カーソル行を上にコピー editor.action.copyLinesUpAction
mac:Cmd+F
win: Ctrl+F
検索 actions.find
mac:Cmd+Option+F 
win:Ctrl+H
置換 editor.action.startFindReplaceAction
mac:^ + Cmd +F
win: F11
フルスクリーン表示のトグル workbench.action.toggleFullScreen
mac:↑+Cmd+=
win:Ctrl+Shift+=
ズームイン workbench.action.zoomIn
mac:Cmd+-
win:Ctrl+Shift+-
ズームアウト workbench.action.zoomOut

便利機能②Emmet

EmmetとはHTMLとCSSのコーディングを効率的にするための機能です。
定型文を打つ事で、コードを表示する事ができます。スピードも上げる事ができ、タグの閉じ忘れなども無くなるので、記載ミスも減らす事ができます。

例えばvscode、HTMLファイルに「!」を記述しtabを押します。
すると、HTMLを記載する際に記述する基本記述が、すぐに表示されます。言語のenをjaに変えればすぐに使用する事ができます。



例えばこの他にも「h2」と記載しtabキーを押せば、‹h2›‹h2›と表示する事ができます。



要素とtabが基本になり「div」などでも同じ事ができます。



要素+要素でも。例えば「div」+「img」でも要素を表示する事ができます。
+した数だけ要素を一括表示する事ができます。



CSSも記述する事ができます。
プロパティの頭文字+tabが基本になります。
c#111と入力しtabキーを押すと、color: #111;で展開されます。



この他にも
fz20で font-size: 20px;
bg#000で  background: #000;
w20で   width: 20px;
m30で   margin: 30px;といった形で記述を短縮する事ができます。

この他にもvscodeのEmmetには様々な短縮コードがあり、記述を少なく効率的な開発を行う事ができます。

便利機能③拡張機能が豊富

拡張機能とは、後付けで追加できる便利な機能のことです。
自分の好みで、欲しい拡張機能を追加し、使いやすいようにオリジナルにカスタマイズする事ができます。
vscodeはこの拡張機能が豊富にあります。
そこでオススメの拡張機能を紹介します。

Japanese Language Pack for Visual Studio Code

vscodeを日本語表示
表示を日本語表示にする事ができ、英語が苦手な人にとってはありがたい機能です。

zenkaku

全角スペースを把握
コードに全角が混じっていると、機能しないのがプログラミング。
でも半角、全角は目視では判断しにくい。そこで全角を可視化してくれる拡張機能。

HTML Snippets(HTMLのマークアップのサポート)

HTMLスニペットを表示
入力中に、入力内容に応じたHTMLスニペット(マークアップのサポート)を表示してくれます。
HTMLのコードを全て書かなくてもサポートしてくれるので開発効率、記述ミスを防いでくれる機能。

Live Server

テキストエディタの変更内容をリアルタイムでブラウザに反映
リアルタイムで変更を反映することで、ファイルを手動でリロードしなおす事なく、反映を確認できるので、効率的な開発をする事ができます。

vscode-icons

アイコンを見やすく表示
デフォルトだと少し味気ないアイコンになってしましますが、vscode-iconsで見やすいアイコン表示する事ができます。

Color Highlight

カラーコードの色を可視化
コード上でカラーを表示してくれるので、ブラウザに戻らなくても色を確認する事ができ、効率的に作業することができます。

trailing space

文末の空白を可視化する
プログラミングは文末にスペースがあると、機能しないことがあります。
スペースを可視化してくれる拡張機能。

EditorConfig for VS Code

コーディングスタイルを統一する
チームで開発を行う際、ルール統一をするための拡張機能です。

Power Mode

力強いコーディング
普段のコーディングを華やかに、便利というよりは飽きさせない拡張機能。

Prettier – Code formatter

自動ソースコード整形
自動で改行の余白、タブのサイズや位置を整形してくれる拡張機能。

Local History

変更前のファイルを保存
Local Historyを使用すると、ファイルを編集するごとに、保存時点でのバックアップがされます。ファイルを消してしまう不安を持たずに開発をするめる事ができます。

Partial Diff

選択範囲の差分を確認
選択範囲の差分を確認する事ができ、目視の工数を減らす事ができます。

Bracket Pair Colorizer 2

括弧に色をつける
括弧の範囲を色付きで目視確認できるようになり、括弧の範囲、閉じを確認することができます。

indent-rainbow

インデントを色分
インデントを色分けしてくれ目立たせてくれる拡張機能です。

Auto Rename Tag

開始タグを修正した時、閉じタグも自動修正
書き換えた時、開始タグだけしか修正していなかった、というミスを防いでくれます。

Bookmarks

エディタ内にブックマークつける
ブックマークをつける事で、どこまでコード読んだかなどの目印をつける事ができます。

Code Spell Checker

スペルチェックを実行
プログラミングでスペルミスは付きもの、目視ではなく自動確認してくれる拡張機能です。

htmltagwrap

選択したものをタグで囲んでくれる
選択したものをタグで囲んでくれるので、効率的に開発を進めまる事ができます。

HTML CSS Support

HTMLにCSS側で作ったclass名を表示
HTMLファイルCSSファイルが連動し、作成した、class名候補を出してくれるので書き間違いを防いでくれます。

CSS Peek

HTMLファイル上で、CSSファイルをチェック
HTMLファイル上で、CSSファイルをチェックしたり、class名からCSSファイルを検索できる拡張機能。

まとめ

本記事ではvscodeの便利機能3点「ショートカットキー」「Emmet」「拡張機能」について解説してきました。

一つでもとりいれ、より効率的な開発をしていただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。