VsCode の編集 - PukiWiki

#contents

*** settings.json の開き方 [#h21ea373]
- [CTRL] + ,(カンマ)
- 上のツールバーの &ref(settingsjason_icon.jpg); の左側のアイコンをクリック

*** コマンドパレット = Ctrl + Shift + P [#f0a1491b]

*** 文字サイズの変更 [#g159c395]
- 拡大：command（⌘） + シフト（⇧） + マイナス（-）
- 縮小：command（⌘） + マイナス（-）

*** wrap / nowrap の切り替え [#me16bc9f]
- [ALT] + Z でトグル

*** 複数エディターの同時スクロール [#cc213485]
- compare モードにすると同時スクロールする

*** キーボード・ショートカット [#r42141c8]
|エディターのタブ切り替え|[CTRL]+[PAGE Up]/[Page Down]||
|ターミナル等からエディター|[CTRL]+0/1/2 (エディターの TAB 番号)||
|エディターとターミナルのフォーカス交換|control ;|カスタム拡張（下記）|
|プログラムの実行|[F5]||

*** キーボードショートカットのカスタマイズ [#oda441c6]
- 左側ツールバー下の歯車アイコンの キーボード ショートカット
- 右上の{}アイコンをクリックすると jsonファイル（keybindings.json）の編集が可能になる

- control ;でフォーカスが移動できるショートカットを設定
 [
     {
         "key": "ctrl+;",            "command": "workbench.action.terminal.focus",
                                     "when": "editorTextFocus"
     },
     {
         "key": "ctrl+;",            "command": "workbench.action.focusFirstEditorGroup",
                                     "when": "terminalFocus"
     }
 ]

*** マウスのセンターボタンによるペーストを無効にする [#le61bc6f]
- 上のキーボード・ショートカットのカスタマイズと同じ手順で setting.json ファイルの編集画面を出す
- &color(red){selectionClipboard}; を検索し disable にする（以下の写真の画面）
- &ref(vscode_paste_disableA.jpg);
- [[Disable middle-click paste:https://github.com/Microsoft/vscode/issues/14610]]
- &color(red){これだけではペースト機能が無効にならなかったので、以下を追加で実行};
-- Install xbindkeys xsel xdotool
-- Place this in ~/.xbindkeysrc
 "echo -n | xsel -n -i; pkill xbindkeys; xdotool click 2; xbindkeys"
 b:2 + Release
-- Reload xbindkeys -p
-- Run xbindkeys on startup, pkill xbindkeys to stop.
-- [[元ネタ:https://unix.stackexchange.com/questions/24330/how-can-i-turn-off-middle-mouse-button-paste-functionality-in-all-programs]]

*** プログラム実行時の引数の定義 [#o28ff712]
-プロジェクトディレクトリ/.vscode/{}launch.json に "agrs": [] のリストに追加　
-{}launch.json はデバッグの構成から編集することができる
 {
     // IntelliSense を使用して利用可能な属性を学べます。
     // 既存の属性の説明をホバーして表示します。
     // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
         {
             "name": "Python: Current File",
             "type": "python",
             "request": "launch",
             "program": "${file}",
             "console": "integratedTerminal",
             "args": ["kddi2019.tex"]
         }
     ]
 }

*** プログラム実行時のディレクトリの設定 [#v31e5de0]
- launch.json に &color(red){"cwd": "${fileDirname}"}; を設定すると、実行プログラムのある場所がカレントになる
{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Current File",
            "type": "python",
            "request": "launch",
            "program": "${file}",
            "console": "integratedTerminal",
            "cwd": "${fileDirname}",
            "args": [
                "-t",
                "../test_tex",
                "-s",
                "../JP_orig",
                "-i",
                "index_match.txt",
            ]
        }
    ]
}

*** git（git history = git log）の利用 [#ub828256]
- [[VSCodeでのGitの基本操作まとめ:https://qiita.com/y-tsutsu/items/2ba96b16b220fb5913be]]

*** 改行コード（CRLF/LF）の表示 [#wed3d7b2]
- line-endings というプラグインをインストール
- settings.json に以下の設定を追加
 "editor.renderControlCharacters": true

- &ref(CRLF.jpg);

*** Javascript のデバッグ [#qf090cb6]
- Dajngo アプリのデバッグを行っているとクライアント側の Javascript のコード（Chrome で実行）にはブレークがかからない
- vscode 拡張機能の 「Debugger for Chrome」を使って Javascript のコード（特に Ajax のコード）をデバックできるようにする
- .launch.json を開き右下の ”構成の追加” ボタンを押して Chrome Launch を選択して以下のように編集
-- ポート番号を Django が使う番号（＝8000）に変更
-- static file を見つけられるようにパスを追加
          {
             "type": "chrome",
             "request": "launch",
             "name": "Launch Chrome",
             "url": "http://localhost:8000",
             "webRoot": "${workspaceFolder}",
             "pathMapping": {
                 "/static": "${workspaceFolder}/fview/static/"
             }
         },
- &color(red){通常は Django のデバッグモードから Django を起動するが、vscode 外のコマンドラインから Django を起動した状態で、デバッグモードで Launch Chrome を起動する};

*** （悲報）perl debug はサポートされなくなった (2022-09) [#nb2bf54e]
- https://marketplace.visualstudio.com/items?itemName=mortenhenriksen.perl-debug

*** markdown ドキュメントの編集 [#ufe098a4]
- プラグインをインストールする
-- [[Markdown All in One:https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one]]
-- [[Markdown PDF:https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf]]
- font は  ''BIZ UDゴチック'' モリサワのオープンソース）、''MigMix 2P'' を利用する
- font を指定する
-- C:\Users\magu7\.vscode\extensions\yzane.markdown-pdf-1.4.4\styles を編集する
--- markdown.css
 body {
 	font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, "BIZ UDGothic", "MigMix 2P", "Ubuntu", "Droid Sans", sans-serif);
 	font-size: var(--vscode-markdown-font-size, 14px);
 	padding: 0 26px;
 	line-height: var(--vscode-markdown-line-height, 22px);
 	word-wrap: break-word;
 }

--- markdown-pdf.css
 body {
 	font-family: -apple-system, BlinkMacSystemFont, "BIZ UDGothic", "MigMix 2p", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";
	padding: 0 12px;
 }
- VS Code を 非 WSL モード（Native Widows モード）で利用する
-- フォント名が Linux と Windows で異なるので、windows 側の指定に合わせた
- PDF のプロファイルで指定したフォントが使われていることを確認した
-- &ref(pdf_profile.jpg);

*** WSL2 との接続が切れてしまった場合 [#o3a44090]
- 通常は Windows 上で WSL2 を実行中は VSCode が WSL2 のリモートマシンと接続する
-- &ref(wsl_vsc.png);

- （wsl2 の更新などによって）''WSL2 との接続がエラーになった場合には、PowerShell から WSL2 を再起動する''
 PS C:\Users\magu7> wsl -l
 PS C:\Users\magu7> wsl -t Ubuntu-20.04
-- &ref(wsl2_restart.png);

*** [[君はVS Codeのデバッグの知られざる機能について知っているか:https://qiita.com/_ken_/items/c5aa4841be74b06530b4]] [#f4a5693f]

*** ファイルのリロード（外部でファイルが変更された内容を取り込む） [#pe520a19]
- まず、今開いている &textcolor(red){手元ファイルのローカルな変更を加えていない場合は、外部の変更は自動的に取り込まれる};
- 手元のファイルを変更している場合は、SHIFT+CTRL+p (open command palet) => revert => File Revert　　これで手元の変更はキャンセル（上書き）される
- 現在のタブを右クリック → Revert File

- settings.json で
 "files.autoSave":  "off",
 "files.autoSaveDelay": 1000,
 "files.autoReload": "on"

タイムスタンプを変更しない