8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

VSコード使うならこれ入れとけ

Last updated at Posted at 2022-11-16

はじめに

こんにちは!社会人になって半年が経過したタイガです。Salesforceエンジニアとなりまして、青い雲とにらめっこする毎日を過ごしております。

今日はVScodeの拡張機能について書いていきたいと思います。日々業務をしている中で、意外と拡張機能を利用できていない人が多い気がしたので。調べればまぁ似たような記事は星の数ほど出てくるとは思いますが、私も一通り書いてまとめてみようと思いました。

VScodeを利用している方は、ざっとでいいのでこの記事をスクロールしてなんかよさげな機能がないか探してみてみてください。よさげな機能があった際には(いや無くても)LGTMお願いします!

初期設定系

vscodeの設定画面から行う設定です。

自動保存機能

ctrl+Sでコード書くたびに保存している方はこの設定を済ませておきましょう。以下、設定方法です。

1,左上の「ファイル」メニューの中にある「ユーザー設定」をクリックし、さらにサブメニューの中の「設定」をクリックします。
image.png
2,VScodeの設定画面が表示されたら上の検索ボックスに「Auto Save」と入力してください
image.png

3,真ん中らへんにあるこの選択リストをクリック。今回は「afterDelay」を選択しましょう。
image.png
4、下に何秒後に自動保存するのか記述できるようになるので、「1000」と記載しておきましょう。これで、記述を終了した1秒後にすべて自動で保存されるようになります。
image.png

いかがでしたでしょうか。いちいちctrl+Sで保存していると、保存し忘れなどでエラーが発生しかねないのでこの設定は早めに終わらせておきましょう。

コードを自動で折り返す機能

私が最近知った機能です。条件文などが長すぎて横にスクロールしないといけなくなったときにめちゃめちゃ役立ちます。
1,左上の「ファイル」メニューの中にある「ユーザー設定」をクリックし、さらにサブメニューの中の「設定」をクリックします。
image.png
2,VScodeの設定画面が表示されたら上の検索ボックスに「editor.WordWrap」と入力してください。
3,真ん中らへんに、「Editor:Word Wrap」という項目が出てくるので、オンにします。
image.png
これで完成!!
実際は、↓の写真のようにコードぞ自動で折り返してくれます。
image.png

拡張機能系

拡張機能をインストールして行う設定です。

Japanese Language Pack for Visual Studio Code

image.png
こちら日本人ならほぼ全員いれるであろう拡張機能。英語を日本語訳してくれるツールです。VScodeいれたらまず最初に入れておきましょう。

vscode-icons

image.png
ファイルにアイコンを付与してくれるツールです。見た目でファイルを操作できるようになるので便利です。
↓こんな感じです。
image.png

indent-rainbow

image.png
こちらはインデントのスペースを色で判別してくれるものです。
↓ちょっと見づらいかもしれませんが、インデントが黄色、緑、赤、青になっています。半端なインデントを錬成しなくて済みます。笑
image.png

Code Spell Checker

image.png
↓のようにスペルチェックしてくれるツールです。英語苦手な人とか、タイポ防ぐのに便利です。
image.png

zenkaku

image.png
全角スペースによるエラーを防いでくれる機能です。これ個人的になかなか便利だと思っています。全角スペースって気づくの難しいので、ぜひ入れておきましょう。
入れると↓みたいな感じになります。
image.png

Auto Rename Tag

開始のタグを修正したときに終わりのタグも自動で修正してくれるタグです。いちいち半角にしたりカーソル合わせたり面倒だと思うので、利用しましょう。
image.png

Auto Close Tag

上と似たような機能ですが、便利なのでついでに紹介。開きタグを入力すると閉じタグも自動で入力される便利なツールです。
image.png

Error Lens

エラーが出たときにエラー部分の横にエラー文を書きだしてくれる拡張機能です。
例えば「')'が足りません!!」みたいなエラーがコンソールで出たときに「いやどこの)だよ笑」ってなることないでしょうか?笑」その時この拡張機能を利用するとエラー部分に直接エラー文が出るのでわかりやすくて便利です。
image.png

Highlight Matching Tag

タグをクリックしたときにそれと対になっているタグを自動で見つけ出してくれる機能です。
コードが複雑になった時に便利です。
image.png
↓bodyをおしたら終わりのbodyを見つけてくれました。
image.png

Excel Viewer

ちょっとこれまでと毛色が変わりますがこれも便利なのでぜひ入れときましょう。
Excelの資料を見やすくしてくれるツールです。ExcelをVScodeで開きたいときに便利です。
↓こんな感じになります。
image.png

終わりに

いかがでしたでしょうか。設定系も拡張機能系もすべて無料で、入れたからといって何かめんどくさくなるわけではないのでとりあえず片っ端からどんどんインストールしていきましょう!

8
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?