【VS Code】Visual Studio Code ~ 入門編 ~

■ はじめに

https://dk521123.hatenablog.com/entry/2019/09/09/122954

で、Visual Studio Code (VS Code) が長くなったので、わけてみた。

目次

【1】VS Code
【2】動画
【3】設定変更
 1)Proxy変更
 2)個人的な設定
【4】主なショートカット
 1)検索 / Grep / 置換
 2)コメント
【5】用語整理
【6】VS Code あれこれ
 1)Draw.io に対応

【1】VS Code

* サポートOS : Windows / Linux / mac

https://code.visualstudio.com/download

【2】動画

とっかかりとして、以下の動画をみてみるのも手かも。

https://dotinstall.com/lessons/basic_vscode

【3】設定変更

 * [File]-[Preferences]-[Settings] 又は 「Ctrl + ","キー」押下で
   設定変更画面に遷移する

1)Proxy変更

[1] 「Ctrl + ","キー」押下
[2] 検索欄で「Proxy」と入力
[3] Http: Proxy欄に、ProxyサーバのURLを入力する

2)個人的な設定

[a] 空白行の表示
https://www.javadrive.jp/vscode/setting/index8.html

[1] VS Code の [File]-[Preferences]-[Settings]を選択
[2] 検索欄に「whitespace」と入力
[3] 「Editor: Render Whitespace」欄の「boundary」を選択

【4】主なショートカット

1)検索 / Grep / 置換

検索

検索   :Ctrl + F
次の検索:f3キー
前の検索:Shift +Enter

Grep

# 検索(Ctrl + F)に「+ Shift」だけ
Grep (グレップ)  :Ctrl + Shift + F

置換

置換  :Ctrl + H

2)コメント

コメントを付ける:Ctrl+K ⇒ Ctrl+C
コメントを外す :Ctrl+K ⇒ Ctrl+U

【5】用語整理

アクティブバー(Active Bar)

* 左側のバーのこと
* 非表示にするには、右クリックし [Hide Active Bar]
* 表示するには、[View]-[Appearance]-[Show Active Bar] を選択

コマンドパレット (Command Palette)

* Ctrl+Shift+P または [View]-[Command Palette] で開く

【6】VS Code あれこれ

1)Draw.io に対応

VS Code で Draw.io のプラグインが対応された模様。

https://www.youtube.com/watch?v=iL7nNOtl_mI

Draw.ioについては、以下の関連記事を参照のこと。

図作成ツール / サイト ~ Draw.io / draw.io Desktop / LucidChart ~
https://dk521123.hatenablog.com/entry/2019/11/21/223833

関連記事

Python統合開発環境IDE
https://dk521123.hatenablog.com/entry/2019/09/09/122954
Visual Studio CodeLinuxあれこれ ~
https://dk521123.hatenablog.com/entry/2023/12/01/000000
Visual Studio CodePythonを設定する ~
https://dk521123.hatenablog.com/entry/2019/10/24/000000
Visual Studio CodePython拡張 ~
https://dk521123.hatenablog.com/entry/2020/10/10/000000
Visual Studio Code ~ TypeScript ~
https://dk521123.hatenablog.com/entry/2022/03/06/000000
Visual Studio Code ~ Vue拡張 ~
https://dk521123.hatenablog.com/entry/2021/01/22/224638
Visual Studio Code ~ WSLプラグイン
https://dk521123.hatenablog.com/entry/2023/04/02/172851
図作成ツール / サイト ~ Draw.io / draw.io Desktop / LucidChart ~
https://dk521123.hatenablog.com/entry/2019/11/21/223833