5
8

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 3 years have passed since last update.

【VSCode導入】VSCodeの魅力と最低限すべき拡張・設定

Last updated at Posted at 2019-03-05

今までエディタはAtomを使っていたのですが、最近よく聞くVSCodeを使ってみたら、
かなり使い勝手がよかったので、もしまだ使ったことない人へ向けに良さを発信したいと思います。

VSCodeインストール(Mac向け)

#1.Visual Studio Code (VSCode)がオススメの理由

理由は2つ。

①エディタの中で速度が早い点
起動時間や、大量の文字列置換などが早いです。

検証内容 Atom VSCode
起動時間 2.84 1.96
※単位は全て秒
参照記事

②プラグインがたくさんあり、カスタマイズの幅が広い

これは、次の見出しで解説していきます。

#2.ターミナルからVSCodeを起動するやり方

1.Cmd + Shift + P でコマンドパレット開く。
2.Shellと検索する
3.インストールする

スクリーンショット 2019-03-05 20.30.56.png

#3.オススメの拡張機能

拡張機能は、この左にあるボタンをクリックして1つずつinstallしてください。
Show Popular Extensionsは人気な拡張機能のリストが表示されます。

pic.png

こちらの記事が.gif付きでわかりやすかったので参照させてもらいます。
参照記事

その中で個人的に入れるべきというものを記述しておきます。
もし、リンク飛ぶのが面倒だったら、こちらの文字をコピーして拡張機能を導入してください。
1. vscode-icons
2. GitLens
4. Git History
5. Bracket Pair Colorizer
8. Bookmarks
11. Japanese Language Pack
12. Path Autocomplete
13. Rainbow CSV
15. Duplicate action
16. GitHub Pull Requests
19. Output Colorizer
22. Trailing Spaces
23. Regex Previewer

そのほか、個人的にオススメの拡張機能
・Color Highlight
・Auto Rename Tag
・Auto Close Tag
・Fresh Dark Theme (Codeが見やすいように色をつけてくれる。)

#4.おすすめのショートカットキー
cmd + 「,」 => 設定
cmd opt → / ← => ファイルを=右や左に移動する。

#5.備考
その他、オススメがあったら随時共有します。

公式ドキュメント

5
8
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
5
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?