vscode インストール＆設定

vscode #

vscode のインストールから基本設定まとめ

インストール #

download
User Installer x64
https://code.visualstudio.com/download
System InstallerとUser Installer があるがどっちでもいい

参考：

基本設定 #

フォント #

ターミナルフォント #

Terminal Integrate:Font Family

HackGen Console

エディタフォント（こっちは変更しなくてもいいかも） #

設定から「font family」でサジェスト
HackGen Console を追加

HackGen Console,Consolas, ‘Courier New’, monospace

  • windows host にインストール済みのフォント一覧を確認する方法 explorer で「C:\Windows\Fonts」にアクセス

設定ファイルの場所 #

ユーザモードでインストールした場合 C:\Users[ユーザ名]\AppData\Roaming\Code\User

例：　C:\Users\kazunori\AppData\Roaming\Code\User

拡張機能 #

基本的にインストール後は再起動したほうがいい。

Awesome Emacs Keymap #

emacs バインドになる
https://marketplace.visualstudio.com/items?itemName=tuttieee.emacs-mcx

ctrl + @ が以下のシステム設定（ターミナル起動）と被るのでctrl+alt+@にリマップしておく。
※「oem_3」が「@」の意味らしいので注意

awesome emacs keymap がマークセットがctrl+space なので ctrl + @ に変更も忘れずにやっておく。
設定完了すると以下のようなkeymapになる

// Place your key bindings in this file to override the defaultsauto[]
[
    {
        "key": "ctrl+alt+oem_3",
        "command": "workbench.action.terminal.toggleTerminal",
        "when": "terminal.active"
    },
    {
        "key": "ctrl+oem_3",
        "command": "-workbench.action.terminal.toggleTerminal",
        "when": "terminal.active"
    },
    {
        "key": "ctrl+oem_3",
        "command": "emacs-mcx.setMarkCommand",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+space",
        "command": "-emacs-mcx.setMarkCommand",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+x oem_3",
        "command": "emacs-mcx.rectangleMarkMode",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+x space",
        "command": "-emacs-mcx.rectangleMarkMode",
        "when": "editorTextFocus"
    }

]

Dracula Official #

テーマをドラキュラにする（set color theme を押下する必要がある）
https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula

WSL #

wsl 環境にリモート接続できるようになる
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl

コマンドからwsl remote接続でディレクトリ等を開く方法
Ctrl + Shift + P から wsl remote open を選択

その他 #

拡張機能はwindows host と wsl の両方必用の場合がある # 

多くのVSCodeの拡張機能は、WindowsとWSLの両方で動作するように設計されています。
ただし、WSL上で動作するアプリケーションやツールに依存する拡張機能がある場合は、WSL環境にインストールすることを推奨します。

一部の拡張機能は、WindowsとWSLの両方で正常に動作しない場合があります。これらの拡張機能は、
Windows上のみで動作するように設計されており、WSL上では動作しないか、必要なパッケージやツールがWSLにインストールされていないため、
動作しない場合があります。そのため、WSL環境で利用するために設計された拡張機能を使用する場合は、WSLにインストールすることをお勧めします。

一般的に、拡張機能がWindowsとWSLの両方で動作するかどうかは、拡張機能のドキュメントやレビューで確認することができます。
また、問題が発生した場合は、拡張機能の開発者に問い合わせることもできます。

folder, workspace はエクスプローラに表示される単位 #

通常folder を選択すると、そのフォルダ配下がエクスプローラタブに一覧表示される workspces の場合、複数のフォルダを１つのworkspaceとして管理できるが、vscodeのworkspaceファイルを作成する必要がある。そこに複数のフォルダを追加することができる。

