Memo/VisualStudioCode

https://dexlab.net:443/pukiwiki/index.php?Memo/VisualStudioCode
 

Visual Studio Code (VSCode)


ペアプログラミング


Debugger for Chrome: Chromeを使ったデバッグ


Golang


Remote Development: Remote SSH/Dockerコンテナ/WSL/への接続

  • Remote Development - Visual Studio Marketplace
    • 2019-07-23現在プレビュー版。通常のVScodeでも動く。
    • Remote-SSH, Remote-Containers, Remote-WSLの3つがセットでインストールされる。Remote-WSLはwindows環境だけに必要。
  • 環境
    • Win10 Pro 1809
    • Visual Studio Code: 1.3.1
  1. 拡張機能の「Remote Development」インストール
    code --install-extension ms-vscode-remote.vscode-remote-extensionpack
  2. Windowsの場合: Windows の OpenSSH のインストール | Microsoft Docs

SSHでremote接続場合:

  1. 左ペインの「Remote-SSH」アイコンが追加されている。「Configure」から既存のssh-configのパスを指定する
  2. F1でコマンドパレットを開き、「Remote-SSH: Connect to host」選択で、登録済みホストが表示される

WSLの場合:

  1. F1でコマンドパレットを開き、「Remote-WSL: New Window」で、localのWSL環境に接続する

Dockerへの接続

  1. F1でコマンドパレットを開き、「Remote-Containers: Attach to Running Container」で、コンテナに接続

ファイル操作:

  1. フォルダを開く「Ctrl + K」「Ctrl + O」の順
  2. ファイルを開く「Ctrl + O」

sshで「getsockname failed: Not a socket」エラー

  • 例:VSCodeのRemote-SSH拡張機能は以下のようなコマンドを実行する。
    ssh -o ClearAllForwardings=true -F C:\local\home\user01\ssh-config "server01" bash
    getsockname failed: Not a socket
    packet_write_poll: Connection to UNKNOWN port -1: Permission denied
  • 確認ポイント
    • Windows 10 1809のssh(OpenSSH_for_Windows_7.7p1, LibreSSL 2.6.5)はssh-config内の「ControlPath」をサポートしていないので、削除するかコメントアウトする。
    • VSCodeのRemote-SSH拡張機能はパスワード認証非対応。公開鍵認証を使う。 KeePassXC等に秘密鍵を登録して、ssh-agent経由での利用をお勧め。
    • Powershellから C:\local\home\user01\ssh-config が読めるか。
      Host server01
        HostName 192.168.61.153
        User     user01
      
      Host *
          IdentityFile               ~/.ssh/id_rsa
          ForwardAgent               yes
          ServerAliveInterval        15
          ServerAliveCountMax        4
          StrictHostKeyChecking no
          ControlMaster auto
          ControlPersist 60s

python


CLIでの操作

  • デフォルトインストールパス: "C:\Program Files (x86)\Microsoft VS Code\Code.exe"

拡張機能


Extensions for Visual Studio family of products | Visual Studio Marketplace で一覧可能

  • Code Runner - Visual Studio Marketplace
    • コードを実行して、出力タブに表示
    • ターミナルに出力して、標準入力等を使えるようにする。setting.jsonに以下を追加
      "code-runner.clearPreviousOutput": true,
      "code-runner.runInTerminal": true,
  • YAML Support by Red Hat - Visual Studio Marketplace
    • yamlの自動インデント、オートコンプリート
    • 「Ctrl + Shift + O」でドキュメントアウトラインを表示。使用ブロック毎に表示してくれる
    • 「Ctrl + Space」でキーワード補完
  • Trailing Spaces - Visual Studio Marketplace
    • 半角スペースだけの行、行末のスペースに背景色を付けてくれる。全角スペースは非対応。色の変更ができないため、zenkaku拡張機能と色が異なる。
    • 標準設定にも「・」を表示するオプションはあるが、もっと目立たせたい場合に。
    • 標準設定で「files.trimTrailingWhitespace」で削除すれば不要かも。
  • Settings Sync - Visual Studio Marketplace
    • vscodeの設定ファイルをGitHub Gistに同期して管理できる。
    • GistはPrivateで上がっていた。Publicの場合はパスワード等が入ってないことを確認する事。
    • Upload: 「Shift + Alt + U」でGitHub personal access tokenを入れる。GitHub Gist IDが出力される。
      • macos: shift + option + U
    • Download: 「 Shift + Alt + D」でバックアップしたGitHub Gist IDを入力する。
      • macos: shift + option + D
    • 自動アップロード、自動ダウンロードはデフォルトでは無効なので、必要に応じて有効にする。
    • 2台目以降は、コマンドパレット(Ctrl + Shift + P)を開き、「Sync Download Settings」で既存のGitHub tokenと、Gist IDを入力する。初回Uploadすると別Gist IDになり、共有されないため注意。
    • 設定を初期化したい場合はコマンドパレット(Ctrl + Shift + P)を開き、「Sync Extention Settings」で初期化できる。

