ツール:visual_studio_code_vscode

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 を整形するアドオン

Tips

括弧やクォーテーションの補完

ターミナルとエディタ間のフォーカスの移動ショートカット

ターミナルのショートカットと vscode のショートカットがバッティングする

"Error: spawn pandoc ENOENT" と表示される

  • 症状: “markdown preview enhanced” という拡張機能 で markdown ファイルのプレビューを開くと、Error: spawn pandoc ENOENT と表示される。
  • 原因:
  • 解決策: VSCode のサイドバーのファイル一覧からファイルを開く。
,
  • ツール/visual_studio_code_vscode.txt
  • 最終更新: 2024/05/02 10:17
  • by mumeiyamibito