Visual Studio Code (VS Code)

文書の過去の版を表示しています。

Visual Studio Code - Code Editing. Redefined
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 を整形するアドオン

デフォルトでも有効になっているが、一部の括弧やクォーテーション記号には対応していない場合、/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)
参考サイト:
- How to enable automatic quote wrapping when pressing " or ' with selected text in Markdown and text files? : vscode
- VS Codeの設定：括弧と引用符の自動補完について - Qiita