Markdown

デフォルトでGitHub markdown, ライブプレビューにも対応していて便利。

  • Markdown Preview Enhanced - Visual Studio Marketplace
    • Markdown All in Oneと競合するのか、背景色が黒のままになる。
    • 「Ctrl + k, v」でプレビュー画面が開くのはデフォルトと一緒。
    • プレビューを開くのが数秒遅くなる。
    • デフォルトデザインがGitHubのような白背景になる。

スニペットを使う

  1. VSCodeのファイル > 基本設定 > ユーザースニペット
  2. markdownと入力してenter
  3. https://github.com/kitfactory/vscode-template/blob/master/markdown.json からコピペ
  4. 適当なMarkdownで「UML」まで入力して「Ctrl + Space」でスニペットが選択できる。他はjson参照。「"UML_Sequence" : 」の部分が「Ctrl + Space」で選択できるようだ
  5. 「Ctrl + k, v」でプレビュー

設定

ファイル > 基本設定 > 設定

  • フォント、サイズ
    • Editor: Font Family: VL Gothic
    • Editor: Font Size: 15
  • すべての半角スペースが「・」と表示される。全角スペースは表示されない。zenkaku拡張機能を検討
    • Editor: Render Whitespace: all
  • インデントに沿って、縦線を表示
    • Editor: Render Indent Guides: true
  • 制御文字を表示
    • Editor: Render Control Characters
  • 文字コードの自動判別
    • Files: Auto Guess Encoding: true
  • 行末空白の削除
    • Files: Trim Trailing Whitespace: true

ミニマップ

  • 現在表示されている部分を常時表示
    • editor.minimap.showSlider: always
  • 負荷軽減のため、ブロック表示
    • editor.minimap.renderCharacters: false

ターミナル

Windows用

  • ターミナルが使用するパス
    • terminal.integrated.shell.windows:
      # windows10標準cmd
      C:\Windows\sysnative\cmd.exe
      
      # PowerShell
      C:\Windows\sysnative\WindowsPowerShell\v1.0\powershell.exe
      
      # GitHub for windows(64bit)
      C:\Program Files\Git\bin\bash.exe
      
      # GitHub for windows(32bit)
      C:\Program Files (x86)\Git\bin\bash.exe
      
      # WSL
      C:\Windows\sysnative\wsl.exe
    • 外部ターミナルの設定。terminal.integrated.shell.windowsと同じで良い。
    • terminal.external.windowsExec:

アプリケーション

  • テレメトリの無効化
    • テレメトリ: Enable Telemetry: false

settings.jsonを開く

  • 基本設定 > 設定 > 右上の「{}」アイコン

指定言語の時に設定の上書き


行末空白、全角空白の削除

  • 行末空白の削除
    • 標準機能で保存時に行末空白を削除する機能がある
    • ファイル -> 基本設定 -> 設定 -> テキストエディタ -> ファイル
      "files.trimTrailingWhitespace": true,
    • Markdownは行末削除を無効にしたい場合
      {
      ...
          "[markdown]": {
              "files.trimTrailingWhitespace": false
          },
      ...

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-11-08 (金) 17:26:33 (4d)