サイトアイコン よろずメモ 学び 稼ぎ 趣味 YOROZUMEMO

VSCode( Visual Studio Code)を使って開発を円滑に

PHPでの開発を仕事にしていて、他言語も自宅学習し始めました。

プログラミングする際に以前はeclipse(エクリプス)やNetbeansを使用していましたが、最近VSCodeに出会いハマってしまいました。

今回はプログラマー、システムエンジニアの方向けに万能エディタであるVSCodeをご紹介したいと思います。

VSCode(Visual Studio Code)

Microsoftが開発したWindows、Linux、macOS用のソースコードエディタです。

デバッグ、Git管理、GitHub、シンタックスハイライト、インテリジェントなコード補完 、スニペット、コードリファクタリングのサポートが含まれています。

カスタマイズ性が高く、テーマやキーボードショートカット、環境設定を変更できたり、機能を追加する拡張機能をインストールすることができます。

IDEとは異なりエディタではありますが、高機能で軽くとても使いやすいエディタです。

ダウンロード方法

下記公式サイトにて「今すぐダウンロード」をクリックすればダウンロードできます。

こちらの動画がわかりやすく解説してくださっています。

開発

開発にも使用できるエディタとして人気です。

僕も以前はNetBeansを主流にしていましたがVSCodeを知ってから乗り換え、どのパソコンにおいてもVSCodeでコーディングするようになりました。

NetBaens から VSCodeに変更した話
 

プラグイン(拡張機能)

拡張機能を追加することによりより円滑にコーディングすることができます。

僕も様々な拡張機能にお世話になっています。

拡張機能関連のサイト 動画

VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか) - Qiita
言語やフレームワークによらない、オススメの汎用的な拡張機能をまとめました。Tipsは**ここ**から。拡張機能 24 選1. vscode-iconsアイコンがついて見やすくなる。2. G…
VSCode に必ず入れておきたい拡張機能 - Qiita
普段使用しているエディタはPhpStormですが、PHP以外を書くときはVSCodeはとても便利なので重宝しています。私が個人的におすすめする拡張機能を紹介します。他にも良い拡張機能があればコメ…
2024 VSCodeのおすすめ拡張機能まとめ
VSCodeをもっと活用したいVSCode使いのための拡張機能まとめです。コーディング効率化できる定番拡張機能からAI対応、仕事効率化、ノートアプリになる超便利な拡張機能まで、2万本以上ある拡張機能の中から2023年におすすめできるものを厳選して集めてみました。
VS Codeを使いこなせ! フロントエンジニア必須の拡張機能7選 - ICS MEDIA
「Visual Studio Code(略称:VSCode)」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。

ショートカット

VSCodeはショートカットで操作を効率化することもできます。

よく使うものはまとめておきますので、ぜひ活用してプログラミングスピードをアップする助けになればと思います。

※Windowsによるキーですので、Macは別キーになる可能性があります。

全体コード検索 Ctrl + Shift + F
開いているファイル内コード検索 Ctrl + F
ファイル名で検索 Ctrl + P
コメントアウト(行) Ctrl + /
タブを閉じる Ctrl + W
保存 Ctrl + S
指定行ジャンプ Ctrl + G →行数を指定

まだ多くのショートカットキーが存在し使いこなせていないので下記サイトから吸収して使用してみてください!

ショートカット関連記事 動画

【Windows版】VS Code キーボードショートカット一覧 (オススメ付き) - Qiita
VS Codeのデフォルトショートカット一覧です。★が付いているのは個人的なオススメです。キー設定をカスタマイズしたい場合は末尾を御覧ください。2020/10/06追記:未だにLGTMしてくだ…
【Mac版】 VisualStudioCode キーボードショートカット - Qiita
Visual Studio Codeは0.5.0のときにインストールして使ってみてしばらく様子見だなあって思ってあまりまじめに使っていなかったのですが、オープンソース化されたので一念発起してv0.1…
VS Code の便利なショートカットキー - Qiita
Visual Studio Codeを自分が使用する際に便利なショートカットキーを、忘れないようにまとめておく。Windows版。v1.57で再確認済み。編集系Ctrl + Enter カーソル…
Visual Studio Code キーボード ショートカット - Qiita
ヘルプ > キーボード ショートカットの参照で表示されるキーボードショートカットリスト(下のリンク)をまとめて日本語訳したものです。WindowsmacOSLinux一般基本編集ナビゲー…

その他VScode関連動画 サイト

Visual Studio Codeとは?インストールや使い方も現役エンジニアが解説 | TechAcademyマガジン
初心者向けにVisual Studio Codeについて解説しています。これはMicrosoft社が提供するコードエディタです。Visual Studio Codeの特徴とメリット、導入と設定の手順、拡張機能の一部を紹介します。エディタ検討時の参考にしてください。
VSCodeとは?開発に役立つ使い方、トレンド記事やtips - Qiita
公式サイト: Visual Studio Code - Code Editing. Redefined公式リファレンス: Documentation for Visual Studio CodeWikipedia: Visual Studio Code - Wikipedia
VSCodeの秘伝のワザを大公開! | DevelopersIO
こんにちは!CX事業本部の片岡です。今回は自分が使っているVSCodeのショートカットと拡張機能を紹介します。

VSCodeに関するメモ

新しいタブとして開く方法

デフォルトではファイルを開くたびに元のタブは閉じて新しいタブが開いてという風になるため、新しいタブとして開いていく方法を下記のサイトの通りにすれば変更できます。

Visual Studio Code 常に新しいタブでファイルで開くようにする | スタッフブログ | 福岡・北九州のウェブアクセシビリティ専門web制作会社
Visual Studio Code を使っていてのメモです。 新規ファイルを開いたときに未編集だった場合は開いているタブを上書きして新しいファイルが開きます。 止めたい場合はこちらの設定を変更すると良さそうです。 常に新しいタブでファイルで開くようにする 「基本設定→設定」から変更 true → false "wor 
モバイルバージョンを終了