【共通編】VsCodeに入れるべき必須の便利拡張機能&初期設定

環境

  • VsCode 1.63.2

この記事は何?

本記事では、VsCodeに入れるべき必須の便利プラグイン&初期設定を紹介しています。

PHP、Laravel向けのおすすめプラグインはこちら

【PHP、Laravel編】VsCodeに入れるべき必須の便利プラグイン&初期設定
本記事では、vscodeを用いて行うPHP、Laravel開発を効率化させるvscodeのプラグインを紹介します。効率的でミスのないコーディングを行うために必要な機能が備わった各種プラグインと開発のモチベーションを高めてくれるツールをご紹介しておりますので、まだ使用したことない方はぜひこの機会に使ってみてください。

VSCodeでしゃれおつなテーマ一覧はこちら

VSCodeでしゃれおつなテーマを適用して開発モチベーションを上げる
本記事では、VSCodeでしゃれおつなテーマを適用して開発モチベーションを上げる方法について紹介しています。

プラグイン

Project Manager

Project Manager - Visual Studio Marketplace
Extension for Visual Studio Code - Easily switch between projects

プロジェクトってたいてい複数あって、それぞれフォルダが分かれてますよね。そのフォルダをプロジェクト単位で登録してあげると、VsCodeからワンクリックでそのプロジェクトを開くことができます。

GitLens

GitLens — Git supercharged - Visual Studio Marketplace
Extension for Visual Studio Code - Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotati...

GitLensはVsCode上で、ポインターを当てたコードに関して、コミッターやコミットメッセージを表示してくれます。(画像だとちょっと見えにくいですが…)

Material Icon Theme

Material Icon Theme - Visual Studio Marketplace
Extension for Visual Studio Code - Material Design Icons for Visual Studio Code

フォルダーやファイルのアイコンがおしゃれになるやつです。

CodeSnap

https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap

これは何?

  • めっちゃいい感じにコードを画像としてスクリーンショットできる

使い方

  1. Ctrl + Shift + P でコマンドパレットを開き、CodeSnapを選択
  2. 対象のソースコードを選択し、CodeSnapのアイコンをクリックするだけで保存(or コピー)可能

カスタマイズ

背景色とかパディングとかいろいろカスタマイズできて楽しい。

Eslint

ESLint - Visual Studio Marketplace
Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.

コードの静的解析。

Prettier – Code formatter

Prettier - Code formatter - Visual Studio Marketplace
Extension for Visual Studio Code - Code formatter using prettier

コードの自動フォーマット。

Git history

Git History - Visual Studio Marketplace
Extension for Visual Studio Code - View git log, file history, compare branches or commits

Git logが見やすくなります。VsCodeのコマンドパレット(Ctrl + Shift + P)でgit logを実行すると、このようにコミットログを確認することができます

また、VsCode上でgitコマンドを実行したりできます。

Docker

Docker - Visual Studio Marketplace
Extension for Visual Studio Code - Makes it easy to create, manage, and debug containerized applications.

あまり注目していませんでしたが、2021年11月16日のアップデートで、ymlファイルのタブ補完機能が実装され、超愛用しています。

Search/Translate Hero – Google/Translate/Bing/Baidu/Wiki/Yahoo/Github/Npm Engine

https://marketplace.visualstudio.com/items?itemName=Wscats.search

これが地味に便利。vscode右クリックメニューからgoogle新規タブを開いて単語検索できます

Bracket Pair Colorizer

Bracket Pair Colorizer - Visual Studio Marketplace
Extension for Visual Studio Code - A customizable extension for colorizing matching brackets

カッコの対応を色付きで表示してくれます。これがないとやってられない…

Bookmarks

Bookmarks - Visual Studio Marketplace
Extension for Visual Studio Code - Mark lines and jump to them

指定したコード行にブックマークを付けてくれる。ブックマーク箇所にすぐにジャンプできます

Japanese Language Pack for Visual Studio Code

Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace
Extension for Visual Studio Code - Language pack extension for Japanese

デフォルトはメニューなどの表示言語は英語なので、日本語化したいですよね。

Path Intellisense

Path Intellisense - Visual Studio Marketplace
Extension for Visual Studio Code - Visual Studio Code plugin that autocompletes filenames

パスの入力を支援してくれる。いちいちファイルパスを入力するのはちょっとナンセンス…

Duplicate action

Duplicate action - Visual Studio Marketplace
Extension for Visual Studio Code - Ability to duplicate files in VS Code

ファイルやフォルダのコピーを作成する際に右クリックメニューからすぐに実行できる。あるテンプレートを使いまわして作成する際に便利。

GitHub Pull Requests and Issues

GitHub Pull Requests and Issues - Visual Studio Marketplace
Extension for Visual Studio Code - Pull Request and Issue Provider for GitHub

VsCode上でプルリクやissueの内容をチェックできる。神。

indent-rainbow

indent-rainbow - Visual Studio Marketplace
Extension for Visual Studio Code - Makes indentation easier to read

インデントを強調表示してくれます

SFTP

SFTP - Visual Studio Marketplace
Extension for Visual Studio Code - SFTP/FTP sync

拡張機能「SFTP」を使うと、FTPソフトを開かずにVscode上でサーバーにアップロードすることができます。

余談:各拡張機能の起動に必要な時間を一覧表示

  • vscodeで、使用している拡張機能の起動に必要な時間を一覧表示することができる
  • ctrl + shift + Pでコマンドパレットを開き、以下を入力する
    Developer:Show Running Extensions

各拡張機能ごとに起動にかかる時間を表示してくれる

初期設定

settings.jsonのすゝめ

  • vsocodeでは、settings.jsonでいろいろ設定できる仕組みになっています。
  • 設定は、例えばエディターのテーマといった基本的な内容から、適用するフォーマッターなどの応用的な内容を含みます
  • settings.jsonはユーザー単位で作成する方法と、プロジェクト単位で作成する方法がある
  • settings.jsonは、できる限りプロジェクト単位で設定することをおすすめ
  • プロジェクト単位で作成すると、settings.jsonはプロジェクトのルート直下の.vscodeというフォルダに保存される
  • ユーザー単位で作成すると、C:\Users\username\AppData\Roaming\Code\User\settings.json に保存される
  • 基本はプロジェクトごとに設定ファイルを作成し、どんなプロジェクトでも共通して設定したい内容は、ユーザー単位で設定するのが無難。

Mouse Wheel Zoom

「CTRLキー+マウスのホイール操作」でテキストフォントの拡大・縮小するための設定です。

Ctrl + , 設定画面を開き、Mouse Wheel Zoomと入力すると、下図のようなチェックボックスがあるので、これをオンにします。

これで、Ctrl + マウスホイールで拡大・縮小ができるようになりました。

workbench関連

Workbench › Panel: Default Location

パネル (端末、デバッグ コンソール、出力、問題) の既定の場所を設定できます。自分は右側が好みなので、rightで設定

Workbench › Panel: Opens Maximized

alwaysを選択し、パネルを開くときに最大化するかどうかを制御します。開くときに必ず最大化するように設定

行の折り返し

Word Wrapと入力して検索する。
[Editor: Word Wrap]の項目を「on」にする(チェックを入れる)。

ウインドウサイズに合わせて文字列を折り返してくれます。(横スクロールを無くす)

以上です。

VSCode学習におすすめの書籍

コメント

タイトルとURLをコピーしました