目次
Visual Studio Code (VS Code)
概要
- Microsoft が開発した Electron フレームワークで作成したソースコードエディタ
- Electron フレームワークで作成したソースコードエディタは Atom を始め多く存在するが、それらと比較すると以下のメリットがある。
- Atom に比べると動作が軽い。
- 動作が安定している。
- アドオンを入れていないデフォルトの状態でも、ユーザが欲しい機能はある程度揃っている。
- Markdown のリアルタイムプレビュー機能
- Emmet
- アドオンも多く提供されている。
- 開発スピードが早く、次々と新たな機能を取り入れている。
- Atom や sublime-text 同様、テキストベースの .json ファイルでの設定なので、別環境への移行が容易である。
- デメリット
Atom に比べると歴史が浅いためか、アドオンも含め、一部の機能が乏しいことがことがある (かゆいところに手が届かない的な)。1 ウィンドウで複数のプロジェクトを扱えない (別ウィンドウでは開ける)。
インストール方法
- 公式ページ から .deb パッケージをダウンロードし、インストールする。
- インストールすると同時に、リポジトリも登録されるため、最新版がリリースされるとパッケージマネージャのアップデート候補に表示される。
設定
- 「ファイル」→「基本設定」→「設定」で開く (あるいはショートカットの Ctrl + , で開く)
- 左側ペインにデフォルトの設定、右側ペインにユーザ設定が表示される。
- 設定方法
- ユーザがデフォルトの設定からユーザ設定に項目をコピーして、値を変更する。
- デフォルトの設定をクリックすると選択候補が表示されるので、それ選択する (選択するとユーザ設定に値が変更された項目がコピーされる)。
- 設定例
// 既定の設定を上書きするには、このファイル内に設定を挿入します { "editor.fontSize": 16, "editor.fontFamily": "Ricty", "editor.insertSpaces": false, "editor.wordWrap": "on", "files.exclude": { "**/.git": true, "**/.svn": true, "**/.hg": true, "**/CVS": true, "**/.DS_Store": true, "**/lost+found": true }, "editor.cursorBlinking": "smooth", "editor.renderWhitespace": "boundary", "editor.renderLineHighlight": "all", "workbench.editor.enablePreviewFromQuickOpen": false, "files.trimTrailingWhitespace": true, "files.insertFinalNewline": true, "files.autoSave": "off", "workbench.commandPalette.preserveInput": true, "background.style": { "content": "''", "pointer-events": "none", "position": "absolute", "z-index": "99999", "width": "100%", "height": "100%", "background-position": "100% 100%", "background-repeat": "no-repeat", "opacity": 0.6 }, "workbench.colorTheme": "Solarized-light-fjs", "insertDateString.format": "YYYY/MM/DD", "markdown-preview-enhanced.scrollSync": false, "workbench.startupEditor": "newUntitledFile", "markdown-preview-enhanced.usePandocParser": true, "editor.parameterHints": true, "emmet.excludeLanguages": [ ], "[markdown]": { "editor.quickSuggestions": true }, "workbench.iconTheme": "vs-minimal", "window.zoomLevel": 0 }
無銘闇人がインストールしているアドオン一覧
- アドオン (拡張機能) は左側の縦に並んだアイコンの一番下をクリックして、検索や管理をする。
- vscode は Markdown エディタとして使っているため、コーディング用のアドオンはほとんど含まれていない。
- background: 背景にちびキャラを追加できるアドオン
- Linux の場合は、/usr/code の所有者を管理者権限でユーザに変更しておく必要あり (試していないが、
/usr/share/code/resources/app/out/vs/workbench/workbench.main.cssの権限さえ変われば問題ないはず)。
- Insert Date String: 今日の日付などを挿入するアドオン
- join-lines: Ctrl + j で選択している複数行を 1 行にまとめるアドオン
- Markdown All in One: Markdown の編集を便利にするアドオン
- キーボード・ショートカットの強化 (文字を選択した上で Ctrl + b で太字化など)
- Markdown Preview Enhanced: Markdown プレビューの強化版
- Atom でも公開されているアドオン
- 数式や pandoc との連携ができる。
- UML やクラス図、グラフの描画も Markdown 上でできる (出力先でも反映されるかは別)。
- プレビュー画面のスタイルを変更する場合は、コマンドパレット (Ctrl + Shift + P) から
Markdown Preview Enhanced Cutomize CSSを実行して、CSS ファイルを編集する。
- Path Intellisense: ファイルのパスを自動補完するアドオン
- Project Manager: 複数のプロジェクトを管理できるアドオン
- Solarized-light-fjs: 背景が淡い黄色のテーマ (長時間の編集で目が疲れるので導入)
- Table Formatter: Markdown の Table を整形するアドオン
Tips
括弧やクォーテーションの補完
- デフォルトでも有効になっているが、一部の括弧やクォーテーション記号には対応していない場合、
/usr/share/code/resources/app/extensions/markdown/language-configuration.jsonのsurroundingPairsに、補完したい記号を追加する。- 2022/03/16 現在、パスが以下のように変更されている。
- Linux:
/usr/share/code/resources/app/extensions/markdown-basics/language-configuration.json - Windows:
$InstallDir\resources\app\extensions\markdown-basics\language-configuration.json(ユーザインストールの場合、$InstallDirはC:\Users\USERNAME\AppData\Local\Programs\Microsoft VS Code)
- 参考サイト:
ターミナルとエディタ間のフォーカスの移動ショートカット
ターミナルのショートカットと vscode のショートカットがバッティングする
- ctrl + p の履歴呼び出しができない場合にどうぞ。
"Error: spawn pandoc ENOENT" と表示される
- 症状: “markdown preview enhanced” という拡張機能 で markdown ファイルのプレビューを開くと、
Error: spawn pandoc ENOENTと表示される。 - 原因:
- ファイルやディレクトリが見つからないのが原因。
- WSL や WSL2 上のファイルパスが特殊であるため、該当ファイルをエクスプローラからドラッグ＆ドロップすると、このようなエラーが出る。
- 解決策: VSCode のサイドバーのファイル一覧からファイルを開く。
クォーテーションを変換させない
- 症状: “markdown preview enhanced” という拡張機能で、markdown 内に クォーテーションやダブルクォーテーションで文字を囲むと、プレビューでは向き付きのクォーテーションに変換される。例えば、ダブルクォーテーションだと 「“」「”」で囲まれる。これを変換せずにそのまま出力させる。
- 原因: markdown preview enhanced という拡張機能の問題ではなく、そこで呼び出されている pandoc のオプションが原因。
- 解決策:
- 設定内の
Markdown-preview-enhanced: Pandoc Markdown Flavorをmarkdown-raw_tex+tex_math_single_backslashからmarkdown-smart+tex_math_single_backslashへ変更する。 - settings.json であれば、
markdown-preview-enhanced.pandocMarkdownFlavorのオプションをmarkdown-smart+tex_math_single_backslashにする。
全角文字、半角文字の検索
- Ctrl+f を押して、検索ボックスを表示する。
.*アイコンをクリックする。
- 検索欄に以下を入力する。
- 半角文字全般の場合:
[\x00-\x7F] - 全角文字全般の場合:
[^\x00-\x7F]
全角文字と半角文字の間へのスペース追加
- Ctrl+h を押して、検索・置換ボックスを表示する。
.*アイコンをクリックする。
- 検索欄に以下を入力する。
- 全角文字→半角文字:
([\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}])([A-Za-z0-9]) - 半角文字→全角文字:
([A-Za-z0-9])([\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}])
- 置換欄に以下を入力する。
$1 $2
- 置換ボタンをクリックする。