起動 | code code . code FILE code -d FILE1 FILE2 | |
コマンドパレットを開く | Windows : ctr + shift + p Mac Command + Shift + P F1 | |
ファイル内検索 (開いているファイルのみ対象) | windows:[Ctrl] + 【F】 mac:[Cmd] + 【F】 | |
ファイル内検索 (フォルダを対象) | windows:【Ctrl】+【Shift】+【F】 mac:【Cmd】+【Shift】+【F】 | 左の虫眼鏡アイコンでも可能 虫眼鏡アイコンは使いやすい |
ファイル名検索 | windows:[Ctrl] + 【P】 mac:[Cmd] + 【P】 ファイル検索するための、ボックスが表示されます。 | [Go] > [Go to File…] |
複数行コメント | Windows:「Ctrl」 + 「/」 Mac:「Command」 + 「/」 | |
タブの移動 | windows:【Ctrl】 + 【PageUp/Down】 mac:【Command】 + 【Option】 + 【矢印】 |
OS | マウス操作 | キーボード操作 |
---|---|---|
Windows | 始点をクリックしてから、 終点を[Shift]+[Alt]+左クリック | [Ctrl]+[Shift]+[Alt]+矢印キー |
Linux | 既定では設定なし | |
Mac | 始点をクリックしてから、 終点を[Shift]+[Option]+左クリック | [Shift]+[Option]+[Command]+矢印キー |
ファイル > 基本設定 > 設定
日本語表示の場合:基本設定 > 設定
英語表示の場合:Preference > Settings
「tree」と入力する
workbench.tree.indent を 8 から 20に変更する
(1)Editor > Unicode Highlight: Include Comments
「false」にする
(2)Editor>Unicode Highlight: Non Basic ASCII
「false」にする
ファイル → ユーザー設定 → 設定
Ctrl + ,
wrap tabs で検索し、チェックを入れる
日本語表示の場合:基本設定 > 設定 > テキストエディター > Render Whitespace
英語表示の場合:Preference > Settings > Text Editor > Render Whitespace
設定項目を「all」にします。
有効な場合、ファイルを開くときに文字セット エンコードを推測します
英語表示の場合:Preference > Settings > Text Editor > Files
Auto Guess EncodingをOn
英語表示の場合:Preference > Settings > Application > Proxy
英語表示の場合:Preference > Settings > Text Editor > Minimap
「Controls whether the minimap is show」をOffにする。
(個人的には、Suggestionを表示させるけど、Enterでは決定させないのがいいかなと思います)
「code」→「基本設定」→「設定」
「accept」と入力する
「Editor: Accept Suggestion On Enter」をOff
「code」→「基本設定」→「設定」
「suggestion」と入力する
「Editor:Quick Suggestions」のotherのValueをonにする
Command + Shift + P
で、コマンドパレットを開いて、
「Shell」を検索して、インストールする。
code
で、Visual Studio Codeが開くようになる。
codeはただのシェルスクリプトです。
上の方法は、管理者権限が必要なので、他の方法のメモ
alias code='open -a "Visual Studio Code"'
これだけで、code .
で起動できるようになる。
メモ:macos - Run / Open VSCode from Mac Terminal - Stack Overflow
code () { if [[ $# = 0 ]] then open -a "Visual Studio Code" else [[ $1 = /* ]] && F="$1" || F="$PWD/${1#./}" open -a "Visual Studio Code" --args "$F" fi }
Visual Studio Codeでフォルダーを開くと1つだけしか開けなく、
複数開いておきたい場合、ウィンドウを複数起動する必要があありますが、
ワークスペースを使うと、フォルダーを複数開け、その状態を保存できます。
検索や置換もワークスペース全体が範囲になります。
複数のプロジェクトのソースコードをみたい時に、ワークスペースを使うと便利です。
保存すると、「XXXX.code-workspace」という拡張子になり、それを開くと元の状態に戻ります。
ワークスペースを開く | コマンドパレットを開き、 Duplicate Workspace in New Window |
ワークスペースにフォルダーを追加 | ワークスペースを右クリックして、「Add Folder to Workspace」 またはメニューバーのファイルタブから。 |
ワークスペースを保存 | メニューバーのファイルタブから、「名前をつけてワークスペースを保存」 |
ワークスペースを使うと、.code-workspaceのファイルが量産されます。
Gitでリポジトリを管理している場合、このファイルの差分が発生するため、コミットしないようGitの設定を修正するのがおすすめです。
# .gitignore *.code-workspace
.gitignore はプロジェクト固有のファイルを無視するための設定ファイルのため、個人の設定を反映すべきではない場合が存在します。
そんなときは、.git/info/excludeファイルに設定を追記しましょう。
# ./git/info/exclude *.code-workspace
拡張機能 | 説明 |
---|---|
【おすすめ】 Project Manager | ワークスペースやフォルダーを1クリックで簡単に切り替え可能な拡張機能 |
【不要】 VSNotes | VS Code用のメモ機能ctr + shift + p かF1で、パレット表示VSNotes Run setup を実行するVSNotes:Create a New Note で、ノート作成\ |
vscode-icons | VScodeのエクスプローラで、アイコンを追加して見やすくします。 |
Rainbow CSV | CSVファイルをカラー表示 |
Todo Tree | TODOやFIXMEなどのコメントタグを検索し、エクスプローラーペインのツリービューに表示してくれる |
HashiCorp Terraform | |
indent-rainbow | インデントスペースを視覚化 |
Trailing Whitespace Highlighter | 行末の半角スペースを分かりやすく |
prettier code formatter | コードを自動整形 |
zenkaku | 全角スペースを見やすくしてくれ、全角空白によるエラーを防ぐ |
Regex Previewer | 正規表現のチェック |
Path Autocomplete | パスの補完補助をしてくれる |
【おすすめ】 Git History | Gitのコミット履歴を見やすく表示することができます. コマンドパレットをCtrl + Shift + Pで表示して,Git: View History (git log)を実行します. |
Git Graph | コミット履歴をツリー形式で表示してくれる git graphはシンプルで使い勝手良さそう。 UIがgit historyに比べて見やすい。 下記の設定を行うとDiff表示をとなりのグループで開いてくれるます。 “git-graph.openNewTabEditorGroup”: “Beside” |
Git Lens | 高機能な拡張で、様々なGit操作を行うことができます. |
Remote – SSH | VScodeからSSHする |
Remote – SSH:Editing Configuration Files | VScodeからSSHした後に、リモートのファイルを確認する |
Remote-WSL | VSCodeがWSLにリモート接続するために必要な拡張機能 |
Remote-Containers | VSCodeがコンテナにリモート接続するために必要な拡張機能 |
Remote Development | Remote-WSLとRemote-Containersに加え、Remote-SSHがセット |
Excel to Markdown table | エクセル上の表をワンアクションでマークダウンの表に変換 |
Text Tables | 表作成・編集を支援する拡張機能 Text Tables: Create tableを選択する |
Markdown Navigation | 「MARKDOWN NAVIGATION」が表示される。デフォルトの「アウトライン」より見やすい |
vscode-cisco-syntax | CiscoのConfigをカラー表示にしてくれます |
Junos Extension for Visual Studio Code | |
DokuWiki | Syntax highlighting for DokuWiki markup |