初めに
いつも読んでくださってありがとうございます。今回から開発ツールに入ります。
Visual Studio Code
これは何
Visual Studio Code はマイクロソフトが提供するフリーな開発環境で、Windows、Linux、macOSに対応する。ソースはフリーでオープンソースであり、Electron(NodeJS/Javascript,HTML,CSS)12 で作成されている。ElectronはNodeJSをデスクトップアプリに変換する枠組みであり、SlackやAtomなどもElectron製である。
インストール
scoop search vscode
scoop install vscode
おっと、以前インストールしていたようだ、忘れてた。
更新してみる。
scoop update vscode
コンテクストメニュー(ファイル右クリック)に追加するには、以下を実行。
C:\Users\stake\scoop\apps\vscode\current\vscode-install-context.reg
レジストリの変更。
コンテクストメニューに追加された。(Open with Code)
起動
mkdir c:\home\develop
cd c:\home\develop
code .
設定
改行コード
Dockerでの開発であり、Linuxと同じ環境になるが、素のVisualStudioCodeだと、Windows系の改行コードで書類を作ってしまい、bashスクリプトが動作不良を起こすことがある。3 gitの改行設定4と合わせて以下のように設定を変更しておく。
gitの設定を変更
WindowsのGitでは、インストール時のデフォルトとして、CRLFの変換機能がONになっていて、チェックアウトやクローンにて勝手にCRLFに変えられてしまう。WSL2/Dockerと組合せて使用する場合、この設定は有害な結果をもたらすことが多いので、以下のように、PowerShellなどから設定変更する。もしローカル設定がある場合は、そちらを変更する。
CRLFが必要な場合は、ローカルで「git config --local core.autocrlf false」とするか、VSCの設定を変更する。
# 改行コードをコミット時にのみ CRLF=>LF に変換(それ以外の操作では無変換)
git config --global core.autocrlf input
# 設定の確認:グルーバル
git config --list --global
# 設定の確認:ローカル(グローバルより優先となる)
git config --list --local
設定一覧を表示
左下のギヤマークをクリック
「Settings Ctrl+,」を選択
eol を検索し設定
その他の小ネタ
既存ファイルの改行コード変更(CRLF->LF)などの小技は、別途まとめた5ので、そちらを参照。
拡張機能
右下に表示された「Show Recommendations」をクリックすると推奨のものが見える。それ以外にも開発に役立つ拡張を入れておく。
Remote Container
https://github.com/Microsoft/vscode-remote-release
コンテナの生成、起動、接続をし、VSCodeで内部から開発。ログインしたコンテんなのターミナル(linux bash)も使える。
Docker
https://github.com/microsoft/vscode-docker
DockerコンテナのBuildや管理を容易にする。
Docker Explorer
https://github.com/formulahendry/vscode-docker-explorer
Dockerコンテナの一覧やVSCodeとの連携管理が便利になる。
Remote WSL
https://github.com/Microsoft/vscode-remote-release
現時点では、Previewではあるが、一応入れておく。
Markdown All in One
https://github.com/yzhang-gh/vscode-markdown
.MDファイルを実際の表示状態で見れる。
Markdown Preview Mermaid Support
https://github.com/mjbvz/vscode-markdown-mermaid
フローチャート作成用。リアルタイムで Preview 可能。
https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid
GitLens
https://github.com/eamodio/vscode-gitlens
強力なGit用ツール
https://gitlens.amod.io/
Git Graph
https://github.com/mhutchie/vscode-git-graph
見やすいgit log。
https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
Todo Tree
https://github.com/Gruntfuggly/todo-tree
ファイルの中のTODOコメントを一覧化する
https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree
必要に応じて入れる拡張
Live Share
https://github.com/MicrosoftDocs/live-share
コードの同時編集用ツール。メンバーへの説明や引継ぎなどに便利。
https://code.visualstudio.com/blogs/2017/11/15/live-share
設定
Liveshare: Guest Approval Required を On にする
言語別ツール
Lintやらドキュメント作成ツールなどはお好みで。
例)
Python: Python Docstring Generator
終りに
次回から、各言語向けの開発・デバッグ環境をDockerで作ってゆく。
親記事:WSL2とVSCで作るWindowsでのDocker内開発環境(2021年睦月)