【簡単紹介】VSCodeでよく使うショートカットキーとおすすめ拡張機能

今回はテキストエディタの一つである、VSCodeについて簡単に紹介します。

この記事では、VSCodeでよく使うショートカットキーおすすめ拡張機能について説明していきますので参考にしてください♪

VSCodeでよく使うショートカットキー

最低限覚えておきたい『ショートカットキー』一覧(mac OS編)

VSCode以外で使えるショートカットキーもあるので覚えておくと便利ですね

キー(macOS)動作
⌘Cコピー
⌘X切り取り
⌘Shift Pコマンドパレットを開く
⌘S保存
⌘Dマルチカーソル
(選択した単語と同じものにカーソルを当てる)
⌘A全選択
⌘←行頭に移動
⌘→行末に移動

VSCodeのおすすめ拡張機能

Japanese Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

英語表記を日本語表記にしてくれる拡張機能

インストールが完了したら、「⌘+Shift+P」を押してコマンドパレットを開きます。

「configre display language」と入力し選択すると

『en』か『ja』と出てきます

English(英語)にするか、Japanese(日本語)にするか、という意味ですね

ここで『ja』を選択。

これで日本語表記で表示されるようになりました!

Live Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

簡易的なローカルサーバー

ファイルに変更を加えると自動でブラウザをリロード(更新)してくれるので

いちいちブラウザをリロードする作業短縮になり便利です

Live Serverを使うにはVSCodeの下にある「Go Live」をクリック

するとブラウザの方で現在編集しているファイルの画面を表示してくれます。

ファイルに変更を加え、保存すると、

上記の動画のように勝手に更新してくれます!

Path Autocomplete

https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

『パスの入力』を楽にしてくれる拡張機能

IntelliSense for CSS class names in HTML

https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

CSSのclassを入力する際にclass名の候補を提示してくれる拡張機能

インストールし終えたら、コマンドパレットを開き、

Cache CSS class definitions.

と入力し選択

classを書く際に動画のように入力候補を提示してくれます

indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

インデントに色をつけてくれる拡張機能

インデントごとに色を変えてくれるのでコードがとても見やすくなります

CSSTree validator

https://marketplace.visualstudio.com/items?itemName=smelukov.vscode-csstree

CSSで間違った文法やスペルミスをした際に指摘してくれる拡張機能

HTML Snippets

https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

HTMLのタグを補完してくれる拡張機能

Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

『開始タグと閉じタグを直したいと思った時に2つも直すのはちょっと面倒…』

そんな時にとても便利な拡張機能

まとめ

VSCodeでよく使うショートカットキーとおすすめ拡張機能について

簡単に紹介しました!

作業効率もぐんっ!と上がるので、

ぜひ今回紹介した『ショートカットキー』や『拡張機能』を取り入れてみてくださいね

FOLLOW ME
>フリーランス をもっと気軽に!

フリーランス をもっと気軽に!

現役フリーランサーによる役立つ情報サイト
主に『Web』に関する知識を掲載。

デザインやライティング術、コラムなどの
フリーランスが充実するような記事も掲載中。

CTR IMG