List of Vscode - text.Baldanders.info
tag:text.Baldanders.info,2022-06-11:/tags
2022-06-11T09:19:04+09:00
帰ってきた「しっぽのさきっちょ」
https://text.baldanders.info/images/avatar.jpg
https://text.baldanders.info/images/avatar.jpg
Atom の落日
tag:text.Baldanders.info,2022-06-11:/remark/2022/06/sunsetting-atom/
2022-06-11T00:19:04+00:00
2022-11-26T04:31:55+00:00
ユーザ間のエコシステムが出来上がっている製品であっても廃れたらあっという間
Spiegel
https://baldanders.info/profile/
<p>GitHub が Microsoft に買収されて以来,その内そうなるだろうとは思っていたが,ついにこの日が来てしまったか。</p>
<figure lang="en">
<blockquote>Today, we’re announcing that we are sunsetting Atom and will archive all projects under the organization on December 15, 2022.</blockquote>
<figcaption><div>via <q><a href="https://github.blog/2022-06-08-sunsetting-atom/">Sunsetting Atom | The GitHub Blog</a></q></div></figcaption>
</figure>
<p>Atom には<a href="https://text.baldanders.info/tags/atom/">思い入れ</a>がある。
思い返せば2015年は色々と心境の変化があった年で,たとえば Windows 7 のサポート終了をにらんで Windows 依存からの脱却を模索し始めた年で <a href="https://go.dev/" title="The Go Programming Language">Go</a> で遊び始めた年でもある。
「Windows 依存からの脱却」の最大の障害はテキストエディタの秀丸に依存しきっていたことで,マルチプラットフォームで手に馴染むエディタを探すことが<a href="https://dic.pixiv.net/a/%E9%A2%A8%E8%A6%8B%E3%81%BF%E3%81%9A%E3%81%BB" title="風見みずほ (かざみみずほ)とは【ピクシブ百科事典】">最優先事項</a>だったのだ。</p>
<p>というわけで,私の中で Atom と <a href="https://go.dev/" title="The Go Programming Language">Go</a> はセットになっていた。
Atom の拡張機能である go-plus の出来が(当時としては)よかったのも大きい。</p>
<p>そういえば Twitter で「VSCode に「中華を初めて統一した始皇帝」みたいな印象ができつつある」みたいな tweet を見かけたが,<a href="https://twitter.com/spiegel_2007/status/1535014771522560001">エディタ界の始皇帝は vim だろう</a>とか思ってみたり。
このブログでも何度か書いているが,私は vi にトラウマがあって, vi/vim を起動するとペーペーの新人の頃に工場の片隅でガチの VT 端末を前に泣きながらデバッグしていたあの頃がフラッシュバックしてしまうのだ。
なので最初から vim という選択肢はなかった。
まぁ Ubuntu 環境にいると結局は vim も使わざるを得ないのだが(笑)</p>
<figure style='margin:0 auto;text-align:center;'>
<div style="position: relative; margin: 0 2rem; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
<iframe class="youtube-player" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" allowfullscreen frameborder="0" src="https://www.youtube-nocookie.com/embed/P7LNU9HYr7M" allowfullscreen></iframe>
</div>
<figcaption><div><a href="https://www.youtube.com/watch?v=P7LNU9HYr7M">プログラミルクボーイ「Vim」 - YouTube</a></div></figcaption>
</figure>
<p>話を戻そう。</p>
<p>私の中で風向きが変わったのは “<a href="https://microsoft.github.io/language-server-protocol/" title="Official page for Language Server Protocol">Language Server Protocol (LSP)</a>” が登場したあたり。
LSP はホンマに画期的なアイデアで,当然 <a href="https://go.dev/" title="The Go Programming Language">Go</a> 用の lunguage server も登場するんだけど<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup> go-plus はこれを取り込むことができなかった。</p>
<p>加えて,私が IT 業界に再就職して支給された Windows 10 機に Atom を入れたら堪えられないほど遅いのにビックリし,観念して VS Code に乗り換えたのだった。</p>
<ul>
<li><a href="https://text.baldanders.info/remark/2021/02/installing-vscode-again/">パソコンに Visual Studio Code を導入する(再チャレンジ)</a></li>
</ul>
<p>Microsoft Windows を嫌って Ubuntu や Atom にしたというのに,結局は Microsoft に屈してしまったわけだ(「<a href="https://dic.pixiv.net/a/%E3%81%8F%E3%81%A3%E3%80%81%E6%AE%BA%E3%81%9B%21" title="くっ、殺せ! (くっころ)とは【ピクシブ百科事典】">くっころ</a>」とか言わないよ)。
今やすっかり手に馴染んでしまったけどね。</p>
<p>Atom が登場したのは2014年だそうだが,当時は SublimeText のカウンタという位置付けだったと思う。
8年というのはソフトウェア製品としては息が長いほうだと思うけど,テキストエディタは下手すると10年20年と使うものなので簡単に消えられては困るわけですよ。
それでも時代の流れには逆らえない。
ユーザ間のエコシステムが出来上がっている製品であっても廃れたらあっという間ということか。
まさに「落日」だな。</p>
<p>せめて VS Code のエコシステムが永く続くことを祈ろう。</p>
<h2>ブックマーク</h2>
<ul>
<li><a href="https://www.makeuseof.com/atom-text-editor-why-github-is-killing/">Why GitHub Is Killing Atom Text Editor</a></li>
<li><a href="https://zed.dev/">Introducing Zed – A collaborative code editor written in Rust</a></li>
<li><a href="https://forest.watch.impress.co.jp/docs/news/1457313.html">GitHub製コードエディター「Atom」の最終版が公開 ~8年間の開発に終止符 - 窓の杜</a></li>
</ul>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>LSP が発表された頃 <a href="https://go.dev/" title="The Go Programming Language">Go</a> 用の lunguage server としていくつかの実装があったが,現在はほぼ <a href="https://github.com/golang/tools/tree/master/gopls">gopls</a> 一択である。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
TechCrunch Japan 終了後の後始末
tag:text.Baldanders.info,2022-05-04:/remark/2022/05/garbage-collection/
2022-05-04T07:03:59+00:00
2022-05-04T07:04:24+00:00
翻訳記事 URL を可能な限り原文記事 URL に書き換えてみる。
Spiegel
https://baldanders.info/profile/
<p>2月に <a href="https://text.baldanders.info/remark/2022/02/the-nation-of-amnesia/" title="記憶喪失の国">TechCrunch Japan が終了してバックナンバーも残さず消滅する話を書いた</a>。
んで,実際に GW 中にサイトが消滅したわけだが,以前の URL を叩いてみたところ 404 ではなく<a href="https://techcrunch.com/" title="TechCrunch – Startup and Technology News">本家 TechCrunch</a> にリダイレクトされるようだ。</p>
<p>いや,そこまでしてくれるなら,せめて翻訳記事は<a href="https://techcrunch.com/" title="TechCrunch – Startup and Technology News">本家</a>の原文記事にリダイレクトしてくれよ <code>orz</code></p>
<p>まぁ,愚痴ってもしょうがない。
こちらで可能な限り URL の書き換えを試みることにしよう。</p>
<p>まずこのブログ・サイトの<a href="https://github.com/spiegel-im-spiegel/github-pages-env" title="spiegel-im-spiegel/github-pages-env: Document Environment for spiegel-im-spiegel.github.io">作業リポジトリ</a>上で TechCrunch Japan の URL がどのくらいあるか軽く <code>grep</code> してみる<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ grep -c "jp\.techcrunch\.com" "content/**/*.md"
</span></span><span class="line"><span class="cl">1121
</span></span></code></pre></div><p>おぅふ。
アホほどあるがな <code>orz</code></p>
<h2>TechCrunch Japan 記事の URL を機械的に変換できるか</h2>
<p>たとえば TechCrunch Japan 記事の URL を</p>
<blockquote>
<p><code>https://jp.techcrunch.com/2020/08/14/2020-08-13-instagram-delete-photos-messages-servers/</code></p>
</blockquote>
<p>とする。
この記事に対する原文記事の URL は</p>
<blockquote>
<p><a href="https://techcrunch.com/2020/08/13/instagram-delete-photos-messages-servers/"><code>https://techcrunch.com/2020/08/13/instagram-delete-photos-messages-servers/</code></a></p>
</blockquote>
<p>である。
ドメインが <code>jp.techcrunch.com</code> → <a href="https://techcrunch.com/" title="TechCrunch – Startup and Technology News"><code>techcrunch.com</code></a> なのは当然として</p>
<ol>
<li>翻訳記事と原文記事では URL パスの日付部分が違う</li>
<li>原文記事の日付は翻訳記事の slug に含まれている</li>
<li>日付部分を除く slug の文字列は翻訳記事と原文記事で同じ</li>
</ol>
<p>これくらいなら正規表現を使った置換処理で何とかなりそうだ。
最近のテキスト・エディタは置換処理で正規表現が使えるものが多いが,私が愛用している <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> でも正規表現を使った一括置換が可能である。</p>
<ul>
<li><a href="https://qiita.com/kgsi/items/a88662c6e43fa5311288">Visual Studio Codeを用いた簡単な正規表現検索 - Qiita</a></li>
</ul>
<h2><ruby><rb>例外</rb><rp> (</rp><rt>AMP</rt><rp>) </rp></ruby>を潰す</h2>
<p>私の作業環境で2箇所ほど例外というか間違いがあって</p>
<ul>
<li><code>https://jp.techcrunch.com/2017/12/12/2017-12-11-some-hp-laptops-are-hiding-a-deactivated-keylogger/amp/</code></li>
<li><code>https://jp.techcrunch.com/2020/01/03/2020-01-02-ex-google-policy-chief-dumps-on-the-tech-giant-for-dodging-human-rights/amp/?__twitter_impression=true</code></li>
</ul>
<p>などと,うっかり AMP 用の URL を載せちゃったみたいで,しかも片方は変なパラメータがくっついている。
これらも機械的に置換できなくはないのだが,2箇所だけだし,手作業で原文記事の URL に書き換えた。</p>
<p>AMP ページはマジで滅びて欲しい。
なんでこんな下らないことで Google に気を使わにゃならんの。
メディアが気を遣うべき相手は私ら閲覧者だろうが。
本末転倒だよ。</p>
<p>あと,古い URL でスキーマが HTTP のままになってるのが結構あったので,これは <code>http://jp.techcrunch.com</code> → <code>https://jp.techcrunch.com</code> に一括置換した。</p>
<h2>Slug パターン</h2>
<p>前節の例外を排除したことで TechCrunch Japan 記事のURL</p>
<blockquote>
<p><code>https://jp.techcrunch.com/yyyy/mm/dd/slug/</code></p>
</blockquote>
<p>のうち slug 部分にのみ注目すればよくなった。
この Slug 部分も複数のパターンが見受けられるので整理しておく</p>
<h3>パターン1: 日付情報 yyyy-mm-dd を含む Slug</h3>
<p>最初に挙げた例の通り <code>yyyy-mm-dd-originalslug</code> に要素分解できるパターン。
このパターンには別のバリエーションがあって</p>
<ul>
<li><code>https://jp.techcrunch.com/2020/07/15/x2020-07-14-harvard-mit-sue-ice-student-visas-rule/</code></li>
<li><code>https://jp.techcrunch.com/2020/11/21/https-techcrunch-com-2020-11-20-google-facebook-and-twitter-threaten-to-leave-pakistan-over-censorship-law/</code></li>
</ul>
<p>のように日付情報の前に余分な文字列がくっついている。
2番目のとか原文記事の URL そのままぢゃん。
「なにすんねん」ってツッコんじゃったよ(笑)</p>
<h3>パターン2: 日付情報 yyyymmdd を含む Slug</h3>
<p>以下のような URL パターン:</p>
<ul>
<li><code>https://jp.techcrunch.com/2017/09/13/20170912new-bluetooth-vulnerability-can-hack-a-phone-in-ten-seconds/</code></li>
<li><code>https://jp.techcrunch.com/2016/07/08/automotive-fortune-tesla20160706tesla-says-drivers-using-autopilot-remain-safer-than-regular-drivers/</code></li>
</ul>
<p>パターン1のハイフンが抜けた状態。</p>
<h3>パターン3: Slug に日付情報がない</h3>
<ul>
<li><code>https://jp.techcrunch.com/2021/06/10/netflix-cowboy-bebop-streaming-this-fall/</code></li>
</ul>
<p><code>jp.techcrunch.com</code> → <a href="https://techcrunch.com/" title="TechCrunch – Startup and Technology News"><code>techcrunch.com</code></a> と置換するだけで行けるかなぁと思ったが駄目だった(<a href="https://techcrunch.com/" title="TechCrunch – Startup and Technology News">本家サイト</a>が404になる)。
原文記事の日付情報が得られないので置換不可。</p>
<h3>パターン4: Slug が<a href="https://text.baldanders.info/golang/uri-encoding/" title="URI エンコーディングについて">パーセント・エンコーディング</a>されている</h3>
<ul>
<li><code>https://jp.techcrunch.com/2017/03/13/%e3%80%8c%e6%b3%95%e4%bb%a4%e4%b8%8a%e9%81%95%e5%8f%8d%e3%81%ae%e5%8f%af%e8%83%bd%e6%80%a7%e3%80%81%e5%80%ab%e7%90%86%e7%9a%84%e3%81%ab%e3%82%82%e5%95%8f%e9%a1%8c%e3%80%8ddena%e3%81%8cwelq%e5%95%8f/</code></li>
</ul>
<p>多分,というか間違いなく日本版オリジナル記事だよね。
これは置換対象外とした。</p>
<h2>置換用正規表現</h2>
<p>というわけで,今回はパターン1と2のみが対象となる。
置換処理は <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> を使っている。</p>
<p>パターン1の検索・置換正規表現は以下の通り。</p>
<table>
<thead>
<tr>
<th></th>
<th>正規表現</th>
</tr>
</thead>
<tbody>
<tr>
<td>検索</td>
<td><code>https://jp\.techcrunch\.com/\d{4}/\d{2}/\d{2}/.*(\d{4})-(\d{2})-(\d{2})-(.+)/</code></td>
</tr>
<tr>
<td>置換</td>
<td><code>https://techcrunch.com/$1/$2/$3/$4/</code></td>
</tr>
<tr>
<td>対象ファイル</td>
<td><code>*.md</code></td>
</tr>
</tbody>
</table>
<p>パターン2の検索・置換正規表現は以下の通り。</p>
<table>
<thead>
<tr>
<th></th>
<th>正規表現</th>
</tr>
</thead>
<tbody>
<tr>
<td>検索</td>
<td><code>https://jp\.techcrunch\.com/\d{4}/\d{2}/\d{2}/.*(\d{4})(\d{2})(\d{2})(.+)/</code></td>
</tr>
<tr>
<td>置換</td>
<td><code>https://techcrunch.com/$1/$2/$3/$4/</code></td>
</tr>
<tr>
<td>対象ファイル</td>
<td><code>*.md</code></td>
</tr>
</tbody>
</table>
<p>もう少し頑張ればひとつにまとめられたかもしれないが,副作用が出るのが嫌だったので分けた。
これで未変換の TechCrunch Japan 記事の URL は118個まで減ったが,今のところ,これ以上は無理なので,放置ということで。</p>
<p>どっとはらい</p>
<h2>ブックマーク</h2>
<ul>
<li><a href="https://murashun.jp/article/programming/regular-expression.html">基本的な正規表現一覧 | murashun.jp</a></li>
</ul>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>私の環境では <a href="https://github.com/mattn/jvgrep" title="mattn/jvgrep: grep for japanese vimmer">mattn/jvgrep</a> を <code>grep</code> に alias して使っている。ファイル指定を <code>"content/**/*.md"</code> などと再帰的に指定できるのが嬉しい。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
やっと Codespaces が使える
tag:text.Baldanders.info,2022-04-23:/remark/2022/04/codespaces/
2022-04-23T13:45:12+00:00
2022-04-23T14:00:19+00:00
Go が動くぞ!
Spiegel
https://baldanders.info/profile/
<ol>
<li><a href="https://text.baldanders.info/remark/2021/02/installing-vscode-again/">パソコンに Visual Studio Code を導入する(再チャレンジ)</a></li>
<li><a href="https://text.baldanders.info/remark/2021/02/golang-with-vscode/">Go と VS Code</a></li>
<li><a href="https://text.baldanders.info/remark/2021/02/markdown-with-vscode/">Markdown と VS Code</a></li>
<li><a href="https://text.baldanders.info/remark/2021/08/java-with-vscode/">Java と VS Code</a></li>
<li><a href="https://text.baldanders.info/remark/2022/04/codespaces/">やっと Codespaces が使える</a> ← イマココ</li>
</ol>
<p>さて,<a href="https://text.baldanders.info/remark/2022/03/github-team/">独り GitHub Team</a> も契約したし,よーやく <a href="https://docs.github.com/codespaces" title="GitHub Codespaces Documentation - GitHub Docs">Codespaces</a> が使えるようになったよ。</p>
<p>今のところ <a href="https://docs.github.com/codespaces" title="GitHub Codespaces Documentation - GitHub Docs">Codespaces</a> は GitHub Team または GitHub Enterprise Cloud のメンバで利用できる。
2022-04-23 時点の料金(米ドル建て)は以下の通り。</p>
<figure lang="en">
<blockquote class="nobox" style='margin:0 auto;text-align:center;'>
<a href="https://docs.github.com/billing/managing-billing-for-github-codespaces/about-billing-for-codespaces"><img src="./priceing.png" srcset="./priceing.png 626w" sizes="(min-width:600px) 500px, 80vw" alt="About billing for Codespaces - GitHub Docs" loading="lazy"></a>
</blockquote>
<figcaption><div>via <q><a href="https://docs.github.com/billing/managing-billing-for-github-codespaces/about-billing-for-codespaces">About billing for Codespaces - GitHub Docs</a></q></div></figcaption>
</figure>
<p>ちなみに,使いすぎないよう上限を設定することも可能。</p>
<h2><a href="https://docs.github.com/codespaces" title="GitHub Codespaces Documentation - GitHub Docs">Codespaces</a> クラウドに立つ</h2>
<p><a href="https://docs.github.com/codespaces" title="GitHub Codespaces Documentation - GitHub Docs">Codespaces</a> の起動にはまず,ブラウザでリポジトリ・ページを開き,<code>[Code]</code> ボタンを押下する。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./code.png"><img src="./code.png" srcset="./code.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="Create codespace on master" loading="lazy"></a><figcaption><div><a href="./code.png">Create codespace on master</a></div></figcaption>
</figure>
<p><code>[Create codespace on master]</code> ボタン押下で <a href="https://docs.github.com/codespaces" title="GitHub Codespaces Documentation - GitHub Docs">Codespaces</a> のインスタンス生成が始まる。
上手く起動すればこんな感じに表示される。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./codespae-on-the-browser.png"><img src="./codespae-on-the-browser.png" srcset="./codespae-on-the-browser.png 1922w" sizes="(min-width:600px) 500px, 80vw" alt="Create codespace on master" loading="lazy"></a><figcaption><div><a href="./codespae-on-the-browser.png">Create codespace on master</a></div></figcaption>
</figure>
<p>拡張機能も普通に入れられる。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./extensions.png"><img src="./extensions.png" srcset="./extensions.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="Extensions" loading="lazy"></a><figcaption><div><a href="./extensions.png">Extensions</a></div></figcaption>
</figure>
<p>設定はユーザごとに保持して同期させることもできるようだ。</p>
<h2>Go が動くぞ!</h2>
<p><a href="https://docs.github.com/codespaces" title="GitHub Codespaces Documentation - GitHub Docs">Codespaces</a> 上のターミナルで試しに Go コンパイラを動かしてみたら普通に動いた。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./go-on-the-terminal.png"><img src="./go-on-the-terminal.png" srcset="./go-on-the-terminal.png 961w" sizes="(min-width:600px) 500px, 80vw" alt="こいつ・・・動くぞ!" loading="lazy"></a><figcaption><div><a href="./go-on-the-terminal.png">こいつ・・・動くぞ!</a></div></figcaption>
</figure>
<h2><a href="https://code.visualstudio.com/docs/remote/codespaces" title="Developing with GitHub Codespaces">GitHub Codespaces</a> 拡張機能</h2>
<p><a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> の拡張機能に <a href="https://code.visualstudio.com/docs/remote/codespaces" title="Developing with GitHub Codespaces">GitHub Codespaces</a> というのがあって,これを使うとローカルの <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> 上で <a href="https://docs.github.com/codespaces" title="GitHub Codespaces Documentation - GitHub Docs">Codespaces</a> のリソースにアクセスできる。
コマンドパレットから <code>Codespaces: Connect to Codespace</code> を選択すると生成済みのインスタンスの一覧が表示されるので,選択して接続すると <a href="https://docs.github.com/codespaces" title="GitHub Codespaces Documentation - GitHub Docs">Codespaces</a> に接続した <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> が起動する。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./codespace-on-the-vscode.png"><img src="./codespace-on-the-vscode.png" srcset="./codespace-on-the-vscode.png 1595w" sizes="(min-width:600px) 500px, 80vw" alt="Codespace on the VS Code" loading="lazy"></a><figcaption><div><a href="./codespace-on-the-vscode.png">Codespace on the VS Code</a></div></figcaption>
</figure>
<p>パソコンで作業する場合はこっちのほうがいいかもねぇ。</p>
<h2>Andorid タブレットでも動いた</h2>
<figure style='margin:0 auto;text-align:center;'><a href="./codespace-on-the-android-browser.jpg"><img src="./codespace-on-the-android-browser.jpg" srcset="./codespace-on-the-android-browser.jpg 1920w" sizes="(min-width:600px) 500px, 80vw" alt="Codespace on the Android Browser" loading="lazy"></a><figcaption><div><a href="./codespace-on-the-android-browser.jpg">Codespace on the Android Browser</a></div></figcaption>
</figure>
<p>おわ。
ターミナルの状態も共有できるのか。
凄いな。</p>
<p>ちなみに Android の Firefox では <a href="https://docs.github.com/codespaces" title="GitHub Codespaces Documentation - GitHub Docs">Codespaces</a> を起動できなかった。
冷遇されてるなぁ(笑)</p>
<h2>後始末</h2>
<p><a href="https://docs.github.com/codespaces" title="GitHub Codespaces Documentation - GitHub Docs">Codespaces</a> を終了する場合はコマンドパレットから <code>Codespaces: Stop Current Codespace</code> を選択して明示的に停止させること。
まぁ,最悪でも30分非活性状態なら自動的に停止するらしいけど。</p>
<p><a href="https://docs.github.com/codespaces" title="GitHub Codespaces Documentation - GitHub Docs">Codespaces</a> のインスタンスはリポジトリごとに生成されるのでご注意を。
また,使わなくなったインスタンスはマメに削除することをお勧めする。
インスタンスの削除は “Your codespaces” でできる。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./your-codespaces.png"><img src="./your-codespaces.png" srcset="./your-codespaces.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="Your codespaces" loading="lazy"></a><figcaption><div><a href="./your-codespaces.png">Your codespaces</a></div></figcaption>
</figure>
<h2>ブックマーク</h2>
<ul>
<li><a href="https://github.blog/jp/2021-08-30-githubs-engineering-team-moved-codespaces/">GitHub開発チームでのCodespacesの利用 - GitHubブログ</a></li>
<li><a href="https://github.com/features/codespaces">GitHub Codespaces · GitHub</a></li>
<li><a href="https://docs.github.com/en/codespaces">GitHub Codespaces Documentation - GitHub Docs</a></li>
<li><a href="https://docs.github.com/ja/billing/managing-billing-for-github-codespaces/about-billing-for-codespaces">Codespaces の支払いについて - GitHub Docs</a></li>
<li><a href="https://qiita.com/Alt225/items/5d904fafc779e6505768">Github CodeSpace 触ってみた - Qiita</a></li>
<li><a href="https://www.wantedly.com/companies/wantedly/post_articles/355862">GitHub Codespaces をつかって 3分で始めるサービス開発 | Wantedly, Inc.</a></li>
<li><a href="https://docs.wantedly.dev/fields/dev-tools/codespaces">GitHub Codespaces で開発する - Wantedly Engineering Handbook</a></li>
</ul>
Azure App Service に VS Code でデプロイできなかった話
tag:text.Baldanders.info,2022-04-06:/remark/2022/04/cannot-deploy-with-vscode/
2022-04-06T11:37:03+00:00
2022-04-14T11:20:28+00:00
当面は VS Code 1.65.x にダウングレードするしかないらしい。
Spiegel
https://baldanders.info/profile/
<p>私は <a href="https://azure.microsoft.com/en-us/services/app-service/" title="App Service — Build & Host Web Apps | Microsoft Azure">Azure App Service</a> に手動でデプロイする際は <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> の <a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice" title="Azure App Service - Visual Studio Marketplace">Azure App Service 拡張機能</a>を使ってるんだけど,ここのところ頻繁にデプロイに失敗してたのよ。
最初は <a href="https://azure.microsoft.com/en-us/services/app-service/" title="App Service — Build & Host Web Apps | Microsoft Azure">App Service</a> のほうがやらかしてるんだと思ってたんだけど(だって上手く行くときもあるし),ググったら違ってたようだ。</p>
<figure lang="en">
<blockquote>
VS Code 1.66 upgraded to Node 16 which has been causing deployment issues for both Functions and App Service. Unfortunately, the only current known workaround is to downgrade VS Code to 1.65.x. We're currently investigating a proper fix.
</blockquote>
<figcaption><div>via <q><a href="https://github.com/microsoft/vscode-azureappservice/issues/2194#issuecomment-1087857459">ECONNRESET trying azure deploy webapp VS Code · Issue #2194 · microsoft/vscode-azureappservice</a></q></div></figcaption>
</figure>
<p>まじすか <code>orz</code></p>
<p>ダウングレードってどうやんだ? と思ったが単純に 1.65.x のインストール・パッケージを拾ってきて上書きインストールすればいいようだ。</p>
<ul>
<li><a href="https://code.visualstudio.com/updates/v1_65">Visual Studio Code February 2022</a></li>
</ul>
<p>Windows 環境では自動更新を無効にするのをお忘れなく。
やれやれ</p>
<div class="box"><p><strong>【2022-04-14 追記】</strong>
v1.66.2 で直った。
よかったよかった。</p>
<ul>
<li><a href="https://github.com/microsoft/vscode/releases/tag/1.66.2">Release March 2022 Recovery 2 · microsoft/vscode · GitHub</a></li>
</ul></div>
<h2>ブックマーク</h2>
<ul>
<li><a href="https://github.com/microsoft/vscode-azurefunctions/issues/2844">Investigate ECONNRESET issue during “zipdeploy” call · Issue #2844 · microsoft/vscode-azurefunctions · GitHub</a></li>
</ul>
改めて TeX Live を Ubuntu に(APT を使わずに)導入する
tag:text.Baldanders.info,2021-09-09:/remark/2021/09/install-texlive-in-ubuntu-again/
2021-09-09T13:20:36+00:00
2021-09-10T09:57:54+00:00
LuaLaTeX でソースコードを含む文書を PDF 出力するところまで。
Spiegel
https://baldanders.info/profile/
<p>6月にパソコンを買い換えてから新しいマシンには $\mathrm{\TeX}$ 環境を入れてなかったのだが,先日『<a href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1" title="[改訂第8版]LaTeX2ε美文書作成入門 | 奥村晴彦, 黒木裕介 |本 | 通販 | Amazon">LaTeX2ε美文書作成入門</a>』第8版の<a href="https://text.baldanders.info/remark/2021/09/latex-primer/" title="改訂第8版『LaTeX2ε美文書作成入門』を眺める">読書感想文を書いた</a>ばかりなので,調子に乗って <a href="http://www.tug.org/texlive/" title="TeX Live - TeX Users Group">TeX Live</a> 2021 を入れてしまおうと思い立った。</p>
<p>『<a href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1" title="[改訂第8版]LaTeX2ε美文書作成入門 | 奥村晴彦, 黒木裕介 |本 | 通販 | Amazon">LaTeX2ε美文書作成入門</a>』の付録Aには</p>
<figure>
<blockquote><q>あらかじめ <code>/usr/local/texlive</code> というディレクトリを作成し,インストールする人の権限で書き込めるようにしておくのが簡単です</q></blockquote>
<figcaption><div><q><a href="https://www.amazon.co.jp/dp/B08MZ98Z1Q?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">[改訂第8版]LaTeX2ε美文書作成入門</a></q>より</div></figcaption>
</figure>
<p>とか書かれてあって「やっぱそーなのか」と納得してしまった。
激しくダサい気がするがしょうがないか。
まぁ,今回は個人パソコンなので素直に</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ cd /usr/local/
</span></span><span class="line"><span class="cl">$ sudo mkdir texlive
</span></span><span class="line"><span class="cl">$ sudo chown -R username:username texlive
</span></span></code></pre></div><p>としてしおう。</p>
<p>サーバ機などでは,インストール完了後にオーナーを <code>root</code> に書き戻し</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ cd /usr/local
</span></span><span class="line"><span class="cl">$ sudo chown -R root:root texlive
</span></span><span class="line"><span class="cl">$ cd texlive/2021/bin/x86_64-linux/
</span></span><span class="line"><span class="cl">$ sudo ./tlmgr path add
</span></span></code></pre></div><p>と <code>/usr/local/bin/</code> 等パスの通ったディレクトリへシンボリック・リンクを張っておけば複数ユーザで共有できるようになる。
アップグレード等で元に戻す場合は</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ sudo tlmgr path remove
</span></span><span class="line"><span class="cl">$ cd /usr/local/
</span></span><span class="line"><span class="cl">$ sudo chown -R username:username texlive
</span></span><span class="line"><span class="cl">...
</span></span></code></pre></div><p>という感じに,いったんシンボリック・リンクを削除してから諸々の作業を行うといいだろう。</p>
<h2>OpenPGP 公開鍵を取ってくる</h2>
<p><a href="http://www.tug.org/texlive/" title="TeX Live - TeX Users Group">TeX Live</a> のサイトでは検証用に OpenPGP 公開鍵を公開している。
これを取ってきて自分の鍵束にインポートしてしまおう。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ gpg --fetch-key http://www.tug.org/texlive/files/texlive.asc
</span></span><span class="line"><span class="cl">gpg: 鍵を'http://www.tug.org/texlive/files/texlive.asc'から要求
</span></span><span class="line"><span class="cl">gpg: 鍵0D5E5D9106BAB6BC: 公開鍵"TeX Live Distribution <tex-live@tug.org>"をインポートしました
</span></span><span class="line"><span class="cl">gpg: 処理数の合計: 1
</span></span><span class="line"><span class="cl">gpg: インポート: 1
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">$ gpg --list-keys 0D5E5D9106BAB6BC
</span></span><span class="line"><span class="cl">pub rsa2048 2016-03-19 [SC]
</span></span><span class="line"><span class="cl"> C78B82D8C79512F79CC0D7C80D5E5D9106BAB6BC
</span></span><span class="line"><span class="cl">uid [ 不明 ] TeX Live Distribution <tex-live@tug.org>
</span></span><span class="line"><span class="cl">sub rsa2048 2016-03-19 [E]
</span></span><span class="line"><span class="cl">sub rsa2048 2016-03-19 [S] [有効期限: 2022-07-27]
</span></span></code></pre></div><p>これはアレだな。
<a href="http://www.tug.org/texlive/" title="TeX Live - TeX Users Group">TeX Live</a> がアップグレードされるたびに更新しろってことだな。</p>
<h2>インストーラのダウンロードと検証</h2>
<p>では続きを。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ curl -L "https://mirror.ctan.org/systems/texlive/tlnet/install-tl-unx.tar.gz" -O
</span></span><span class="line"><span class="cl">$ curl -L "https://mirror.ctan.org/systems/texlive/tlnet/install-tl-unx.tar.gz.sha512" -O
</span></span><span class="line"><span class="cl">$ curl -L "https://mirror.ctan.org/systems/texlive/tlnet/install-tl-unx.tar.gz.sha512.asc" -O
</span></span><span class="line"><span class="cl">$ gpg -d install-tl-unx.tar.gz.sha512.asc
</span></span><span class="line"><span class="cl">gpg: 署名されたデータが'install-tl-unx.tar.gz.sha512'にあると想定します
</span></span><span class="line"><span class="cl">gpg: 2021年09月08日 08時53分40秒 JSTに施された署名
</span></span><span class="line"><span class="cl">gpg: RSA鍵4CE1877E19438C70を使用
</span></span><span class="line"><span class="cl">gpg: "TeX Live Distribution <tex-live@tug.org>"からの正しい署名 [不明の]
</span></span><span class="line"><span class="cl">gpg: *警告*: この鍵は信用できる署名で証明されていません!
</span></span><span class="line"><span class="cl">gpg: この署名が所有者のものかどうかの検証手段がありません。
</span></span><span class="line"><span class="cl">主鍵フィンガープリント: C78B 82D8 C795 12F7 9CC0 D7C8 0D5E 5D91 06BA B6BC
</span></span><span class="line"><span class="cl"> 副鍵フィンガープリント: D8F2 F860 57A8 57E4 2A88 106A 4CE1 877E 1943 8C70
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">$ sha512sum -c install-tl-unx.tar.gz.sha512
</span></span><span class="line"><span class="cl">install-tl-unx.tar.gz: OK
</span></span></code></pre></div><p>なんちう回りくどい<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。
普通にダウンロードファイルに署名すりゃいいぢゃん <code>orz</code></p>
<p>ちなみに拙作の <a href="https://github.com/spiegel-im-spiegel/gnkf" title="spiegel-im-spiegel/gnkf: Network Kanji Filter by Golang">gnkf</a> を使っても</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ gnkf hash -a SHA-512 -c install-tl-unx.tar.gz.sha512
</span></span><span class="line"><span class="cl">install-tl-unx.tar.gz: OK
</span></span></code></pre></div><p>てな感じで検証できる。
<code>sha512sum</code> コマンドがない環境でどうぞ。
宣伝でした(笑)</p>
<h2>よーやくインストール開始</h2>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ tar xvf install-tl-unx.tar.gz
</span></span><span class="line"><span class="cl">$ cd install-tl-20210908/
</span></span><span class="line"><span class="cl">$ ./install-tl
</span></span></code></pre></div><p>リポジトリを指定する必要はないみたい。
適当に近場を探してくれてるようだ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">======================> TeX Live installation procedure <=====================
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">======> Letters/digits in <angle brackets> indicate <=======
</span></span><span class="line"><span class="cl">======> menu items for actions or customizations <=======
</span></span><span class="line"><span class="cl">= help> https://tug.org/texlive/doc/install-tl.html <=======
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> Detected platform: GNU/Linux on x86_64
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <B> set binary platforms: 1 out of 16
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <S> set installation scheme: scheme-full
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <C> set installation collections:
</span></span><span class="line"><span class="cl"> 40 collections out of 41, disk space required: 7135 MB
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <D> set directories:
</span></span><span class="line"><span class="cl"> TEXDIR (the main TeX directory):
</span></span><span class="line"><span class="cl"> /usr/local/texlive/2021
</span></span><span class="line"><span class="cl"> TEXMFLOCAL (directory for site-wide local files):
</span></span><span class="line"><span class="cl"> /usr/local/texlive/texmf-local
</span></span><span class="line"><span class="cl"> TEXMFSYSVAR (directory for variable and automatically generated data):
</span></span><span class="line"><span class="cl"> /usr/local/texlive/2021/texmf-var
</span></span><span class="line"><span class="cl"> TEXMFSYSCONFIG (directory for local config):
</span></span><span class="line"><span class="cl"> /usr/local/texlive/2021/texmf-config
</span></span><span class="line"><span class="cl"> TEXMFVAR (personal directory for variable and automatically generated data):
</span></span><span class="line"><span class="cl"> ~/.texlive2021/texmf-var
</span></span><span class="line"><span class="cl"> TEXMFCONFIG (personal directory for local config):
</span></span><span class="line"><span class="cl"> ~/.texlive2021/texmf-config
</span></span><span class="line"><span class="cl"> TEXMFHOME (directory for user-specific files):
</span></span><span class="line"><span class="cl"> ~/texmf
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <O> options:
</span></span><span class="line"><span class="cl"> [ ] use letter size instead of A4 by default
</span></span><span class="line"><span class="cl"> [X] allow execution of restricted list of programs via \write18
</span></span><span class="line"><span class="cl"> [X] create all format files
</span></span><span class="line"><span class="cl"> [X] install macro/font doc tree
</span></span><span class="line"><span class="cl"> [X] install macro/font source tree
</span></span><span class="line"><span class="cl"> [ ] create symlinks to standard directories
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <V> set up for portable installation
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Actions:
</span></span><span class="line"><span class="cl"> <I> start installation to hard disk
</span></span><span class="line"><span class="cl"> <P> save installation profile to 'texlive.profile' and exit
</span></span><span class="line"><span class="cl"> <Q> quit
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Enter command:
</span></span></code></pre></div><p>必要に応じて設定を変えて(既定のままでも無問題)問題なければ <code>I</code> を入力してインストールを開始する。
私の環境では1時間近くかかった。
お茶菓子を用意しておくか(笑)</p>
<p>環境変数については <code>~/.profile</code> ファイルに</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># Expand $PATH to include the directory where TeX Live applications go.</span>
</span></span><span class="line"><span class="cl"><span class="nv">texlive_path</span><span class="o">=</span><span class="s2">"/usr/local/texlive/2021"</span>
</span></span><span class="line"><span class="cl"><span class="nv">texlive_bin_path</span><span class="o">=</span><span class="s2">"</span><span class="si">${</span><span class="nv">texlive_path</span><span class="si">}</span><span class="s2">/bin/x86_64-linux"</span>
</span></span><span class="line"><span class="cl"><span class="k">if</span> <span class="o">[</span> -d <span class="s2">"</span><span class="nv">$texlive_path</span><span class="s2">"</span> -a -n <span class="s2">"</span><span class="si">${</span><span class="nv">PATH</span><span class="p">##*</span><span class="si">${</span><span class="nv">texlive_bin_path</span><span class="si">}}</span><span class="s2">"</span> -a -n <span class="s2">"</span><span class="si">${</span><span class="nv">PATH</span><span class="p">##*</span><span class="si">${</span><span class="nv">texlive_bin_path</span><span class="si">}</span><span class="p">:*</span><span class="si">}</span><span class="s2">"</span> <span class="o">]</span><span class="p">;</span> <span class="k">then</span>
</span></span><span class="line"><span class="cl"> <span class="nb">export</span> <span class="nv">PATH</span><span class="o">=</span><span class="s2">"</span><span class="nv">$PATH</span><span class="s2">:</span><span class="nv">$texlive_bin_path</span><span class="s2">"</span>
</span></span><span class="line"><span class="cl"><span class="k">fi</span>
</span></span><span class="line"><span class="cl"><span class="nb">unset</span> texlive_path texlive_bin_path
</span></span></code></pre></div><p>と追記しておけばいいかな。
一応,動作確認しておく。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ lualatex -v
</span></span><span class="line"><span class="cl">This is LuaHBTeX, Version 1.13.2 (TeX Live 2021)
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Execute 'luahbtex --credits' for credits and version details.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">There is NO warranty. Redistribution of this software is covered by
</span></span><span class="line"><span class="cl">the terms of the GNU General Public License, version 2 or (at your option)
</span></span><span class="line"><span class="cl">any later version. For more information about these matters, see the file
</span></span><span class="line"><span class="cl">named COPYING and the LuaTeX source.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">LuaTeX is Copyright 2021 Taco Hoekwater and the LuaTeX Team.
</span></span></code></pre></div><p>マニュアルに関しては <code>texdoc</code> コマンドを使って</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ texdoc luatex
</span></span></code></pre></div><p>などとすれば対応する PDF ファイルが開く。
便利!</p>
<h2>自動実行可能な外部コマンドの指定</h2>
<p>とりあえず <code>shell_escape_commands</code> の値を変更しておく。
インストール直後は</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ kpsewhich -var-value=shell_escape_commands
</span></span><span class="line"><span class="cl">bibtex,bibtex8,extractbb,gregorio,kpsewhich,makeindex,repstopdf,texosquery-jre8,
</span></span></code></pre></div><p>となっているので <code>/usr/ocal/texlive/texmf-local/web2c/texmf.cnf</code> ファイルを作成し以下を記述する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">shell_escape_commands = \
</span></span><span class="line"><span class="cl">bibtex,bibtex8,pbibtex,jbibtex,\
</span></span><span class="line"><span class="cl">extractbb,\
</span></span><span class="line"><span class="cl">gregorio,\
</span></span><span class="line"><span class="cl">kpsewhich,\
</span></span><span class="line"><span class="cl">makeindex,mendex,\
</span></span><span class="line"><span class="cl">repstopdf,epspdf,\
</span></span><span class="line"><span class="cl">texosquery-jre8,\
</span></span></code></pre></div><p>これで <code>shell_escape_commands</code> の値が上書きされて</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ kpsewhich -var-value=shell_escape_commands
</span></span><span class="line"><span class="cl">bibtex,bibtex8,pbibtex,jbibtex,extractbb,gregorio,kpsewhich,makeindex,mendex,repstopdf,epspdf,texosquery-jre8,
</span></span></code></pre></div><p>となる。</p>
<p>設定を変更したら <code>mktexlsr</code> で状態を更新しておくこと。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ mktexlsr
</span></span><span class="line"><span class="cl">mktexlsr: Updating /usr/local/texlive/2021/texmf-config/ls-R...
</span></span><span class="line"><span class="cl">mktexlsr: Updating /usr/local/texlive/2021/texmf-dist/ls-R...
</span></span><span class="line"><span class="cl">mktexlsr: Updating /usr/local/texlive/2021/texmf-var/ls-R...
</span></span><span class="line"><span class="cl">mktexlsr: Updating /usr/local/texlive/texmf-local/ls-R...
</span></span><span class="line"><span class="cl">mktexlsr: Done.
</span></span></code></pre></div><h2>LuaLaTeX でなんか出力してみる</h2>
<p>そうだ。
プログラムコードを出してみよう。</p>
<ul>
<li><a href="https://text.baldanders.info/remark/2017/10/writing-code-with-lualatex/">LuaLaTeX でコードを書いてみる</a></li>
</ul>
<p>その前に <a href="https://ctan.org/tex-archive/macros/latex/contrib/listings" title="CTAN: /tex-archive/macros/latex/contrib/listings"><code>listings</code></a> パッケージで Go コードの syntax highlight が効くよう <a href="https://github.com/julienc91/listings-golang" title="julienc91/listings-golang: Golang support for the listings package in LaTeX"><code>listings-golang</code></a> を取ってくる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ cd /usr/local/texlive/texmf-local/tex/latex/
</span></span><span class="line"><span class="cl">$ git clone git@github.com:julienc91/listings-golang.git
</span></span><span class="line"><span class="cl">$ mktexlsr
</span></span></code></pre></div><p>そうそう。
$\mathrm{Lua\LaTeX}$ を使うならフォントキャッシュも念の為にアップデートしておくか。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ luaotfload-tool -fu
</span></span></code></pre></div><p>用意したテキストはこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-latex" data-lang="latex"><span class="line"><span class="cl"><span class="k">\documentclass</span><span class="nb">{</span>jlreq<span class="nb">}</span>
</span></span><span class="line"><span class="cl"><span class="k">\usepackage</span><span class="na">[jis2004,deluxe]</span><span class="nb">{</span>luatexja-preset<span class="nb">}</span> <span class="c">% Japanese fonts
</span></span></span><span class="line"><span class="cl"><span class="c"></span><span class="k">\setmonofont</span><span class="na">[AutoFakeSlant,BoldItalicFeatures={FakeSlant},Scale=MatchLowercase]</span><span class="nb">{</span>Inconsolatazi4<span class="nb">}</span> <span class="c">% use Inconsolata
</span></span></span><span class="line"><span class="cl"><span class="c"></span>
</span></span><span class="line"><span class="cl"><span class="k">\usepackage</span><span class="nb">{</span>graphicx,xcolor<span class="nb">}</span>
</span></span><span class="line"><span class="cl"><span class="c">% \usepackage{listings}
</span></span></span><span class="line"><span class="cl"><span class="c"></span><span class="k">\usepackage</span><span class="nb">{</span>listings-golang<span class="nb">}</span> <span class="c">% import this package after listings
</span></span></span><span class="line"><span class="cl"><span class="c"></span><span class="k">\lstset</span><span class="nb">{</span>
</span></span><span class="line"><span class="cl"> frame=single,
</span></span><span class="line"><span class="cl"> basicstyle=<span class="k">\small\ttfamily</span>,
</span></span><span class="line"><span class="cl"> tabsize=4,
</span></span><span class="line"><span class="cl"> commentstyle=<span class="k">\color</span><span class="nb">{</span>darkgray<span class="nb">}</span>,
</span></span><span class="line"><span class="cl"> keywordstyle=<span class="k">\color</span><span class="nb">{</span>brown<span class="nb">}</span><span class="k">\bfseries</span>,
</span></span><span class="line"><span class="cl"> stringstyle=<span class="k">\color</span><span class="nb">{</span>blue<span class="nb">}</span>,
</span></span><span class="line"><span class="cl"> showstringspaces=false
</span></span><span class="line"><span class="cl"><span class="nb">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">\begin</span><span class="nb">{</span>document<span class="nb">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">\section</span><span class="nb">{</span>Go 言語による Hello World<span class="nb">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">\begin</span><span class="nb">{</span>lstlisting<span class="nb">}</span>[language=Golang]
</span></span><span class="line"><span class="cl">package main
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">import "fmt"
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">func main() <span class="nb">{</span>
</span></span><span class="line"><span class="cl"> for i := 0; i < 10; i++ <span class="nb">{</span>
</span></span><span class="line"><span class="cl"> fmt.Println("Hello, world") //Hello, 世界
</span></span><span class="line"><span class="cl"> <span class="nb">}</span>
</span></span><span class="line"><span class="cl"><span class="nb">}</span>
</span></span><span class="line"><span class="cl"><span class="k">\end</span><span class="nb">{</span>lstlisting<span class="nb">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">\section</span><span class="nb">{</span>シェルスクリプト<span class="nb">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">\begin</span><span class="nb">{</span>lstlisting<span class="nb">}</span>[language=sh]
</span></span><span class="line"><span class="cl">#!/bin/sh
</span></span><span class="line"><span class="cl">for i in `seq 100`; do
</span></span><span class="line"><span class="cl"> j="<span class="s">$</span><span class="nb">i"
</span></span></span><span class="line"><span class="cl"><span class="nb"> if </span><span class="o">[</span><span class="nb"> `expr </span><span class="s">$</span>i <span class="c">% 3` == 0 ]; then echo -n 'Fizz'; j=''; fi
</span></span></span><span class="line"><span class="cl"><span class="c"></span> if [ `expr <span class="s">$</span><span class="nb">i </span><span class="c">% 5` == 0 ]; then echo -n 'Buzz'; j=''; fi
</span></span></span><span class="line"><span class="cl"><span class="c"></span><span class="nb"> echo "</span><span class="s">$</span>j"
</span></span><span class="line"><span class="cl">done
</span></span><span class="line"><span class="cl"><span class="k">\end</span><span class="nb">{</span>lstlisting<span class="nb">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">\end</span><span class="nb">{</span>document<span class="nb">}</span>
</span></span></code></pre></div><p>へっへっへ。
<code>jlreq</code> ドキュメントクラスを使ってみたぜ。</p>
<p>これを処理した結果は以下の通り。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./sample.pdf"><img src="./sample.png" srcset="./sample.png 1252w" sizes="(min-width:600px) 500px, 80vw" alt="sample.pdf" loading="lazy"></a><figcaption><div><a href="./sample.pdf">sample.pdf</a></div></figcaption>
</figure>
<p>うんうん。
こんなもんだろう。</p>
<h2><a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> に <a href="https://marketplace.visualstudio.com/items?itemName=James-Yu.latex-workshop" title="LaTeX Workshop - Visual Studio Marketplace">LaTeX Workshop</a> を導入する</h2>
<p>『<a href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1" title="[改訂第8版]LaTeX2ε美文書作成入門 | 奥村晴彦, 黒木裕介 |本 | 通販 | Amazon">LaTeX2ε美文書作成入門</a>』でも紹介されていた <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> 用の <a href="https://marketplace.visualstudio.com/items?itemName=James-Yu.latex-workshop" title="LaTeX Workshop - Visual Studio Marketplace">LaTeX Workshop</a> を導入してみた。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension James-Yu.latex-workshop
</span></span></code></pre></div><p>たとえば,以下の内容で <code>.latexmkrc</code> ファイルを用意しておく。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-perl" data-lang="perl"><span class="line"><span class="cl"><span class="ch">#!/usr/bin/env perl</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># LaTeX commands</span>
</span></span><span class="line"><span class="cl"><span class="nv">$pdflatex</span> <span class="o">=</span> <span class="s">'lualatex %O -synctex=1 %S'</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$latex</span> <span class="o">=</span> <span class="s">'uplatex %O -synctex=1 %S'</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$latex_silent_switch</span> <span class="o">=</span> <span class="s">'-interaction=batchmode -c-style-errors'</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># bibTeX commands</span>
</span></span><span class="line"><span class="cl"><span class="nv">$bibtex</span> <span class="o">=</span> <span class="s">'upbibtex %O %B'</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$biber</span> <span class="o">=</span> <span class="s">'biber %O --bblencoding=utf8 -u -U --output_safechars %B'</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$makeindex</span> <span class="o">=</span> <span class="s">'mendex %O -o %D %S'</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># Device Driver</span>
</span></span><span class="line"><span class="cl"><span class="nv">$dvipdf</span> <span class="o">=</span> <span class="s">'dvipdfmx %O -z9 -V 7 -o %D %S'</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$dvips</span> <span class="o">=</span> <span class="s">'dvips %O -z -f %S | convbkmk -u > %D'</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$ps2pdf</span> <span class="o">=</span> <span class="s">'ps2pdf14 -dPDFA -dPDFACompatibilityPolicy=1 -sProcessColorModel=DeviceCMYK %O %S %D'</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># Typeset mode (generate a PDF)</span>
</span></span><span class="line"><span class="cl"><span class="nv">$pdf_mode</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span> <span class="c1"># 0: do not generate a pdf , 1: using $pdflatex , 2: using $ps2pdf , 3: using $dvipdf</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># Other configuration</span>
</span></span><span class="line"><span class="cl"><span class="nv">$pvc_view_file_via_temporary</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$max_repeat</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span>
</span></span></code></pre></div><p>したら $\mathrm{\LaTeX}$ テキストを保存するたびに上の設定でタイプセットが自動実行されて PDF まで作ってしまうわけですよ。
めっさ便利。</p>
<h2>ブックマーク</h2>
<ul>
<li>
<p><a href="http://www.tug.org/texlive/acquire-netinstall.html">Installing TeX Live over the Internet - TeX Users Group</a></p>
</li>
<li>
<p><a href="https://texwiki.texjp.org/">TeX Wiki</a></p>
</li>
<li>
<p><a href="https://text.baldanders.info/remark/2019/04/install-texlive-in-ubuntu/">TeX Live を Ubuntu に(APT を使わずに)導入する</a></p>
</li>
<li>
<p><a href="https://text.baldanders.info/remark/2019/06/upgrade-texlive-from-2018-to-2019/">TeX Live 2018 から 2019 へのアップグレード</a></p>
</li>
<li>
<p><a href="https://text.baldanders.info/remark/2020/04/upgrade-texlive-2020/">TeX Live 2020 へのアップグレード</a></p>
</li>
</ul>
<h2>参考図書</h2>
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/41xmBlTiwlL._SL160_.jpg" width="126" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/4297117126?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">[改訂第8版]LaTeX2ε美文書作成入門</a></dt>
<dd>奥村晴彦 (著), 黒木裕介 (著)</dd>
<dd>技術評論社 2020-11-14</dd>
<dd>大型本</dd>
<dd>4297117126 (ASIN), 9784297117122 (EAN), 4297117126 (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="5"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></abbr></dd>
</dl>
<p class="description">2020年末に第8版が出てたのに気付かなかったよ。可能なら紙の本も買って常に側に置いておくのが吉。<a href="https://gihyo.jp/book/2020/978-4-297-11712-2">版元</a>には PDF 版もある。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2021-09-05">2021-09-05</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- LaTeX2ε美文書作成入門 -->
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>電子署名の検証で「<code>*警告*: この鍵は信用できる署名で証明されていません!</code>」と表示されているが,気にしなくてよい。その前の「<code>"TeX Live Distribution <tex-live@tug.org>"からの正しい署名</code>」が表示されていればOK。警告が出るのはインポートした公開鍵に自鍵で署名したり有効度を設定したりしてないからだが,直接手渡しされた鍵でもないのに安易に信用するのは危険であると言っておこう。もちろん何らかの手段で鍵と所有者が確定できるのであれば署名するなり有効度を設定するなりすればよい。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
Java と VS Code
tag:text.Baldanders.info,2021-08-18:/remark/2021/08/java-with-vscode/
2021-08-18T13:20:30+00:00
2022-04-23T13:45:31+00:00
どうせなら VS Code で環境を作るのがいいよねってことで
Spiegel
https://baldanders.info/profile/
<ol>
<li><a href="https://text.baldanders.info/remark/2021/02/installing-vscode-again/">パソコンに Visual Studio Code を導入する(再チャレンジ)</a></li>
<li><a href="https://text.baldanders.info/remark/2021/02/golang-with-vscode/">Go と VS Code</a></li>
<li><a href="https://text.baldanders.info/remark/2021/02/markdown-with-vscode/">Markdown と VS Code</a></li>
<li><a href="https://text.baldanders.info/remark/2021/08/java-with-vscode/">Java と VS Code</a> ← イマココ</li>
<li><a href="https://text.baldanders.info/remark/2022/04/codespaces/">やっと Codespaces が使える</a></li>
</ol>
<p>仕事で Spring Boot なコードを書くことになって,今更ながら基本から勉強し直している。
で,どうせなら <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> で環境を作るのがいいよねってことで,覚え書きとして記しておく。</p>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack" title="Extension Pack for Java - Visual Studio Marketplace">Extension Pack for Java</a></h2>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension vscjava.vscode-java-pack
</span></span></code></pre></div><p>これをインストールすると以下のパッケージも併せてインストールされる。</p>
<ul>
<li><a href="https://marketplace.visualstudio.com/items?itemName=redhat.java">Language Support for Java(TM) by Red Hat - Visual Studio Marketplace</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-debug">Debugger for Java - Visual Studio Marketplace</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-test">Test Runner for Java - Visual Studio Marketplace</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-maven">Maven for Java - Visual Studio Marketplace</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-dependency">Project Manager for Java - Visual Studio Marketplace</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode">Visual Studio IntelliCode - Visual Studio Marketplace</a></li>
</ul>
<p>これだけあれば基本的な道具は一通り揃う。</p>
<h3>みんな大好き “Hello, World!”</h3>
<p>ここで簡単に動作確認しておこう。
以下の手順でプロジェクトの雛形を作成する。</p>
<ol>
<li>コマンドパレットから “Java: Create Java Project” を選択する</li>
<li>プロジェクト・タイプの一覧が表示されるので “No build tools” を選択する</li>
<li>作業ディレクトリを選択する</li>
<li>プロジェクト名を指定する(ここでは <code>hello</code> と入力)</li>
</ol>
<p>これで</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ tree hello
</span></span><span class="line"><span class="cl">hello
</span></span><span class="line"><span class="cl">├── README.md
</span></span><span class="line"><span class="cl">├── lib
</span></span><span class="line"><span class="cl">└── src
</span></span><span class="line"><span class="cl"> └── App.java
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">2 directories, 2 files
</span></span></code></pre></div><p>という感じにディレクトリ・ファイルが作成される。
<code>App.java</code> の中身はこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-java" data-lang="java"><span class="line"><span class="cl"><span class="kd">public</span><span class="w"> </span><span class="kd">class</span> <span class="nc">App</span><span class="w"> </span><span class="p">{</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="kd">public</span><span class="w"> </span><span class="kd">static</span><span class="w"> </span><span class="kt">void</span><span class="w"> </span><span class="nf">main</span><span class="p">(</span><span class="n">String</span><span class="o">[]</span><span class="w"> </span><span class="n">args</span><span class="p">)</span><span class="w"> </span><span class="kd">throws</span><span class="w"> </span><span class="n">Exception</span><span class="w"> </span><span class="p">{</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="n">System</span><span class="p">.</span><span class="na">out</span><span class="p">.</span><span class="na">println</span><span class="p">(</span><span class="s">"Hello, World!"</span><span class="p">);</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="p">}</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">}</span><span class="w">
</span></span></span></code></pre></div><p>エディタ上は</p>
<figure style='margin:0 auto;text-align:center;'><a href="https://text.baldanders.info/hello-java-code.png"><img src="./hello-java-code.png" srcset="./hello-java-code.png 528w" sizes="(min-width:600px) 500px, 80vw" alt="" loading="lazy"></a></figure>
<p>という感じに表示されているので <code>main()</code> 関数直上の <code>Run</code> のリンクをクリックすればコンパイル&実行してくれる。
Java Process Console に <code>Hello, World!</code> と表示されれば無問題。</p>
<h3>Import 補完</h3>
<p>Java の <code>import</code> 宣言ってすぐに汚れるよね。
使わない <code>import</code> とか。
逆に <code>import</code> が足りなくてエラーになったり。</p>
<p>こういうときはコマンドパレットから “Organize Imports” でいい感じに整形してくれる。
保存時に自動で整形するには <code>settings.json</code> に</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="s2">"java.saveActions.organizeImports"</span><span class="err">:</span> <span class="kc">true</span>
</span></span></code></pre></div><p>を追加してやればよい。</p>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack" title="Spring Boot Extension Pack - Visual Studio Marketplace">Spring Boot Extension Pack</a></h2>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension Pivotal.vscode-boot-dev-pack
</span></span></code></pre></div><p>これも以下のパッケージを含んでいるようだ。</p>
<ul>
<li><a href="https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-spring-boot">Spring Boot Tools - Visual Studio Marketplace</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-spring-initializr">Spring Initializr Java Support - Visual Studio Marketplace</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-spring-boot-dashboard">Spring Boot Dashboard - Visual Studio Marketplace</a></li>
</ul>
<h3>雛形プロジェクトを作る</h3>
<p>これも動作確認しておこう。</p>
<ol>
<li>コマンドパレットから “Spring Initializr: Generate a Maven Project” を選択する</li>
<li>Spring Boot のバージョンを選択(2021-08-18 時点の最新は 2.5.3)</li>
<li>使用言語を選択。もちろん Java で</li>
<li>Group Id を入力。ここはデフォルトの <code>com.example</code> のままにしておく</li>
<li>Artifact Id を入力。ここもデフォルトの <code>demo</code> のままにしておく</li>
<li>パッケージタイプを選択。 <code>Jar</code> と <code>War</code> がある。とりあえす <code>Jar</code> にしておこうか</li>
<li>Java のバージョンを選択。無難に LTS 版の 11 を選択しておくか(JDK のインストールは別途行うこと)</li>
<li>依存パッケージを選択。 Spring Web と Lombok は必須。あとは必要に応じて
<ul>
<li>Spring Web (必須)</li>
<li>Lombok (必須)</li>
<li>Spring Boot DevTools</li>
<li>Thymeleaf</li>
</ul>
</li>
</ol>
<figure style='margin:0 auto;text-align:center;'><a href="https://text.baldanders.info/choose-dependencies.png"><img src="./choose-dependencies.png" srcset="./choose-dependencies.png 630w" sizes="(min-width:600px) 500px, 80vw" alt="" loading="lazy"></a></figure>
<p>あとは作業ディレクトリを指定すれば完了。
作業ディレクトリ直下に Artifact Id で指定した名前でディレクトリが掘られ,ディレクトリ・ファイルが展開される。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ tree demo
</span></span><span class="line"><span class="cl">demo
</span></span><span class="line"><span class="cl">├── HELP.md
</span></span><span class="line"><span class="cl">├── mvnw
</span></span><span class="line"><span class="cl">├── mvnw.cmd
</span></span><span class="line"><span class="cl">├── pom.xml
</span></span><span class="line"><span class="cl">└── src
</span></span><span class="line"><span class="cl"> ├── main
</span></span><span class="line"><span class="cl"> │ ├── java
</span></span><span class="line"><span class="cl"> │ │ └── com
</span></span><span class="line"><span class="cl"> │ │ └── example
</span></span><span class="line"><span class="cl"> │ │ └── demo
</span></span><span class="line"><span class="cl"> │ │ └── DemoApplication.java
</span></span><span class="line"><span class="cl"> │ └── resources
</span></span><span class="line"><span class="cl"> │ ├── application.properties
</span></span><span class="line"><span class="cl"> │ ├── static
</span></span><span class="line"><span class="cl"> │ └── templates
</span></span><span class="line"><span class="cl"> └── test
</span></span><span class="line"><span class="cl"> └── java
</span></span><span class="line"><span class="cl"> └── com
</span></span><span class="line"><span class="cl"> └── example
</span></span><span class="line"><span class="cl"> └── demo
</span></span><span class="line"><span class="cl"> └── DemoApplicationTests.java
</span></span></code></pre></div><p><code>DemoApplication.java</code> の中身はこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-java" data-lang="java"><span class="line"><span class="cl"><span class="kn">package</span><span class="w"> </span><span class="nn">com.example.demo</span><span class="p">;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="kn">import</span><span class="w"> </span><span class="nn">org.springframework.boot.SpringApplication</span><span class="p">;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="kn">import</span><span class="w"> </span><span class="nn">org.springframework.boot.autoconfigure.SpringBootApplication</span><span class="p">;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nd">@SpringBootApplication</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="kd">public</span><span class="w"> </span><span class="kd">class</span> <span class="nc">DemoApplication</span><span class="w"> </span><span class="p">{</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="kd">public</span><span class="w"> </span><span class="kd">static</span><span class="w"> </span><span class="kt">void</span><span class="w"> </span><span class="nf">main</span><span class="p">(</span><span class="n">String</span><span class="o">[]</span><span class="w"> </span><span class="n">args</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="n">SpringApplication</span><span class="p">.</span><span class="na">run</span><span class="p">(</span><span class="n">DemoApplication</span><span class="p">.</span><span class="na">class</span><span class="p">,</span><span class="w"> </span><span class="n">args</span><span class="p">);</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="p">}</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">}</span><span class="w">
</span></span></span></code></pre></div><p>このままだと何も表示できないので controller クラスと対応するテンプレートファイルを用意する。</p>
<p>まずは <code>demo/src/main/java/com/example/demo/controller/DemoController.java</code> ファイルを作る。
中身はこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-java" data-lang="java"><span class="line"><span class="cl"><span class="kn">package</span><span class="w"> </span><span class="nn">com.example.demo.controller</span><span class="p">;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="kn">import</span><span class="w"> </span><span class="nn">org.springframework.stereotype.Controller</span><span class="p">;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="kn">import</span><span class="w"> </span><span class="nn">org.springframework.web.bind.annotation.GetMapping</span><span class="p">;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nd">@Controller</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="kd">public</span><span class="w"> </span><span class="kd">class</span> <span class="nc">DemoController</span><span class="w"> </span><span class="p">{</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nd">@GetMapping</span><span class="p">(</span><span class="s">"/"</span><span class="p">)</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="kd">public</span><span class="w"> </span><span class="n">String</span><span class="w"> </span><span class="nf">demo</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="s">"demo"</span><span class="p">;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="p">}</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="p">}</span><span class="w">
</span></span></span></code></pre></div><p>次に <code>demo/src/main/resources/templates/demo.html</code> ファイルを作る。
中身はこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp"><!DOCTYPE html></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Demo<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello World!<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>全体の構成はこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ tree demo
</span></span><span class="line"><span class="cl">demo
</span></span><span class="line"><span class="cl">├── HELP.md
</span></span><span class="line"><span class="cl">├── mvnw
</span></span><span class="line"><span class="cl">├── mvnw.cmd
</span></span><span class="line"><span class="cl">├── pom.xml
</span></span><span class="line"><span class="cl">└── src
</span></span><span class="line"><span class="cl"> ├── main
</span></span><span class="line"><span class="cl"> │ ├── java
</span></span><span class="line"><span class="cl"> │ │ └── com
</span></span><span class="line"><span class="cl"> │ │ └── example
</span></span><span class="line"><span class="cl"> │ │ └── demo
</span></span><span class="line"><span class="cl"> │ │ ├── DemoApplication.java
</span></span><span class="line"><span class="cl"> │ │ └── controller
</span></span><span class="line"><span class="cl"> │ │ └── DemoController.java
</span></span><span class="line"><span class="cl"> │ └── resources
</span></span><span class="line"><span class="cl"> │ ├── application.properties
</span></span><span class="line"><span class="cl"> │ ├── static
</span></span><span class="line"><span class="cl"> │ └── templates
</span></span><span class="line"><span class="cl"> │ └── demo.html
</span></span><span class="line"><span class="cl"> └── test
</span></span><span class="line"><span class="cl"> └── java
</span></span><span class="line"><span class="cl"> └── com
</span></span><span class="line"><span class="cl"> └── example
</span></span><span class="line"><span class="cl"> └── demo
</span></span><span class="line"><span class="cl"> └── DemoApplicationTests.java
</span></span></code></pre></div><p>テストとか端折ってるけどご容赦ね。</p>
<p>あとは Spring Boot Dashboard から Start すれば OK。</p>
<figure style='margin:0 auto;text-align:center;'><a href="https://text.baldanders.info/dashboard.png"><img src="./dashboard.png" srcset="./dashboard.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="" loading="lazy"></a></figure>
<p>Web ブラウザから <code>http://localhost:8080/</code> を叩いて <code>Hello, World!</code> と表示されれば無問題。</p>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=GabrielBB.vscode-lombok" title="Lombok Annotations Support for VS Code - Visual Studio Marketplace">Lombok Annotations Support for VS Code</a></h2>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension GabrielBB.vscode-lombok
</span></span></code></pre></div><p><code>@Getter</code> とか <code>@Setter</code> とか <code>@Slf4j</code> とかの <a href="https://projectlombok.org/" title="Project Lombok">Lombok</a> アノテーションを付けると <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> がコードにエラーマークを付けることがある(ビルドはちゃんと通る)。
かなりウザいのでこの拡張機能を入れてみた。
快適!</p>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice" title="Azure App Service - Visual Studio Marketplace">Azure App Service</a></h2>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension ms-azuretools.vscode-azureappservice
</span></span></code></pre></div><p>VS code 上から <a href="https://azure.microsoft.com/ja-jp/services/app-service/web/" title="Web App Service | Microsoft Azure">Azure Web Apps</a> にお手軽にデプロイ出来ないかなぁ,と思って探したらありました。
やり方は以下のページの後半で紹介している。</p>
<ul>
<li><a href="https://code.visualstudio.com/docs/java/java-webapp">Build and Deploy Java Web Apps to the cloud with Visual Studio Code</a></li>
</ul>
<p>めがっさ簡単だった。
<a href="https://docs.microsoft.com/ja-jp/azure/app-service/deploy-github-actions" title="GitHub アクションを使用して CI/CD を構成する - Azure App Service | Microsoft Docs">GitHub Actions を使う</a>方法とか,何なら <a href="https://azure.microsoft.com/ja-jp/services/spring-cloud/" title="Azure Spring Cloud – Spring Boot アプリの開発 | Microsoft Azure">Azure Spring Cloud</a> を契約する手もあるのだが,今回はとにかく JAR か WAR を投げれればよかったので。</p>
<h2>ブックマーク</h2>
<ul>
<li><a href="https://qiita.com/takumi_links/items/fe71cfeb4dfaa76fbe31">VSCodeで作るJava開発環境&Spring Bootアプリケーション入門 - Qiita</a></li>
<li><a href="https://spring.pleiades.io/spring-boot/docs/current/reference/html/deployment.html">Spring Boot アプリケーションのデプロイ - リファレンス</a></li>
<li><a href="https://qiita.com/koukibuu3/items/77734596483ffd788931">SpringBootをVSCodeで使ってみる - Qiita</a></li>
<li><a href="https://kohei.life/spring-boot-build-deploy/">【Maven編】Spring Bootのビルドとデプロイ方法 | こへいブログ</a></li>
<li><a href="https://ameblo.jp/kazusa-g/entry-12536838291.html">VSCodeとDockerでSpring Boot + PostgreSQL開発環境を作る(2) | Sales8開発者日記</a></li>
<li><a href="https://learning-collection.com/springboot-%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3%e7%94%bb%e9%9d%a2%e4%bd%9c%e6%88%90/">SpringBoot ログイン画面作成</a></li>
<li><a href="https://qiita.com/t-shin0hara/items/eaf44e4f48341616ab97">Spring Boot + Spring Data JPA ~サンプルアプリ実装~ - Qiita</a></li>
<li><a href="http://itref.fc2web.com/java/jpa/annotation.html">JPA (Java Persistence API)のアノテーション</a></li>
<li><a href="https://qiita.com/NagaokaKenichi/items/c6d1b76090ef5ef39482">Thymeleafチートシート - Qiita</a></li>
<li><a href="https://one-it-thing.com/2074/">SpringBootアプリにBootstrap4を追加(WebJars使用) – One IT Thing</a></li>
<li><a href="https://www.codeflow.site/ja/article/spring-boot__spring-boot-slf4j-logging-example">SpringブートSLF4Jロギングの例</a></li>
<li><a href="https://ja.getdocs.org/spring-boot-spring-boot-slf4j-logging-example/">SpringブートSLF4Jロギングの例 - 開発者ドキュメント</a></li>
<li><a href="https://m-shige1979.hatenablog.com/entry/2016/11/30/080000">Spring bootでHttpSessionを使用する - m_shige1979のささやかな抵抗と欲望の日々</a></li>
<li><a href="https://qiita.com/t-yama-3/items/572fabc873b4b6a0fc7c">Spring Boot で Ajax を実装する単純なサンプル - Qiita</a></li>
<li><a href="https://qiita.com/opengl-8080/items/671ffd4bf84fe5e32557">Lombok 使い方メモ - Qiita</a></li>
<li><a href="https://bitto.jp/posts/%E6%8A%80%E8%A1%93/Windows/vscode-java-organize-import/">VScodeでJavaのインポート文をFixしたい | 猫好きが猫以外のことも書く</a></li>
<li><a href="https://code.visualstudio.com/docs/java/java-on-azure">Deploy Java to Azure</a></li>
</ul>
<h2>参考図書</h2>
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/B0893LQ5KY?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/51VWsWP87dL._SL160_.jpg" width="100" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/B0893LQ5KY?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">Spring Boot 2 入門: 基礎から実演まで</a></dt>
<dd>原田 けいと (著), 竹田 甘地 (著), Robert Segawa (著)</dd>
<dd> 2020-05-22 (Release 2020-05-22)</dd>
<dd>Kindle版</dd>
<dd>B0893LQ5KY (ASIN)</dd>
<dd>評価<abbr class="rating fa-sm" title="4"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i></abbr></dd>
</dl>
<p class="description">Spring Boot を勉強することになって急遽買った本。めっさ分かりやすかった。 PDF 版が欲しいくらい(笑) Spring Boot 3.2 対応にアップデートされていた。素敵!</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2024-03-20">2024-03-20</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- Spring Boot 2 入門 -->
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/4621303252?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/41WZElZb9eL._SL160_.jpg" width="128" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/4621303252?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">Effective Java 第3版</a></dt>
<dd>Joshua Bloch (著), 柴田 芳樹 (翻訳)</dd>
<dd>丸善出版 2018-10-30</dd>
<dd>単行本(ソフトカバー)</dd>
<dd>4621303252 (ASIN), 9784621303252 (EAN), 4621303252 (ISBN)</dd>
<dd>評価<abbr class="rating fa-sm" title="4"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i></abbr></dd>
</dl>
<p class="description">再勉強中。 Kindle 版のほうがちょっと安いが,勤務先でも使いたかったので紙の本にした。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2021-03-17">2021-03-17</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- Effective Java 第3版 -->
Markdown と VS Code
tag:text.Baldanders.info,2021-02-28:/remark/2021/02/markdown-with-vscode/
2021-02-28T03:45:02+00:00
2022-04-23T13:45:31+00:00
Preview 機能は個人的に必要ないのでレビューしないが,仕事で使うようなことがあれば,そのうち記事にすることもあるだろう。
Spiegel
https://baldanders.info/profile/
<ol>
<li><a href="https://text.baldanders.info/remark/2021/02/installing-vscode-again/">パソコンに Visual Studio Code を導入する(再チャレンジ)</a></li>
<li><a href="https://text.baldanders.info/remark/2021/02/golang-with-vscode/">Go と VS Code</a></li>
<li><a href="https://text.baldanders.info/remark/2021/02/markdown-with-vscode/">Markdown と VS Code</a> ← イマココ</li>
<li><a href="https://text.baldanders.info/remark/2021/08/java-with-vscode/">Java と VS Code</a></li>
<li><a href="https://text.baldanders.info/remark/2022/04/codespaces/">やっと Codespaces が使える</a></li>
</ol>
<p>今回は <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> で markdown テキストを入出力する話。</p>
<h2><a href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one" title="Markdown All in One - Visual Studio Marketplace">Markdown All in One</a></h2>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension yzhang.markdown-all-in-one
</span></span></code></pre></div><p>Markdown 関連の拡張機能は色々あるようだが,入力支援に関してはこれで必要十分ぽい。</p>
<p>お気に入りはテーブル整形の機能で, Linux/Ubuntu なら <code>[Ctrl+Shift+I]</code> キー(Format Document)押下で綺麗に整形してくれる。</p>
<p>ところが Windows 版では <code>[Shift+Alt+F]</code> キーが Format Document に割り当てられているようだ。
プラットフォームによって違うのかよ。</p>
<p>というわけで Windows 版の方にキー割当を合わせることにした。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="c1">// Place your key bindings in this file to override the defaults
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"key"</span><span class="p">:</span> <span class="s2">"shift+alt+f"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"command"</span><span class="p">:</span> <span class="s2">"editor.action.formatDocument"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"when"</span><span class="p">:</span> <span class="s2">"editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly && !inCompositeEditor"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"key"</span><span class="p">:</span> <span class="s2">"ctrl+shift+i"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"command"</span><span class="p">:</span> <span class="s2">"-editor.action.formatDocument"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"when"</span><span class="p">:</span> <span class="s2">"editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly && !inCompositeEditor"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"key"</span><span class="p">:</span> <span class="s2">"shift+alt+f"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"command"</span><span class="p">:</span> <span class="s2">"editor.action.formatDocument.none"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"when"</span><span class="p">:</span> <span class="s2">"editorTextFocus && !editorHasDocumentFormattingProvider && !editorReadonly"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"key"</span><span class="p">:</span> <span class="s2">"ctrl+shift+i"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"command"</span><span class="p">:</span> <span class="s2">"-editor.action.formatDocument.none"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"when"</span><span class="p">:</span> <span class="s2">"editorTextFocus && !editorHasDocumentFormattingProvider && !editorReadonly"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">]</span>
</span></span></code></pre></div><h2><a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" title="Prettier - Code formatter - Visual Studio Marketplace">Prettier - Code formatter</a> との競合</h2>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension esbenp.prettier-vscode
</span></span></code></pre></div><p>Markdown 専用というわけではないが JavaScript/TypeScript, CSS/SCSS/Less, HTML, JSON, GraphQL, YAML など幅広い言語に対応している整形ツールで,しかも plugin 拡張もできるらしい。
もちろん markdown テキストにも対応している。</p>
<p>で,これと <a href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one" title="Markdown All in One - Visual Studio Marketplace">Markdown All in One</a> の整形機能(Format Document)が被るわけですよ。
そこで,どちらの機能を使うか言語ごとに設定できるようになっている。
私は <a href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one" title="Markdown All in One - Visual Studio Marketplace">Markdown All in One</a> 優先でこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"[markdown]"</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"editor.defaultFormatter"</span><span class="p">:</span> <span class="s2">"yzhang.markdown-all-in-one"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>さらにファイル保存時に変更した箇所だけを整形する,なんてな設定も言語ごとにできるようだ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"[markdown]"</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"editor.defaultFormatter"</span><span class="p">:</span> <span class="s2">"yzhang.markdown-all-in-one"</span><span class="p">,</span>
</span></span><span class="line hl"><span class="cl"> <span class="nt">"editor.formatOnSave"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line hl"><span class="cl"> <span class="nt">"editor.formatOnSaveMode"</span><span class="p">:</span> <span class="s2">"modifications"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>ちなみに <a href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig" title="EditorConfig for VS Code - Visual Studio Marketplace">EditorConfig for VS Code</a> が有効な場合は <code>.editorconfig</code> の設定(インデントや改行コードなど)を考慮してくれるようだ。
これを無効にするには “Use Editor Config” の項目を OFF にする。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"prettier.useEditorConfig"</span><span class="p">:</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>ただし, <a href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig" title="EditorConfig for VS Code - Visual Studio Marketplace">EditorConfig</a> が有効な場合でも <code>.prettierrc</code> ファイルなどによる <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" title="Prettier - Code formatter - Visual Studio Marketplace">Prettier</a> 独自の設定がある場合は,そちらのほうが優先されるようだ。
ややこしい…</p>
<h2>自動補完を有効にする</h2>
<p><a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> の売りのひとつはスニペットを含む強力な自動補完機能だが,何故か markdown ファイルには自動補完が効かない。
と思ったら,既定で無効になっているらしい。
いや,有効にしとけよ。</p>
<p>というわけで <code>settings.json</code> に以下の設定を手動で書き込む。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"[markdown]"</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"editor.quickSuggestions"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"editor.snippetSuggestions"</span><span class="p">:</span> <span class="s2">"top"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>これでスニペットを優先して自動補完候補に挙げてくれる。</p>
<h2>Markdown Preview 機能は必要か</h2>
<p>私個人で言うなら No で,仕事なら場合によっては Yes かな。</p>
<p>そもそも markdown テキストってのは,見出しや段落や箇条書き等の文書構造がそのままでも human-readable である点が利点と言える。
さらに言えば,ここのブログは <a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> の shortcodes 等で入力自体をカスタマイズしまくってるので,ただの markdown preview なんか使いものにならないのだ(<a href="https://gohugo.io/" title="The world’s fastest framework for building websites | Hugo">Hugo</a> はサーバ・モードで起動できるので,リアルタイムでブラウザ表示を確認しながら記事を書いている)。</p>
<p>一方で, Office ツールなどレガシーな環境を捨てて markdown 等の構造化テキストをベースにしたドキュメンテーションをしようとするなら,それなりにリッチな markdown preview 機能と PDF 等へ「最終出力」するためのツールチェーンが必要となる。</p>
<p>そのための手段(または道具立て)として <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> をベースに環境を整えるというのは合理的と言えるかもしれない。</p>
<p>というわけで,以降では PDF 等への「最終出力」を念頭に置いたドキュメントツールとして幾つかの拡張機能を紹介してみる。
上述したように,私個人は全く必要ないのでレビューしないが,仕事で使うようなことがあれば,そのうち記事にすることもあるだろう。</p>
<h3><a href="https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced" title="Markdown Preview Enhanced - Visual Studio Marketplace">Markdown Preview Enhanced</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension shd101wyy.markdown-preview-enhanced
</span></span></code></pre></div><p>TeX の数学記法あるいは <a href="http://plantuml.com/" title="Open-source tool that uses simple textual descriptions to draw UML diagrams.">PlantUML</a> や <a href="https://mermaidjs.github.io/">mermaid</a> 等の記法も認識して preview 表示できるらしい。
<a href="https://graphviz.gitlab.io/_pages/doc/info/lang.html" title="The DOT Language">DOT</a> 言語も使えるのか。
CSS をカスタマイズ可能。</p>
<p>HTML や PDF へ出力できるようだ(PDF 出力は Chrome 経由)。</p>
<h3><a href="https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf" title="Markdown PDF - Visual Studio Marketplace">Markdown PDF</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension yzane.markdown-pdf
</span></span></code></pre></div><p>コマンド一発で PDF 変換してくれる。
簡易的な出力しか出来ないのかと思ったら,意外にもかなりカスタマイズできるらしい。</p>
<ul>
<li><a href="https://qiita.com/reona396/items/40b234108f7664267db8">VSCode と Markdown で技術同人誌書いたので拡張機能とかまとめ - Qiita</a></li>
<li><a href="https://h-s-hige.hateblo.jp/entry/20190405/1554467885">【Visual Studio Code】Markdown PDF のスタイル(CSS)を変える方法 - Nekonote</a></li>
</ul>
<h3><a href="https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode" title="Marp for VS Code - Visual Studio Marketplace">Marp for VS Code</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension marp-team.marp-vscode
</span></span></code></pre></div><p><a href="https://marp.app/" title="Marp: Markdown Presentation Ecosystem">Marp</a> を使って markdown テキストからスライドを生成する。
PDF へエクスポートできるらしい。</p>
<ul>
<li><a href="https://qiita.com/tomo_makes/items/aafae4021986553ae1d8">【VS Code + Marp】Markdown から爆速・自由自在なデザインで、プレゼンスライドを作る - Qiita</a></li>
</ul>
<h3><a href="https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio" title="Draw.io Integration - Visual Studio Marketplace">Draw.io Integration</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension hediet.vscode-drawio
</span></span></code></pre></div><p><a href="https://app.diagrams.net/">Draw.io (diagrams.net)</a> を利用した作図ツール。
データはテキストで保持して PNG や SVG へエクスポート可能って感じなのかな。</p>
<ul>
<li><a href="https://qiita.com/riku-shiru/items/5ab7c5aecdfea323ec4e">VSCode で Draw.io が使えるようになったらしい! - Qiita</a></li>
</ul>
<h3><a href="https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml" title="PlantUML - Visual Studio Marketplace">PlantUML</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension jebbs.plantuml
</span></span></code></pre></div><p><a href="http://plantuml.com/" title="Open-source tool that uses simple textual descriptions to draw UML diagrams.">PlantUML</a> 作図・出力支援。
あらかじめ <a href="http://plantuml.com/" title="Open-source tool that uses simple textual descriptions to draw UML diagrams.">PlantUML</a> 作図環境を用意する必要がある(ただし <code>plantuml.jar</code> ファイルは拡張機能内にあらかじめ格納されている?)。</p>
<ul>
<li><a href="https://text.baldanders.info/remark/2018/12/plantuml-1/">真面目に PlantUML (1) : PlantUML のインストール</a></li>
</ul>
<h2>ブックマーク</h2>
<ul>
<li><a href="https://zenn.dev/karaage0703/books/80b6999d429abc8051bb">VS Code エディタ入門</a></li>
<li><a href="https://qiita.com/tfukumori/items/0f2b52088cd39f5c124e">(2020 年 12 月 8 日追記)VSCode で Draw.io Integration 使用時にエクスポートできないことがある問題への対処 - Qiita</a></li>
<li><a href="https://coffee-nominagara.com/2019-01-25-094628">Visual Studio Code で markdown のスニペットを登録する | コーヒー飲みながら仕事したい</a></li>
<li><a href="https://zenn.dev/spiegel/articles/20200922-editorconfig">インデントおよび行末は EditorConfig で始末する</a></li>
</ul>
<h2>参考図書</h2>
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/B08CZ2C3NZ?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/51LziyyXRmL._SL160_.jpg" width="113" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/B08CZ2C3NZ?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">Software Design (ソフトウェアデザイン) 2020年8月号 [雑誌]</a></dt>
<dd>Software Design 編集部 (編集)</dd>
<dd>技術評論社 2020-07-18 (Release 2020-07-18)</dd>
<dd>Kindle版</dd>
<dd>B08CZ2C3NZ (ASIN)</dd>
</dl>
<p class="description">特集記事は「Vim vs. Visual Studio Code」</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2021-02-28">2021-02-28</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- Software Design (2020年8月号) -->
Go と VS Code
tag:text.Baldanders.info,2021-02-27:/remark/2021/02/golang-with-vscode/
2021-02-27T09:47:11+00:00
2022-04-23T13:45:31+00:00
ぶっちゃけ ATOM の go-plus よりも出来がいいので,ゆるゆると移行していきますよっと。
Spiegel
https://baldanders.info/profile/
<p>どっちのセクションで書こう悩んだが,所詮ツールの話だし,こっち側で。</p>
<ol>
<li><a href="https://text.baldanders.info/remark/2021/02/installing-vscode-again/">パソコンに Visual Studio Code を導入する(再チャレンジ)</a></li>
<li><a href="https://text.baldanders.info/remark/2021/02/golang-with-vscode/">Go と VS Code</a> ← イマココ</li>
<li><a href="https://text.baldanders.info/remark/2021/02/markdown-with-vscode/">Markdown と VS Code</a></li>
<li><a href="https://text.baldanders.info/remark/2021/08/java-with-vscode/">Java と VS Code</a></li>
<li><a href="https://text.baldanders.info/remark/2022/04/codespaces/">やっと Codespaces が使える</a></li>
</ol>
<p>それでは<a href="https://text.baldanders.info/remark/2021/02/installing-vscode-again/" title="パソコンに Visual Studio Code を導入する(再チャレンジ)">前回</a>の続き。
<a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> に <a href="https://go.dev/">Go 言語</a>開発支援環境を入れる。
といっても一択だけどね。</p>
<ul>
<li><a href="https://marketplace.visualstudio.com/items?itemName=golang.go">Go - Visual Studio Marketplace</a></li>
</ul>
<p>インストールはこちら。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension golang.go
</span></span></code></pre></div><p>一応 Google が公式に参加している拡張機能らしい。</p>
<ul>
<li><a href="https://blog.golang.org/vscode-go">The VS Code Go extension joins the Go project - The Go Blog</a></li>
<li><a href="https://code.visualstudio.com/blogs/2020/06/09/go-extension">Visual Studio Code Go extension joins the Go project</a></li>
</ul>
<p>しかも最近,こちらも事実上のオフィシャルである <a href="https://pkg.go.dev/golang.org/x/tools/gopls" title="gopls · pkg.go.dev">gopls</a> が,この拡張機能の既定の <a href="https://langserver.org/" title="Langserver.org">language server</a> となったようだ。</p>
<ul>
<li><a href="https://blog.golang.org/gopls-vscode-go">Gopls on by default in the VS Code Go extension - The Go Blog</a></li>
</ul>
<p>個人的にひとつだけ気に入らないところがあって,既定の設定のままではプロジェクト・フォルダを開いたときにトップに <code>go.mod</code> ファイルがないと上手く動かないみたいなんだよね(<a href="https://zenn.dev/spiegel/articles/20210223-go-module-aware-mode" title="Go のモジュール管理【バージョン 1.16 改訂版】">モジュール対応モード</a>の場合)。</p>
<p>最初は拡張機能側の問題かと思っていたが,どうも <a href="https://pkg.go.dev/golang.org/x/tools/gopls" title="gopls · pkg.go.dev">gopls</a> の制限らしい。</p>
<ul>
<li><a href="https://github.com/golang/tools/blob/master/gopls/doc/workspace.md">tools/workspace.md at master · golang/tools · GitHub</a></li>
</ul>
<p>一応の回避策はあって <code>settings.json</code> に以下の<a href="https://github.com/golang/tools/blob/master/gopls/doc/settings.md#experimentalworkspacemodule-bool">オプションを設定</a>することでトップ以外の複数の <code>go.mod</code> ファイルに対応できるようだ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"gopls"</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"build.experimentalWorkspaceModule"</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>ただし <code>go.mod</code> ファイルで定義したモジュール名は開いたプロジェクト・フォルダ内で一意でなければならない。
名前が被ってるとめっさ怒られる。</p>
<p>まぁ,理屈は分からんでもないが,私の場合,ブログなどのドキュメント環境でサンプルコードを書き散らしていて,それらのモジュール名が大抵 “<code>sample</code>” だったりするので被りまくりなんだよなぁ sigh…</p>
<p>ちなみに,この <a href="https://github.com/golang/tools/blob/master/gopls/doc/settings.md#experimentalworkspacemodule-bool"><code>experimentalWorkspaceModule</code> オプション</a>は一時的な措置なので将来的にはなくなるようだ。
それまでには何とかするということだろう。</p>
<p>それ以外の部分ではぶっちゃけ <a href="https://atom.io/">ATOM</a> の <a href="https://atom.io/packages/go-plus">go-plus</a> よりも出来がいいので,ゆるゆると移行していきますよっと。</p>
<p>現時点での <code>settings.json</code> の内容はこんな感じ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"><span class="nt">"go.buildOnSave"</span><span class="p">:</span> <span class="s2">"off"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"go.autocompleteUnimportedPackages"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"go.formatTool"</span><span class="p">:</span> <span class="s2">"goimports"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"go.lintTool"</span><span class="p">:</span> <span class="s2">"golangci-lint"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"go.gotoSymbol.includeGoroot"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"go.testOnSave"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"go.coverageOptions"</span><span class="p">:</span> <span class="s2">"showUncoveredCodeOnly"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"go.coverOnSave"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"go.coverOnSingleTestFile"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"go.coverageDecorator"</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"type"</span><span class="p">:</span> <span class="s2">"gutter"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"gopls"</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"build.experimentalWorkspaceModule"</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><h2>【2021-03-02 追記】</h2>
<p>書き忘れていたが,コマンドパレットから</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">>Go: Install/Update Tools
</span></span></code></pre></div><p>と入力すると関連ツールのインストールおよびアップデートができる。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./update-tools.png"><img src="./update-tools.png" srcset="./update-tools.png 612w" sizes="(min-width:600px) 500px, 80vw" alt="Go: Install/Update Tools" loading="lazy"></a><figcaption><div><a href="./update-tools.png">Go: Install/Update Tools</a></div></figcaption>
</figure>
<p>これを実行すると</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">Tools environment: GOPATH=/home/username/go
</span></span><span class="line"><span class="cl">Installing 9 tools at /home/username/go/bin in module mode.
</span></span><span class="line"><span class="cl"> gopkgs
</span></span><span class="line"><span class="cl"> go-outline
</span></span><span class="line"><span class="cl"> gotests
</span></span><span class="line"><span class="cl"> gomodifytags
</span></span><span class="line"><span class="cl"> impl
</span></span><span class="line"><span class="cl"> goplay
</span></span><span class="line"><span class="cl"> dlv
</span></span><span class="line"><span class="cl"> golangci-lint
</span></span><span class="line"><span class="cl"> gopls
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Installing github.com/uudashr/gopkgs/v2/cmd/gopkgs (/home/username/go/bin/gopkgs) SUCCEEDED
</span></span><span class="line"><span class="cl">Installing github.com/ramya-rao-a/go-outline (/home/username/go/bin/go-outline) SUCCEEDED
</span></span><span class="line"><span class="cl">Installing github.com/cweill/gotests/... (/home/username/go/bin/gotests) SUCCEEDED
</span></span><span class="line"><span class="cl">Installing github.com/fatih/gomodifytags (/home/username/go/bin/gomodifytags) SUCCEEDED
</span></span><span class="line"><span class="cl">Installing github.com/josharian/impl (/home/username/go/bin/impl) SUCCEEDED
</span></span><span class="line"><span class="cl">Installing github.com/haya14busa/goplay/cmd/goplay (/home/username/go/bin/goplay) SUCCEEDED
</span></span><span class="line"><span class="cl">Installing github.com/go-delve/delve/cmd/dlv (/home/username/go/bin/dlv) SUCCEEDED
</span></span><span class="line"><span class="cl">Installing github.com/golangci/golangci-lint/cmd/golangci-lint (/home/username/go/bin/golangci-lint) SUCCEEDED
</span></span><span class="line"><span class="cl">Installing golang.org/x/tools/gopls (/home/username/go/bin/gopls) SUCCEEDED
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">All tools successfully installed. You are ready to Go :).
</span></span></code></pre></div><p>てな感じで <code>go install</code> してくれるようだ。
自動でアップデートしてくれるといいのだが…</p>
<h2>参考図書</h2>
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/B08CZ2C3NZ?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/51LziyyXRmL._SL160_.jpg" width="113" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/B08CZ2C3NZ?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">Software Design (ソフトウェアデザイン) 2020年8月号 [雑誌]</a></dt>
<dd>Software Design 編集部 (編集)</dd>
<dd>技術評論社 2020-07-18 (Release 2020-07-18)</dd>
<dd>Kindle版</dd>
<dd>B08CZ2C3NZ (ASIN)</dd>
</dl>
<p class="description">特集記事は「Vim vs. Visual Studio Code」</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2021-02-28">2021-02-28</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- Software Design (2020年8月号) -->
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/B099928SJD?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/416Stewy0NS._SL160_.jpg" width="123" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/B099928SJD?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">プログラミング言語Go</a></dt>
<dd>アラン・ドノバン (著), ブライアン・カーニハン (著), 柴田芳樹 (著)</dd>
<dd>丸善出版 2016-06-20 (Release 2021-07-13)</dd>
<dd>Kindle版</dd>
<dd>B099928SJD (ASIN)</dd>
<dd>評価<abbr class="rating fa-sm" title="5"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i></abbr></dd>
</dl>
<p class="description">Kindle 版出た! 一部内容が古びてしまったが,この本は Go 言語の教科書と言ってもいいだろう。感想は<a href="https://text.baldanders.info/remark/2016/07/go-programming-language/" >こちら</a>。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2021-05-22">2021-05-22</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- プログラミング言語Go -->
パソコンに Visual Studio Code を導入する(再チャレンジ)
tag:text.Baldanders.info,2021-02-27:/remark/2021/02/installing-vscode-again/
2021-02-27T05:23:23+00:00
2024-01-18T23:11:26+00:00
まずはインストールと初期設定
Spiegel
https://baldanders.info/profile/
<p>今の職場では当然のように Windows 10 機を支給されていてテキスト・エディタ等の普段使いのツールであれば割と自由に使わせてくれるのはいいのだが,6 年ほど使い込んで手に馴染んでる筈の <a href="https://atom.io/">ATOM</a> が使えなくてねぇ。
理由は大きく 2 つ。</p>
<ol>
<li>起動が遅すぎる(もともと遅いが堪えられないほど遅い)</li>
<li><a href="https://go.dev/">Go</a> 言語開発支援の <a href="https://atom.io/packages/go-plus">go-plus</a> が実質的に動かない</li>
</ol>
<p>特に 2 番目が致命的。
私の観測範囲が狭いせいか,この手の話をほとんど聞かないのだが Windows で <a href="https://atom.io/">ATOM</a> で <a href="https://go.dev/">Go</a> で開発をしてる人はいないってことなのかねぇ。</p>
<p>さらに言うと <a href="https://atom.io/">ATOM</a> を開発している GitHub が <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> を開発している Microsoft に買収され,オフィシャルの Go Language Server である <a href="https://pkg.go.dev/golang.org/x/tools/gopls" title="gopls · pkg.go.dev">gopls</a> が,これまた <a href="https://marketplace.visualstudio.com/items?itemName=golang.go" title="Go - Visual Studio Marketplace">Google オフィシャルの VS Code 用拡張機能</a>の<a href="https://blog.golang.org/gopls-vscode-go" title="Gopls on by default in the VS Code Go extension - The Go Blog">既定の Language Server になった</a>というのも大きい。
<a href="https://atom.io/">ATOM</a> の <a href="https://atom.io/packages/go-plus">go-plus</a> なんて今だに gocode 使ってるんだぜ。
完全に廃れているよなぁ <code>orz</code></p>
<p>というわけで,観念して <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> を導入することにした。</p>
<p>実は昨年 5 月に自宅の <a href="https://text.baldanders.info/remark/2020/05/installing-vscode-in-ubuntu/" title="Ubuntu に Visual Studio Code を導入する">Ubuntu 機に VS Code を入れた</a>んだけど,結局挫折して削除しちゃったんだよねぇ。
今回は職場の Windows 機で先行して導入している。
なので Windows 機と <a href="https://www.ubuntu.com/" title="The leading operating system for PCs, IoT devices, servers and the cloud | Ubuntu">Ubuntu</a> 機を比較しながら,何回かに分けて記事を書いていく予定である。</p>
<ol>
<li><a href="https://text.baldanders.info/remark/2021/02/installing-vscode-again/">パソコンに Visual Studio Code を導入する(再チャレンジ)</a> ← イマココ</li>
<li><a href="https://text.baldanders.info/remark/2021/02/golang-with-vscode/">Go と VS Code</a></li>
<li><a href="https://text.baldanders.info/remark/2021/02/markdown-with-vscode/">Markdown と VS Code</a></li>
<li><a href="https://text.baldanders.info/remark/2021/08/java-with-vscode/">Java と VS Code</a></li>
<li><a href="https://text.baldanders.info/remark/2022/04/codespaces/">やっと Codespaces が使える</a></li>
</ol>
<h2><a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> のインストール</h2>
<p>Windows 版のインストールは<a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">サイト</a>からインストーラをダウンロードすればよい。</p>
<p>問題は <a href="https://www.ubuntu.com/" title="The leading operating system for PCs, IoT devices, servers and the cloud | Ubuntu">Ubuntu</a> だが Snap 版と APT 版がある。
昨年の話だが Snap 版を入れたら日本語入力が壊滅してたので,今回も選択肢には入れない。</p>
<p>APT 版は Microsoft がリポジトリを公開しているので,これを設定してインストールする。</p>
<figure lang="en">
<blockquote class="nobox"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">sudo apt-get install wget gpg
</span></span><span class="line"><span class="cl">wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
</span></span><span class="line"><span class="cl">sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg
</span></span><span class="line"><span class="cl">sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
</span></span><span class="line"><span class="cl">rm -f packages.microsoft.gpg
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">sudo apt install apt-transport-https
</span></span><span class="line"><span class="cl">sudo apt update
</span></span><span class="line"><span class="cl">sudo apt install code # or code-insiders
</span></span></code></pre></div></blockquote>
<figcaption><div>via <q><a href="https://code.visualstudio.com/docs/setup/linux">Running Visual Studio Code on Linux</a></q></div></figcaption>
</figure>
<p>起動は Shell やコマンド・プロンプト等でファイル名またはディレクトリ名を指定して</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code .
</span></span></code></pre></div><p>とすれば起動する<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。
Windows 版の <a href="https://atom.io/">ATOM</a> はコマンド・プロンプトから任意の場所を開けなくて往生したんだよなぁ。</p>
<p><a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> 本体以外の各種ファイルは以下のディレクトリに格納される。</p>
<ul>
<li>Windows 版
<ul>
<li><code>%USERPROFILE%\.vscode\</code></li>
<li><code>%APPDATA%\Code\</code></li>
</ul>
</li>
<li><a href="https://www.ubuntu.com/" title="The leading operating system for PCs, IoT devices, servers and the cloud | Ubuntu">Ubuntu</a> 版
<ul>
<li><code>$HOME/.vscode/</code></li>
<li><code>$HOME/.config/Code/</code></li>
</ul>
</li>
</ul>
<p><code>settings.json</code> や <code>keybindings.json</code> といった設定ファイルやスニペットを格納する <code>snippets/</code> ディレクトリは <code>Code/User/</code> ディレクトリ直下にあるので,必要に応じてバックアップを取るのがいいだろう。</p>
<p>ぶっちゃけ日本語化は不要。
つか,コマンドパレットや検索フィルタを常用するなら下手に日本語化しても混乱するだけだろう。</p>
<h2>テレメトリの無効化</h2>
<p>これは任意だが,ベンダ・メーカによるテレメトリを嫌うなら,最初の起動時に無効化の設定をしておく。
具体的には設定画面(<code>[Ctrl+,]</code> 押下で起動)で <code>telemetry</code> を入力し,出てきた項目のチェックを外す。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./telemetry.png"><img src="./telemetry.png" srcset="./telemetry.png 1044w" sizes="(min-width:600px) 500px, 80vw" alt="telemetry" loading="lazy"></a><figcaption><div><a href="./telemetry.png">telemetry</a></div></figcaption>
</figure>
<p>テレメトリを無効化すると <code>settings.json</code> に以下の内容が書き込まれる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"telemetry.enableCrashReporter"</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"telemetry.enableTelemetry"</span><span class="p">:</span> <span class="kc">false</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p><a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> の設定画面は拡張機能も含めて全てフラットに表示してしまうので,検索フィルタで絞り込まないとめちゃめちゃ使い辛い。
慣れるまでは設定画面で操作しながら <code>settings.json</code> の内容を確認していく(必要に応じてバックアップ)のがいいだろう。</p>
<p>こういのが面倒くさいんだよなぁ, <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> って。</p>
<h2>キー設定</h2>
<p>まずはキー設定を確認しておく。
キー割当の公式情報が PDF で公開されているので,参考にするとよいだろう。</p>
<ul>
<li><span><a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf">Keyboard Shortcuts for Windows <sup><i class="far fa-file-pdf"></i></sup></a></span></li>
<li><span><a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf">Keyboard Shortcuts for Linux <sup><i class="far fa-file-pdf"></i></sup></a></span></li>
</ul>
<p>拡張機能に「◯◯ エディタ風」とかまとめて設定できるものもあるが,歳をとるとそういうカスタマイズは面倒になってくる<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>。
今回はできるだけキー割当を変えないで Linux 版と Windows 版で挙動が異なるもののみに注目してチューニングしていく。</p>
<p>なお,キー割当は “Keyboard Shortcuts” 画面で変更するのが無難で安全である。
<code>settings.json</code> と同じく,慣れるまでは <code>keybindings.json</code> の内容を確認しながら必要に応じてバックアップをとるのがいいだろう。</p>
<h3>コマンドパレット等</h3>
<p>この辺は最低限おぼえておくべき。</p>
<table>
<thead>
<tr>
<th>キー割当</th>
<th>機能</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[Ctrl+Shift+P]</code><br><code>[F1]</code></td>
<td>Show All Commands (コマンドパレット)</td>
</tr>
<tr>
<td><code>[Ctrl+,]</code></td>
<td>Open Settings (UI)</td>
</tr>
<tr>
<td><code>[Ctrl+K]</code> <code>[Ctrl+S]</code></td>
<td>Open Keyboard Shortcuts</td>
</tr>
</tbody>
</table>
<p>最初から <code>[F1]</code> キーにコマンドパレットが割り当てられているのはありがたい。
まぁ,コマンドパレットさえ使えれば,あとはうろ覚えでも何とかなる(笑)</p>
<h3>マルチカーソル</h3>
<p>きょうびのテキスト・エディタでマルチカーソルが使えないのはク ◯ だろう(下品でごめん)。</p>
<table>
<thead>
<tr>
<th>キー割当</th>
<th>機能</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[Ctrl+Alt+↑]</code><br><code>[Shift+Alt+↑]</code></td>
<td>Add Cursor Above</td>
</tr>
<tr>
<td><code>[Ctrl+Alt+↓]</code><br><code>[Shift+Alt+↓]</code></td>
<td>Add Cursor Below</td>
</tr>
<tr>
<td><code>[Ctrl+D]</code></td>
<td>Add Selection To Next Find Match</td>
</tr>
<tr>
<td><code>[Ctrl+Shift+L]</code></td>
<td>Select All Occurrences of Find Match</td>
</tr>
<tr>
<td><code>[Ctrl+F2]</code></td>
<td>Change All Occurrences</td>
</tr>
<tr>
<td><code>[Shift+Alt+I]</code></td>
<td>Add Cursors to Line Ends</td>
</tr>
</tbody>
</table>
<p>Windows 版ではマルチカーソルの追加(上の 2 つの機能ね)が<code>[Ctrl+Alt+↑]</code> および <code>[Ctrl+Alt+↓]</code> にしか割り当てられてないんだけど,それやったらうちの環境ではモニタ表示の向きが変わってしまうんだよね。
うちだけの現象なのだろうか。</p>
<p>ちうわけで Windows 版では <code>[Shift+Alt+↑]</code>, <code>[Shift+Alt+↓]</code> に変更する。
<code>keybindings.json</code> にはこんな感じに設定されるようだ。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="c1">// Place your key bindings in this file to override the defaultsauto[]
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"key"</span><span class="p">:</span> <span class="s2">"shift+alt+up"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"command"</span><span class="p">:</span> <span class="s2">"editor.action.insertCursorAbove"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"when"</span><span class="p">:</span> <span class="s2">"editorTextFocus"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"key"</span><span class="p">:</span> <span class="s2">"ctrl+alt+up"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"command"</span><span class="p">:</span> <span class="s2">"-editor.action.insertCursorAbove"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"when"</span><span class="p">:</span> <span class="s2">"editorTextFocus"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"key"</span><span class="p">:</span> <span class="s2">"shift+alt+down"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"command"</span><span class="p">:</span> <span class="s2">"editor.action.insertCursorBelow"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"when"</span><span class="p">:</span> <span class="s2">"editorTextFocus"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"key"</span><span class="p">:</span> <span class="s2">"ctrl+alt+down"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"command"</span><span class="p">:</span> <span class="s2">"-editor.action.insertCursorBelow"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"when"</span><span class="p">:</span> <span class="s2">"editorTextFocus"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">]</span>
</span></span></code></pre></div><h3>行の 2 重化</h3>
<p>何故この機能がキーに割り当てられてないのだ! というわけで <code>[Ctrl+F10]</code> に割り当てた。</p>
<table>
<thead>
<tr>
<th>キー割当</th>
<th>機能</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[Ctrl+F10]</code></td>
<td>Duplicate Selection</td>
</tr>
</tbody>
</table>
<p><code>keybindings.json</code> にはこんな感じに設定される。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="c1">// Place your key bindings in this file to override the defaultsauto[]
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"key"</span><span class="p">:</span> <span class="s2">"ctrl+f10"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"command"</span><span class="p">:</span> <span class="s2">"editor.action.duplicateSelection"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">]</span>
</span></span></code></pre></div><h3>Integrated Terminal</h3>
<p><a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> には標準でターミナル機能が付いている。
ありがたや。</p>
<table>
<thead>
<tr>
<th>キー割当</th>
<th>機能</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[Ctrl+Shift+@]</code></td>
<td>Toggle Integrated Terminal</td>
</tr>
</tbody>
</table>
<p>この機能は頻繁に使うので <code>[Ctrl+F1]</code> キーに割り当て直す。
<code>keybindings.json</code> にはこんな感じに設定された。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="c1">// Place your key bindings in this file to override the defaultsauto[]
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"key"</span><span class="p">:</span> <span class="s2">"ctrl+f1"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"command"</span><span class="p">:</span> <span class="s2">"workbench.action.terminal.toggleTerminal"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"key"</span><span class="p">:</span> <span class="s2">"ctrl+shift+[BracketLeft]"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"command"</span><span class="p">:</span> <span class="s2">"-workbench.action.terminal.toggleTerminal"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">]</span>
</span></span></code></pre></div><p>Windows 版なら <a href="https://github.com/nyaosorg/nyagos/" title="nyaosorg/nyagos: NYAGOS - The hybrid UNIXLike Commandline Shell for Windows">NYAGOS</a> を shell として使いたいものである。
そこで <code>settings.json</code> に以下の設定を直接書き込む。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"terminal.integrated.shell.windows"</span><span class="p">:</span> <span class="s2">"C:\\Users\\username\\scoop\\apps\\nyagos\\current\\nyagos.exe"</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>(<a href="https://text.baldanders.info/remark/2020/10/windows-terminal-and-nyagos-and-scoop/" title="Windows Terminal × NYAGOS × Scoop = ♥">Scoop で NYAGOS をインストール</a>した場合)</p>
<h3>Search Editor</h3>
<p>簡単な検索と置換は <code>[Ctrl+F]</code> と <code>[Ctrl+H]</code> で可能だがファイルを跨いだ grep や grep 置換を行う場合は <code>[Ctrl+Shift+F]</code> または <code>[Ctrl+Shift+H]</code> でサイドバーを検索に切り替えた上で <code>[Ctrl+Shift+J]</code> で詳細項目を展開する。</p>
<p>ただサイドバーの操作ってマウス前提だし使い勝手がよくないんだよねぇ。</p>
<p>と思ったら設定に Search Editor という項目があって,“Search: Mode” 項目を変更することで <code>[Ctrl+Shift+F]</code> キー押下時にどちらを起動するか選べるようだ。
これを <code>newEditor</code> に変更したら <code>settings.json</code> にはこんな感じに設定された。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"search.mode"</span><span class="p">:</span> <span class="s2">"newEditor"</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>これでサイドバーではなくエディタのタブとして検索画面が開く。
検索結果から検索元のファイル:行にジャンプするには <code>[F12]</code> キー押下で OK(ソースコードのシンボル定義元へのジャンプと同じ)。</p>
<p>Grep 置換機能には該当の項目がなくサイドバーから行うしかないようだ。
まぁ,ファイルを跨いでの一括置換処理は滅多にしないけどな(笑)</p>
<h2>【2021-03-02 追記】ウィンドウの設定</h2>
<h3>画面起動時のウィンドウ画面サイズ</h3>
<p><a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> を起動する際のウィンドウ画面は前回時の状態を継承するのだが,そのまま 2 つ目を起動すると何故かウィンドウサイズが既定で起動してしまう。
これがめちゃめちゃストレスだったのだが,何と設定で変えれるらしい。
具体的には</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"window.newWindowDimensions"</span><span class="p">:</span> <span class="s2">"inherit"</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>とすれば 2 つ目以降もウィンドウの状態を「継承」してくれる。
つか,最初からこれを既定にしてくれよ <code>orz</code></p>
<h3>ウィンドウのタイトルバーを非表示にする</h3>
<p>Windows 版は既定でウィンドウのタイトルバーが非表示になっている。
今どきの Windows アプリケーションって大抵そんな見た目なのでそれが普通だと思っていたが,なんか設定で変えれるらしい。
具体的には</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"window.titleBarStyle"</span><span class="p">:</span> <span class="s2">"native"</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>とすれば,タイトルバーが表示されるようになった(<a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> 要再起動)。
まぁ,特に嬉しいわけではないのだけど。</p>
<p>で,実は Linux 版でもこの値を <code>custom</code> にすることでタイトルバーを非表示にできるようだ。
早速試してみた。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./custom-title-bar-style.png"><img src="./custom-title-bar-style.png" srcset="./custom-title-bar-style.png 1024w" sizes="(min-width:600px) 500px, 80vw" alt="タイトルバーを非表示に" loading="lazy"></a><figcaption><div><a href="./custom-title-bar-style.png">タイトルバーを非表示に</a></div></figcaption>
</figure>
<p>おー,ホンマじゃ。
これは嬉しい。</p>
<h2>カラー・テーマは… 入れなくてもいいか</h2>
<p>歳をとるとだんだん目が弱くなってくる。
Windows にせよ Ubuntu にせよ,パソコンのデスクトップ画面は基本的にダーク・テーマにしているのだが, <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> もこれに合わせて自動的にダークテーマになるようだ。
これならカラー・テーマを別途入れる必要はないか。</p>
<p>ただし標準のままではカーソル行が分かりにくいので <code>settings.json</code> に以下の設定を直接書き込む。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"workbench.colorCustomizations"</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"editor.lineHighlightBackground"</span><span class="p">:</span> <span class="s2">"#303030"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>よーし,うむうむ,よーし。</p>
<h2>必須の拡張機能</h2>
<p>えっと,私にとって「ないと困る機能」だからね。
念のため。</p>
<p>ちなみに</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension <package name>
</span></span></code></pre></div><p>とすることでも拡張機能をインストールできる。
Shell スクリプト(またはバッチ・ファイル)にまとめておけば再インストールの際にちょっとは楽になると思う。</p>
<h3><a href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig" title="EditorConfig for VS Code - Visual Studio Marketplace">EditorConfig for VS Code</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension EditorConfig.EditorConfig
</span></span></code></pre></div><p>コード書きなら <a href="https://editorconfig.org/">EditorConfig</a> は MUST だろう。</p>
<ul>
<li><a href="https://zenn.dev/spiegel/articles/20200922-editorconfig">インデントおよび行末は EditorConfig で始末する</a></li>
</ul>
<h3><a href="https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku" title="zenkaku - Visual Studio Marketplace">zenkaku</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension mosapride.zenkaku
</span></span></code></pre></div><p>全角空白を見やすく表示してくれる優れもの。
つか,滅びろ全角空白!</p>
<h3><a href="https://marketplace.visualstudio.com/items?itemName=masakit.zenkaku-hankaku" title="Zenkaku-Hankaku - Visual Studio Marketplace">Zenkaku-Hankaku</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension masakit.zenkaku-hankaku
</span></span></code></pre></div><p>全角半角変換。
日本語入力環境では必須。
というか半角カナとか全角英数とかマジで勘弁してほしい。</p>
<h3><a href="https://marketplace.visualstudio.com/items?itemName=medo64.render-crlf" title="Render Line Endings - Visual Studio Marketplace">Render Line Endings</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension medo64.render-crlf
</span></span></code></pre></div><p>改行コードの可視化。
色々あったけどユーザが多そうだったのでコレにした。
行末の余分な空白文字も目立たせてくれるスグレモノ。
つか,改行コードを表示するのに拡張機能が必要なのかよ <code>orz</code></p>
<p><code>settings.json</code> はこんな感じに設定している。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"code-eol.highlightExtraWhitespace"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"code-eol.highlightNonDefault"</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>ついでに設定の “Render Control Characters” も ON にしている。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"editor.renderControlCharacters"</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><h3><a href="https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-duplicate" title="Duplicate action - Visual Studio Marketplace">Duplicate action</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension mrmlnc.vscode-duplicate
</span></span></code></pre></div><p><a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> のファイル・エクスプローラー機能がショボい。
特にファイルの duplicate 機能がないのは不便って思ってたら拡張機能にあった。
何故これを標準装備しないのだ!</p>
<h2>あるとよさげな拡張機能</h2>
<h3><a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme" title="Material Icon Theme - Visual Studio Marketplace">Material Icon Theme</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension PKief.material-icon-theme
</span></span></code></pre></div><p>よい。</p>
<h3><a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2" title="Bracket Pair Colorizer 2 - Visual Studio Marketplace">Bracket Pair Colorizer 2</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension CoenraadS.bracket-pair-colorizer-2
</span></span></code></pre></div><p>括弧の対応を色付きで見やすくしてくれる。
ホンマに見やすいな。
2 のほうが出来がいいらしい。</p>
<div class="box"><h4>【2021-09-03 追記】</h4>
<p>[VS Code] 1.60 で括弧類のカラー化がサポートされた。
設定で “Bracket Pair Colorization” の項目を探してチェックを入れるか <code>settings.json</code> で</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"editor.bracketPairColorization.enabled"</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>などとすればいいようだ。
ただ <a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2" title="Bracket Pair Colorizer 2 - Visual Studio Marketplace">Bracket Pair Colorizer 2</a> と比べると微妙に見え方が違うので,好みが分かれるかも知れない。</p>
</div>
<h3><a href="https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph" title="Git Graph - Visual Studio Marketplace">Git Graph</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension mhutchie.git-graph
</span></span></code></pre></div><p><code>git commit</code> などの基本的なコマンドはコマンドパレットから簡単に呼び出せるが, GUI で操作したいときもあるので。
しかも以下のオプションを付ければ電子署名の検証も表示してくれる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"git-graph.repository.commits.showSignatureStatus"</span><span class="p">:</span> <span class="kc">true</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>というわけで採用。
つか,これがあれば他の git GUI ツール要らなくね?</p>
<p>キーボードで操作しやすいよう <code>[Shift+F1]</code> キー押下で表示するようにした。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="c1">// Place your key bindings in this file to override the defaultss
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"key"</span><span class="p">:</span> <span class="s2">"shift+f1"</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"command"</span><span class="p">:</span> <span class="s2">"git-graph.view"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">]</span>
</span></span></code></pre></div><h3><a href="https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode" title="Visual Studio IntelliCode - Visual Studio Marketplace">Visual Studio IntelliCode</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension VisualStudioExptTeam.vscodeintellicode
</span></span></code></pre></div><p>最初は「別になくてもいいや」と思っていたのだが,使ってみるとめがっさ便利。</p>
<h3><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens" title="GitLens — Git supercharged - Visual Studio Marketplace">GitLens</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension eamodio.gitlens
</span></span></code></pre></div><p>多分,チーム運用で相互レビューするときなんかには重宝するんだろう。
かなり詳細な情報が見れるんだけど,私個人にはちょっと過剰な機能なんだよなぁ。
とりあえず保留。</p>
<h3><a href="https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer" title="Excel Viewer - Visual Studio Marketplace">Excel Viewer</a></h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code --install-extension GrapeCity.gc-excelviewer
</span></span></code></pre></div><p>GrapeCity が公開してるのか。
どーりで(笑)</p>
<p>仕事で使うならよさげだけど,個人レベルじゃ特に要らないかな。</p>
<ul>
<li><a href="https://forest.watch.impress.co.jp/docs/review/1046119.html">【レビュー】「Visual Studio Code」で Excel スプレッドシートや CSV データを表示「Excel Viewer」 - 窓の杜</a></li>
</ul>
<h3><a href="https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv" title="Rainbow CSV - Visual Studio Marketplace">Rainbow CSV</a></h3>
<p>CSV 支援用の拡張機能はいくつかあるが,スプレッドシートにこだわらず,元の状態を維持しつつ分かりやすい。
おすすめ。</p>
<h2>現在日時を設定するスニペット</h2>
<p>現在日時をセットする方法はいくつかあるようだが,スニペットを使うのがお手軽な感じである。</p>
<p><code>Code/User/</code> ディレクトリ直下に <code>snippets/datetime.code-snippets</code> というファイルを作って<sup id="fnref:3"><a href="#fn:3" class="footnote-ref" role="doc-noteref">3</a></sup>,以下の内容をセットすれば OK。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"Today"</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"prefix"</span><span class="p">:</span> <span class="p">[</span><span class="s2">"today"</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"body"</span><span class="p">:</span> <span class="p">[</span><span class="s2">"$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE"</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"description"</span><span class="p">:</span> <span class="s2">"Today (RFC3339)"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"Now"</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"prefix"</span><span class="p">:</span> <span class="p">[</span><span class="s2">"now"</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"body"</span><span class="p">:</span> <span class="p">[</span><span class="s2">"$CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND"</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"description"</span><span class="p">:</span> <span class="s2">"Now time (local time)"</span>
</span></span><span class="line"><span class="cl"> <span class="p">},</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"TodayFull"</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"prefix"</span><span class="p">:</span> <span class="p">[</span><span class="s2">"todaytime"</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"body"</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"$CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T$CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND+09:00"</span>
</span></span><span class="line"><span class="cl"> <span class="p">],</span>
</span></span><span class="line"><span class="cl"> <span class="nt">"description"</span><span class="p">:</span> <span class="s2">"Today and time (RFC3339)"</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>これで <code>today</code>, <code>now</code>, <code>todaytime</code> の補完候補として表示される。
自動で表示されない場合は <code>[Ctrl+space]</code> で候補一覧が出る。</p>
<p>単純な置換ならスニペットのほうがお手軽なので積極的に使っていきたいところである。</p>
<ul>
<li><a href="https://iucstscui.hatenablog.com/entry/2021/01/13/080000">Visual Studio Code スニペットで簡単日付入力 - はんなりと、ゆるやかに</a></li>
<li><a href="https://qiita.com/xx2xyyy/items/fd333368db548167f15a">VsCode のスニペットのススメ - Qiita</a></li>
<li><a href="https://code.visualstudio.com/docs/editor/userdefinedsnippets">Snippets in Visual Studio Code</a></li>
</ul>
<h2>ブックマーク</h2>
<ul>
<li><a href="https://zenn.dev/karaage0703/books/80b6999d429abc8051bb">VS Code エディタ入門</a></li>
<li><a href="https://zenn.dev/catnose99/scraps/36c04be9fb1209">【随時更新】使ってる VSCode の拡張機能のまとめ</a></li>
<li><a href="https://eh-career.com/engineerhub/entry/2019/06/21/103000">Visual Studio Code のうれしい機能を使いこなして、初心者を最速で脱出する!《VSCode 実践入門》 - エンジニア Hub |若手 Web エンジニアのキャリアを考える!</a></li>
<li><a href="https://hirocks.jp/vscode-%e3%81%ab%e5%85%a5%e3%82%8c%e3%81%a6%e3%81%84%e3%82%8b%e6%8b%a1%e5%bc%b5%e6%a9%9f%e8%83%bd-2020%e5%b9%b4%e7%89%88/">VSCode に入れている拡張機能 2020 年版 – 未来をデザインするマーケティング会社 -ハイロックス</a></li>
<li><a href="https://www.geekfeed.co.jp/geekblog/vscode_extension">VSCode 使い必見!?使って便利な Visual Studio Code 拡張機能 10 選 | ソフトウェア開発のギークフィード</a></li>
<li><a href="https://jsstudy.hatenablog.com/entry/How-to-set-a-shortcut-to-enter-the-current-date-and-time-in-Visual-Studio-Code">Visual Studio Code で現在の日時を入力するショートカットを設定する方法 - JavaScript 勉強会</a></li>
<li><a href="https://qiita.com/y-tsutsu/items/cfe89c0168f40a8fb353">VSCodeでなるべくマウスを使わない開発環境をがんばる - Qiita</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=cweijan.vscode-database-client2">Database Client - Visual Studio Marketplace</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ckolkman.vscode-postgres">PostgreSQL - Visual Studio Marketplace</a></li>
</ul>
<h2>参考図書</h2>
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/B08CZ2C3NZ?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/51LziyyXRmL._SL160_.jpg" width="113" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/B08CZ2C3NZ?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">Software Design (ソフトウェアデザイン) 2020年8月号 [雑誌]</a></dt>
<dd>Software Design 編集部 (編集)</dd>
<dd>技術評論社 2020-07-18 (Release 2020-07-18)</dd>
<dd>Kindle版</dd>
<dd>B08CZ2C3NZ (ASIN)</dd>
</dl>
<p class="description">特集記事は「Vim vs. Visual Studio Code」</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2021-02-28">2021-02-28</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- Software Design (2020年8月号) -->
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>Windows 版でコマンド・プロンプトから開くには,インストール時に PATH を通す設定をする必要がある。また Windows 版ではエクスプローラのコンテキスト・メニューから開くオプションもあるので積極的に利用していいだろう。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p>大昔の Mifes や Vz Editor くらいしか選択肢がなかった頃ならともかく,今はいくらでも選択肢があるのにわざわざ「◯◯ エディタ風キーマップ」とかするくらいなら「◯◯ エディタ」を使えよ,と思うのは私だけだろうか。 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:3">
<p>汎用で使うスニペットを定義する場合,拡張子が <code>.code-snippets</code> なファイルであればいいらしい。 <a href="#fnref:3" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
Ubuntu に Visual Studio Code を導入する
tag:text.Baldanders.info,2020-05-28:/remark/2020/05/installing-vscode-in-ubuntu/
2020-05-28T03:31:57+00:00
2021-02-20T10:44:48+00:00
継続的に使うなら今後も追記するつもり。
Spiegel
https://baldanders.info/profile/
<p><a href="https://text.baldanders.info/remark/2020/05/x-terminal-with-atom/" title="とりあえず ATOM エディタ内ターミナルを x-terminal に乗り換えた">ちうわけで</a> <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">Visual Studio Code</a>を導入して試してみることにした。</p>
<p>継続的に使うなら今後も追記するつもり。</p>
<h2><a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> のインストール</h2>
<p><a href="https://www.ubuntu.com/" title="The leading operating system for PCs, IoT devices, servers and the cloud | Ubuntu">Ubuntu</a> に <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> をインストールするのであれば <a href="https://github.com/snapcore/snapd" title="snapcore/snapd: The snapd and snap tools enable systems to work with .snap files.">Snap</a> を使うのが一番簡単なのだが,うちの環境では何故か <a href="https://github.com/snapcore/snapd" title="snapcore/snapd: The snapd and snap tools enable systems to work with .snap files.">Snap</a> 版で日本語入力ができないという致命的な問題があるため,今回は公式サイトから deb ファイルをダウンロードして直接 <code>apt install</code> した。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ sudo apt install ./code_1.45.1-1589445302_amd64.deb
</span></span></code></pre></div><p>インストールに成功すれば以下のコマンドでバージョンが取得できるはず。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ code -v
</span></span><span class="line"><span class="cl">1.45.1
</span></span><span class="line"><span class="cl">5763d909d5f12fe19f215cbfdd29a91c0fa9208a
</span></span><span class="line"><span class="cl">x64
</span></span></code></pre></div><p>よしよし。
ちゃんと最新バージョンだな。</p>
<p>実際に <a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> を起動してアプリケーション情報(メニューの <code>Help</code> → <code>About</code> を選択)も確認してみる。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./about-vscode.png"><img src="./about-vscode.png" srcset="./about-vscode.png 524w" sizes="(min-width:600px) 500px, 80vw" alt="" loading="lazy"></a></figure>
<p>うむうむ。</p>
<div class="box"><h3>APT によるインストール【2021-02-20 追記】</h3>
<p>実は Microsoft から [VS Code] 用の APT リポジトリが提供されている。
これを読み込んでインストールすることもできる。</p>
<p>まず電子署名鍵のインポートから</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -
</span></span></code></pre></div><p>次にリポジトリの登録を行う。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"
</span></span></code></pre></div><p>これで準備完了。
あとは</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ sudo apt update
</span></span><span class="line"><span class="cl">$ sudo apt install code
</span></span></code></pre></div><p>でインストールできる。</p>
</div>
<h2><a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> のカスタマイズ</h2>
<p>カスタマイズはメニューの <code>File</code> → <code>Preferences</code> から選択できる。</p>
<ul>
<li><code>File</code> → <code>Preferences</code> → <code>Settings</code> で設定画面が開く(または <code>Ctrl+,</code> キー押下)</li>
<li><code>File</code> → <code>Preferences</code> → <code>Keyboard Shortcuts</code> でキー割当の確認・変更ができる
<ul>
<li>既定のキー割当は <a href="https://atom.io/">ATOM</a> とほとんど同じなので悩むところは少なかった</li>
<li><code>File</code> → <code>Preferences</code> → <code>Keymaps</code> で他エディタの割当を導入することもできる</li>
</ul>
</li>
<li><code>f1</code> キー押下でもコマンド・パレット(Show All Commands)が開く</li>
</ul>
<h3>設定の行方</h3>
<p><a href="https://code.visualstudio.com/" title="Visual Studio Code - Code Editing. Redefined">VS Code</a> は <code>$HOME</code> ディレクトリに以下の設定ディレクトリを作成する。</p>
<ul>
<li><code>~/.vscode/</code></li>
<li><code>~/.config/Code/</code></li>
</ul>
<p>このうち,ユーザ設定は <code>~/.config/Code/User/</code> ディレクトリ直下の以下のファイルに書き込まれる。</p>
<ul>
<li><code>settings.json</code></li>
<li><code>keybindings.json</code></li>
</ul>
<p>最低でもこれらのファイルを保持っておけば再現しやすくなるだろう。</p>
<h3>とりあえず導入してみた拡張機能</h3>
<p><a href="https://atom.io/">ATOM</a> エディタみたいに印を付けておいて纏めてインストールできるといいんだけどねぇ。</p>
<ul>
<li><a href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig">EditorConfig for VS Code - Visual Studio Marketplace</a> : <a href="https://editorconfig.org/">EditorConfig</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku">zenkaku - Visual Studio Marketplace</a> : 全角空白文字を色付きで表示できる</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=masakit.zenkaku-hankaku">Zenkaku-Hankaku - Visual Studio Marketplace</a> : 全角⇔半角文字変換</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons">vscode-icons - Visual Studio Marketplace</a> : file icon theme</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=jsynowiec.vscode-insertdatestring">Insert Date String - Visual Studio Marketplace</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ego-digital.vscode-powertools">Power Tools - Visual Studio Marketplace</a></li>
</ul>
<h2>ブックマーク</h2>
<ul>
<li><a href="https://code.visualstudio.com/docs/setup/linux">Running Visual Studio Code on Linux</a></li>
<li><a href="https://qiita.com/yoshiyasu1111/items/e21a77ed68b52cb5f7c8">UbuntuにVSCodeをインストールする3つの方法 - Qiita</a></li>
<li><a href="https://qiita.com/satokaz/items/cb45d82f6f8f1e24c0d6">VS Code でドキュメントの空白文字を見やすくしてみる - Qiita</a></li>
<li><a href="https://www.atmarkit.co.jp/ait/articles/1708/23/news026.html">Visual Studio Codeの設定「虎の巻」:IDE編 (1/3):特集:Visual Studio Codeを使いこなそう! - @IT</a></li>
<li><a href="https://linuxize.com/post/how-to-install-visual-studio-code-on-ubuntu-20-04/">How to Install Visual Studio Code on Ubuntu 20.04 | Linuxize</a></li>
</ul>