0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Visual Studio Code(2021年睦月)

Last updated at Posted at 2021-04-01

初めに

いつも読んでくださってありがとうございます。今回から開発ツールに入ります。

Visual Studio Code

これは何

Visual Studio Code はマイクロソフトが提供するフリーな開発環境で、Windows、Linux、macOSに対応する。ソースはフリーでオープンソースであり、Electron(NodeJS/Javascript,HTML,CSS)12 で作成されている。ElectronはNodeJSをデスクトップアプリに変換する枠組みであり、SlackAtomなどもElectron製である。

image.png
image.png
image.png

インストール

scoop search vscode

image.png

scoop install vscode

おっと、以前インストールしていたようだ、忘れてた。
image.png
更新してみる。

scoop update vscode

image.png
コンテクストメニュー(ファイル右クリック)に追加するには、以下を実行。

C:\Users\stake\scoop\apps\vscode\current\vscode-install-context.reg

image.png
レジストリの変更。
image.png
image.png
コンテクストメニューに追加された。(Open with Code)
image.png

起動

mkdir c:\home\develop
cd c:\home\develop
code .

image.png

設定

改行コード

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

設定一覧を表示

左下のギヤマークをクリック
image.png
「Settings Ctrl+,」を選択
image.png

eol を検索し設定

  • 上部の検索ボックスに「eol」と入力
  • 結果一覧から「Files」を選択
  • 設定対象の「Files: Eol」 を 「\n」に変更
    image.png

その他の小ネタ

既存ファイルの改行コード変更(CRLF->LF)などの小技は、別途まとめた5ので、そちらを参照。

拡張機能

右下に表示された「Show Recommendations」をクリックすると推奨のものが見える。それ以外にも開発に役立つ拡張を入れておく。

Remote Container

https://github.com/Microsoft/vscode-remote-release
コンテナの生成、起動、接続をし、VSCodeで内部から開発。ログインしたコンテんなのターミナル(linux bash)も使える。
image.png

Docker

https://github.com/microsoft/vscode-docker
DockerコンテナのBuildや管理を容易にする。
image.png

Docker Explorer

https://github.com/formulahendry/vscode-docker-explorer
Dockerコンテナの一覧やVSCodeとの連携管理が便利になる。
image.png

Remote WSL

https://github.com/Microsoft/vscode-remote-release
現時点では、Previewではあるが、一応入れておく。
image.png

Markdown All in One

https://github.com/yzhang-gh/vscode-markdown
.MDファイルを実際の表示状態で見れる。
image.png

Markdown Preview Mermaid Support

https://github.com/mjbvz/vscode-markdown-mermaid
フローチャート作成用。リアルタイムで Preview 可能。
https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid
image.png

GitLens

https://github.com/eamodio/vscode-gitlens
強力なGit用ツール
https://gitlens.amod.io/
image.png

Git Graph

https://github.com/mhutchie/vscode-git-graph
見やすいgit log。
https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
image.png

Todo Tree

https://github.com/Gruntfuggly/todo-tree
ファイルの中のTODOコメントを一覧化する
https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree
image.png

必要に応じて入れる拡張

Live Share

https://github.com/MicrosoftDocs/live-share
コードの同時編集用ツール。メンバーへの説明や引継ぎなどに便利。
https://code.visualstudio.com/blogs/2017/11/15/live-share
image.png

設定
Liveshare: Guest Approval Required を On にする

言語別ツール

Lintやらドキュメント作成ツールなどはお好みで。
例)
Python: Python Docstring Generator

終りに

次回から、各言語向けの開発・デバッグ環境をDockerで作ってゆく。

親記事:WSL2とVSCで作るWindowsでのDocker内開発環境(2021年睦月)

  1. Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS

  2. 【Electron】HTML/CSS/JavaScript でデスクトップアプリを作った【インストールから exe 化まで】

  3. WSL2/Dockerのトラブル治療室

  4. Git 小技集

  5. Visual Studio Code 小技集

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?