主に、「お笑い」「ボードゲーム」「フリーランス」「プログラミング」「音楽」を更新しています。

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

ツール

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

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

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

VSCode(Visual Studio Code)

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

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

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

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

ダウンロード方法

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

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

Visual Studio Code(ビジュアルスタジオコード)のダウンロードからインストール、日本語化までの手順

開発

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

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

NetBaens から VSCodeに変更した話
 

プラグイン(拡張機能)

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

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

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

VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか) - Qiita
言語やフレームワークによらない、オススメの汎用的な拡張機能をまとめました。 Tipsはここから。 拡張機能 24 選 1. vscode-icons アイコンがついて見やすくなる。 2. GitLens とにかく...
VSCode に必ず入れておきたい拡張機能 - Qiita
普段使用しているエディタはPhpStormですが、PHP以外を書くときはVSCodeはとても便利なので重宝しています。 私が個人的におすすめする拡張機能を紹介します。 他にも良い拡張機能があればコメントにて教えてもらいたいです。 ...
2022年最新版 VSCodeのおすすめ拡張機能まとめ
VSCodeもっと活用したいVSCode使いのためのちょっと便利なものから最強レベルまでインストールして損しない拡張機能を集めてみました。VSCodeには7000以上の拡張機能が登録されていて、テーマやフレームワークの拡張機能以外はあまり使われてないかも。Slackとの連携やMarkdownの強化など、他にも便利な機能 
VS Codeを使いこなせ! フロントエンジニア必須の拡張機能7選 - ICS MEDIA
「Visual Studio Code(略称:VSCode)」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。
Visual Studio Code入門 #06:拡張機能 VSCodeをパワーアップ。おすすめ拡張機能

ショートカット

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.10.1までアップグレードしてまじめに...
VS Code の便利なショートカットキー - Qiita
Visual Studio Codeを自分が使用する際に便利なショートカットキーを、忘れないようにまとめておく。Windows版。v1.57で再確認済み。 編集系 Ctrl + Enter カーソル行の下に空行を挿入 Ctrl...
Visual Studio Code キーボード ショートカット - Qiita
ヘルプ > キーボード ショートカットの参照で表示されるキーボードショートカットリスト(下のリンク)をまとめて日本語訳したものです。 Windows macOS Linux 一般 Windows macOS L...
プログラミングテキストエディタ【VScode】#4 コーディングが10倍効率よくなるVScodeのショートカットキーを覚えよう
Visual Studio Code入門 #09:キーボードショートカットを覚えて、マウスを使わず開発しよう
Visual Studio Code(VSCode)のよく使うショートカットなどを紹介!できるだけ無駄な動きを減らして、爆速コーディングに近づいていきましょう!

その他VScode関連動画 サイト

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

VSCode、何がそんなに強いのか
エディタのオススメはVSCode!プログラミング初心者やフロントエンドエンジニアを目指す方はVSCode一択!

VSCodeに関するメモ

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

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

Visual Studio Code 常に新しいタブでファイルで開くようにする | ウェブのましじめ
北九州のウェブアクセシビリティに強いホームページ制作事業者ウェブのましじめです。CMS・HTML・JavaScript・イラストなどホームページ制作をお手伝いします。「よりよいウェブサイトの作成のお手伝い」を理念にウェブサイトの制作をサポート。
タイトルとURLをコピーしました