my vscode settings

私のVSCodeの設定はこれだ！

2020/12/17現在、1.51.1 を使用中。

1. 最初にやること
2. Git
3. スニペット
4. Extension
5. 便利コマンド

1. 最初にやること

1.1. やることリスト

VSCode のオススメ拡張機能 24 選 (と Tips をいくつか) - Qiita

上記記事で紹介されている機能の多くをいつも入れています。以下にリストします。
チェックを入れているものは個人的には必須の機能で、いつも入れるようにしています。

    "todohighlight.keywords": [
        "CARE:",
    ],
    "todohighlight.defaultStyle": {
        "backgroundColor": "#00ff7f",
        "color": "#000000",
    },

1.2. 必須

以下を実施します。

editor.mouseWheelZoom
Font Family
- 初期設定はConsolas, 'Courier New', monospaceとなっている。
  - とりあえず、monospace にしておけば、等幅なので使えそう
    - これはMS Gothic と同じかなあ
- Visual Studio Codeで等幅フォントを使う - minus9d's diary
  - 最近のWindows10は、モリサワの BIZ UDゴシック が最初から入っている
    - これも良い
  - 等幅のチェック用テーブル。以下テーブルの縦棒がずれないフォントを選んでおけばOK。

| あいうえお |  abcdefg   |
| ---------- | ---------- |
| abcdefg    | あいうえお |

Editor: Render Whitespace を all
Terminal › Integrated: Scrollback
- 1000 は少ない。1000000 にしてみている。

1.3. お好み

お好みで以下を実施します。

editor.minimap.enabled を false
Editor: Quick Suggestions を true
- 補完が有効になる？
  - 単語補完ではなく文章全体が一致している場合の補完となることが多くあまり役立たない。
  - 秀丸エディタの単語補完のような動きを期待していると期待はずれ。
- 私は Accept Suggestion On Enter を off にしている。Tab で決定となる。
エディタの着目箇所の背景色がやや暗いため、明るくするために以下のworkbench.colorCustomizationsを追加
- 設定項目
  - 現在行
  - 選択文字列、及び選択文字列と一致する文字列
- #FFFFFF の後ろの数字(アルファ値)をお好みで大きくするとハイライトが明るくなります。
- メリット
  - 現在行(カーソル位置)の視認性 UP
  - 文字列選択により一致する文字列の視認性 UP

    "workbench.colorCustomizations": {
        "editor.selectionBackground": "#FFFFFF75",
        "editor.selectionHighlightBackground": "#FFFFFF55",
        "editor.lineHighlightBackground": "#FFFFFF35"
    }

markdown編集時のスニペットを有効にする
- これで ctrl space を押さなくても候補が出る
- 後述の date を日付に変換するスニペットも date と入力後 ctrl space を押さずに、Tab で変換できるので便利

    "[markdown]":  {
        "editor.quickSuggestions": true,
        "editor.snippetSuggestions": "top"
    }

2. Git

2.1. インストール

インストールしていない場合は SOURCE CONTROL にその旨が表示される。
ダウンロードリンクも表示されるのでそこからインストールする。

Git for Windows

2.2. 鍵ペアの設定

鍵ペアを作成し、公開鍵を GitHub に登録、秘密鍵を.ssh ディレクトリに格納しておきます。

2.3. clone 動作確認

コマンドで clone できることを確認しておきます。

cd /path/to/save-dir
git clone repo-url

F1 -> git clone -> リポジトリ URL を入力 -> 保存先ディレクトリを指定 -> Open

Windowsでは恐らく初cloneは失敗すると思われる、以下参照。

VSCode から Git のリモートにアクセスできないときの対処方法（Windows 10） - Qiita
OpenSSH for Windows の使用方法 - Qiita
- 恐らくVSCodeがパスワードの入力を待っていてダイアログも出さない場合に、例えば push ボタンを押してもずっとくるくるしてる動きとなる
- この設定によりそれが解消する

git config --global core.sshCommand "C:/Windows/System32/OpenSSH/ssh.exe"

# OpenSSH Authentication Agent を起動

# 鍵を登録
ssh-add

3. スニペット

date を日付に変換する。常時作業ログを書きながら作業しているので必須。

	"date": {
		"prefix": "date",
		"body": "$CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE"
	}

4. Extension

いつも入れているもの

markdownlint
Markdown Preview Enhanced
indent-rainbow
Markdown TOC
- 改行設定が必要
  - 【VSCode】Markdown で書いたブログに目次を付ける！（Markdown TOC） | Developers.IO
    - Files: Eol を auto から改行に変える
- Markdown-toc: Depth From を2にする
Table Formatter - Visual Studio Marketplace
- よく使う記号は以下に設定すると横幅がずれない

"tableformatter.common.explicitFullwidthChars": ["○", "◎", "✕", "※"]

Git Graph
Replace Rules
- 私のルールは以下

    "replacerules.rules": {
        "Sorround code": {
            "find": "(.*)",
            "replace": "```log\n$1\n```",
            "flags" : "gms"
        },
        "Remove blank lines": {
            "find": "^\\n",
            "replace": ""
        },
        "Remove trailing and leading whitespace": {
            "find": "^\\s*(.*?)\\s*$",
            "replace": "$1"
        },
    },
    "replacerules.rulesets": {
        "Remove lots of stuff": {
            "rules": [
                "Remove trailing and leading whitespace",
                "Remove blank lines"
            ]
        }
    },

Draw.io Integration
- VSCode で Draw.io が使えるようになったらしい！ - Qiita
- xxx.drawio.svg という画像ファイル名にしておくとこのExtensionに紐づく
Remote Development

他、必要に応じて以下

ms-python.python
ms-vsliveshare.vsliveshare

5. 便利コマンド

インストールしているextensionの一覧

code --list-extensions

loftkun / vscode-settings