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 を整形するアドオン
  • 症状: “markdown preview enhanced” という拡張機能 で markdown ファイルのプレビューを開くと、Error: spawn pandoc ENOENT と表示される。
  • 原因:
  • 解決策: VSCode のサイドバーのファイル一覧からファイルを開く。
  • 症状: “markdown preview enhanced” という拡張機能で、markdown 内に クォーテーションやダブルクォーテーションで文字を囲むと、プレビューでは向き付きのクォーテーションに変換される。例えば、ダブルクォーテーションだと 「“」「”」で囲まれる。これを変換せずにそのまま出力させる。
  • 原因: markdown preview enhanced という拡張機能の問題ではなく、そこで呼び出されている pandoc のオプションが原因。
  • 解決策:
    • 設定内の Markdown-preview-enhanced: Pandoc Markdown Flavormarkdown-raw_tex+tex_math_single_backslash から markdown-smart+tex_math_single_backslash へ変更する。
    • settings.json であれば、markdown-preview-enhanced.pandocMarkdownFlavor のオプションを markdown-smart+tex_math_single_backslash にする。
  • ツール/visual_studio_code_vscode.txt
  • 最終更新: 2024/10/18 10:56
  • by mumeiyamibito