====== Visual Studio Code (VS Code) ====== ===== 概要 ===== * [[https://code.visualstudio.com/ | Visual Studio Code - Code Editing. Redefined]] * Microsoft が開発した Electron フレームワークで作成したソースコードエディタ * Electron フレームワークで作成したソースコードエディタは Atom を始め多く存在するが、それらと比較すると以下のメリットがある。 * Atom に比べると動作が軽い。 * 動作が安定している。 * アドオンを入れていないデフォルトの状態でも、ユーザが欲しい機能はある程度揃っている。 * Markdown のリアルタイムプレビュー機能 * Emmet * アドオンも多く提供されている。 * 開発スピードが早く、次々と新たな機能を取り入れている。 * Atom や sublime-text 同様、テキストベースの .json ファイルでの設定なので、別環境への移行が容易である。 * デメリット * Atom に比べると歴史が浅いためか、アドオンも含め、一部の機能が乏しいことがことがある (かゆいところに手が届かない的な)。 * 1 ウィンドウで複数のプロジェクトを扱えない (別ウィンドウでは開ける)。 ===== インストール方法 ===== * [[https://code.visualstudio.com/ | 公式ページ]] から .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 エディタとして使っているため、コーディング用のアドオンはほとんど含まれていない。 * [[https://marketplace.visualstudio.com/items?itemName=shalldie.background | background]]: 背景にちびキャラを追加できるアドオン * Linux の場合は、/usr/code の所有者を管理者権限でユーザに変更しておく必要あり (試していないが、''/usr/share/code/resources/app/out/vs/workbench/workbench.main.css'' の権限さえ変われば問題ないはず)。 * [[https://marketplace.visualstudio.com/items?itemName=jsynowiec.vscode-insertdatestring | Insert Date String]]: 今日の日付などを挿入するアドオン * [[https://marketplace.visualstudio.com/items?itemName=wmaurer.join-lines | join-lines]]: Ctrl + j で選択している複数行を 1 行にまとめるアドオン * [[https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one | Markdown All in One]]: Markdown の編集を便利にするアドオン * キーボード・ショートカットの強化 (文字を選択した上で Ctrl + b で太字化など) * [[https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced | Markdown Preview Enhanced]]: Markdown プレビューの強化版 * Atom でも公開されているアドオン * 数式や pandoc との連携ができる。 * UML やクラス図、グラフの描画も Markdown 上でできる (出力先でも反映されるかは別)。 * プレビュー画面のスタイルを変更する場合は、コマンドパレット (Ctrl + Shift + P) から ''Markdown Preview Enhanced Cutomize CSS'' を実行して、CSS ファイルを編集する。 * [[https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense | Path Intellisense]]: ファイルのパスを自動補完するアドオン * [[https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager | Project Manager]]: 複数のプロジェクトを管理できるアドオン * [[https://marketplace.visualstudio.com/items?itemName=veggiemonk.theme-solarized-light-fjs | Solarized-light-fjs]]: 背景が淡い黄色のテーマ (長時間の編集で目が疲れるので導入) * [[https://marketplace.visualstudio.com/items?itemName=shuworks.vscode-table-formatter | 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'') * 参考サイト: * [[https://www.reddit.com/r/vscode/comments/6y0waa/how_to_enable_automatic_quote_wrapping_when/ | How to enable automatic quote wrapping when pressing " or ' with selected text in Markdown and text files? : vscode]] * [[https://qiita.com/BlueSilverCat/items/c245bd098396dc2eb656 | VS Codeの設定： 括弧と引用符の自動補完について - Qiita]] ==== ターミナルとエディタ間のフォーカスの移動ショートカット ==== * [[https://qiita.com/rai_suta/items/05e69f0b9065989b19c1 | 統合ターミナルウィンドウへフォーカスするショートカットキーを設定する - Qiita]] ==== ターミナルのショートカットと vscode のショートカットがバッティングする ==== * [[https://qiita.com/m_zuma/items/06d989b0c60f7f2e9301 | 統合ターミナルのシェルで実行したいキーバインドが VSCode で実行される - Qiita]] * [[https://github.com/Microsoft/vscode/issues/35722 | Unable to use ctrl-p in the integrated terminal in GNU/Linux · Issue #35722 · Microsoft/vscode]] * ctrl + p の履歴呼び出しができない場合にどうぞ。 ==== "Error: spawn pandoc ENOENT" と表示される ==== * 症状: "markdown preview enhanced" という拡張機能 で markdown ファイルのプレビューを開くと、''Error: spawn pandoc ENOENT'' と表示される。 * 原因: * ファイルやディレクトリが見つからないのが原因。 * WSL や WSL2 上のファイルパスが特殊であるため、該当ファイルをエクスプローラからドラッグ＆ドロップすると、このようなエラーが出る。 * 参考サイト: [[https://k-koh.hatenablog.com/entry/2020/02/14/203044 | code コマンドでディレクトリをVSCode上で開くとENOENTエラーが出る - Just do IT]] * 解決策: 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'' にする。 {{tag>アプリケーション テキスト}}