VS Codeにおいて、Workspaceは、複数のファイルやフォルダー、設定などをグループ化したものであり、プロジェクトを管理するための機能です。Workspaceは、単一のフォルダーに限定されず、複数のフォルダーを含めることができます。
一方、Folder（フォルダー）は、単一のフォルダーに含まれるファイルやサブフォルダーを管理するための機能です。Folderは、フォルダー内のファイルやフォルダーに対して、エクスプローラーやエディター、ターミナルなどの機能を提供します。
つまり、WorkspaceはFolderを含むものであり、フォルダーを単位とする機能とは異なるものです。Workspaceは、複数のフォルダーを組み合わせてプロジェクトを管理するために使用される機能であり、Folderは、単一のフォルダー内のファイルやフォルダーを管理するための機能であると考えることができます。

Do you trust the authors of the files in this folder? と表示される理由 #

これは、表示したフォルダまたはworkspace単位に、信頼するかどうかを聞かれている。信頼しないと、実行コマンドや拡張機能が機能しない制限状態となる。 この信頼制限を無効にしたいなら、設定アイコン→settings の検索で「security.workspace.trust.enabled」を無効(チェック外す）すれば、問い合わせされることなく、制限なしの状態となる様子（未確認） 信頼状態を切り替えるには以下の操作が必要

1. VS Codeを開き、対象のフォルダーを開いてください。
2. ファイルエクスプローラーを開きます。
3. 表示メニューをクリックし、「Command Palette」を選択します。（Ctrl + Shift + P でコマンドパレットモードになる)
4. 検索バーに「trust」と入力し、「Workspace: Manage Workspace Trust」を選択してください。
「Trusted」、「Untrusted」、「Unknown」の3つのオプションが表示されます。"Trusted"が選択されている場合は、「Untrusted」をクリックして、フォルダーの信頼を取り消します。
5. 信頼を取り消したいフォルダーを選択して、「Untrust Folder」をクリックします。

windows host に vscode をインストールした場合、windows host 用と wsl2 用の拡張機能のインストールが必要な場合がある #

保存場所は以下の通りとなる

windows hostの場合：
C:\Users\[ユーザ名]\.vscode\extensions

Ubuntuの場合：
~/.vscode-server/extensions/

profile 設定をエクスポート、インポートする #

設定アイコンをクリックしてProfiles選択→import profile or export profile を選択する 出力先は local を選択してjsonファイルを作成する ※import profile は export profile したファイルが対象で、反映されると、profiles 欄にインポートしてプロファイル名が表示される。 ※たぶん、C:\Users[ユーザ名]\AppData\Roaming\Code\Profile[ハッシュ値] に配置される様子

profile 設定を削除する #

設定アイコンからProfiles選択→ delete profile を選択し、不要なprofile名にチェックを入れて削除する

20240315設定参考ファイルのダウンロード

wsl 用のvscodeの設定ファイルの配置先 # 

# user profile は以下に配置される(extensions.jsonは C:\Users\kazunori\.vscode\extensions に配置される)
C:\Users\[ユーザ名]\AppData\Roaming\Code\User\settings.json
# import profile すると、current profile として以下に配置される(extensions.jsonも配置される)
C:\Users\[ユーザ名]\AppData\Roaming\Code\User\profiles\[ハッシュ値]\settings.json

wsl2 から windows vscode 呼び出す #

以下の方法は、windows path を無効にしている場合、alias を使って直接windows側のvscodeを起動する方法を説明している。
wsl2 のソースを変更する場合は、wsl remote接続状態で編集するべき。そうしないと拡張機能がwindows版を利用するため、期待下通りのvscodeの動作にならない
※例えば、wsl2 に git 関連をインストール済みなのに、windows path のままgit管理対象ファイルを開くと git を windows側にインストールしろ、と言われる。
https://oya3.net/redmine/projects/study_group/wiki/Wsl2#windows-%E7%89%88%E3%81%AE-visual-stadio-code-%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99%E6%96%B9%E6%B3%95

$ emacs .config/fish/config.fish 
alias vscode "'/mnt/c/Program\ Files/Microsoft\ VS\ Code/Code.exe'" 
# 再起動
$ exec $SHELL -l
# vscode 起動
$ vscode .

File is a CommonJS module; it may be converted to an ES6 module #

参考URL #

ワークスペースの信頼 #

拡張 #