「VSCode」の記事 - Crieit

VSCode最初にやる設定メモ（全ユースケース対応）

2023-08-31T20:08:31+09:00

VSCodeのセットアップのたびに、デフォルト設定に不便を感じていつかやらないといけない設定変更があるのでメモしておく。

files.autoGuessEncoding true
SJISファイル開いて文字化けしてる人生にさよなら
有効にするとファイル開くときに文字コードを自動判別してくれる

editor.fontFamily 'BIZ UDゴシック'
真の等幅フォントはこれ　絶対等幅にしてくれる

workbench.startupEditor none
起動するたびにようこそ画面出さないようにする

window.commandCenter true
コマンドランチャーをウインドウのタイトルのところに表示する

update.showReleaseNotes false
VSCode更新後のリリースノートを表示しないようにする

security.workspace.trust.untrustedFiles open
ファイル開こうとするたびに作成者を信頼するかどうか聞かれないようにする
野生のワークスペース開かないなら設定オススメ

editor.guides.bracketPairs active
括弧がどこからどこまでか色付けされてわかりやすくなる

extensions.ignoreRecommendations true
拡張機能のおすすめを右下にポップアップしまくるのを封じる

files.defaultLanguage plaintext
新規作成のファイルのデフォルト拡張子を決める（iniファイルで保存しようとするアホ挙動対策）
設定値は好みで

editor.renderWhitespace all
半角空白と全角空白の視認

editor.renderControlCharacters true
制御文字を表示する
デフォルトではtrueかも。念の為確認する。
よくわからない人も見えるようにしておいた方がいいマジで

workbench.editor.titleScrollbarSizing large
タブ下のスクロールバーを太くする（初老向け）

以下はsetting.jsonに直書きする設定

特定拡張子のみ予測変換OFF（特定拡張子はお好みで）
文章書く時に予測出てくるのは邪魔だけど、コーディングの時は予測使うって場合に便利
"[plaintext]": {"editor.quickSuggestions":false},

スクロールバーの色
各自見やすい色に変更する
"workbench.colorCustomizations": {
"scrollbarSlider.activeBackground": "#ABE1FA",
"scrollbarSlider.background": "#ABE1FA",
"scrollbarSlider.hoverBackground": "#ABE1FA"
}

VSCode からテキストをコピーする際に「書式なし」をデフォルトにする

2021-05-29T15:25:05+09:00

VSCode 上のテキストをコピーして Word に貼り付けたら、背景色なども一緒に付いてきてしまったので「書式なし」をデフォルトに設定します。

現象

例えば、以下のようなテキストを VSCode からコピーします。

それを、 Word 等に貼り付けます。

すると、ご覧の通り背景色や文字色、フォントなどの書式も一緒に貼り付けてしまいます。

このままだと困るので、 VSCode からコピーする際に「書式なし」でコピーするように設定を変更します。

VSCode＋WSL(ssh接続)＋CMake＋GoogleTestでC++プログラミング環境を構築

2021-04-10T00:26:58+09:00

以前の記事
VSCode＋WSL＋CMake＋GoogleTestでC++プログラミング環境を構築
で作った環境、なーーんかスマートじゃないなーと思ってたんですが
WSLにssh接続で入るようにしたらしっくりきたので、改めて記事を書きました。
①以外は以前の記事とほぼ同じですが、この記事だけ読んでできるようにしたかったので、ご了承ください。
Windows10のVersionは1803以降でお願いします。それより前だと、WSLのウインドウを開いておいてsshデーモンも起動して・・・とか毎回やらないとssh接続できないらしいです。

①VSCode＆WSLでC/C++を使えるようにする

①-1 WSLを使えるようにする

画面左下の窓アイコンを右クリック→Windows Powershell (管理者)を選択。
出てきたウインドウに以下を打ち込んでしばし待ち、指示が出たらPC再起動します。

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

①-2 ubuntuをインストール

Microsoft Storeを開いてubuntuと入力し出てきたUbuntu 18.04 LTSをインストール＆起動します。

①-3 ubuntu初期設定、gcc、opensshインストール

インストール完了したら、ユーザー名パスワードを設定後、以下のコマンドで最新に更新、

$ sudo apt update
$ sudo apt upgrade

次にgccなどをインストール、

sudo apt install build-essential

最後にopensshを入れなおします。

sudo apt-get purge openssh-server
sudo apt-get install openssh-server

入れなおす事で、パスワード入力を不要にしたりとかRSA鍵を作ったりとか勝手にやってくれるっぽいです。

①-4 WindowsのVSCodeインストール

vscodeでググった一番上のリンクから「今すぐダウンロード」してインストールしてください。

①-5 VSCodeに拡張機能をインストールしてWSLに接続

「Remote Development」で検索して出てきたやつをインストール

すると左側にモニタみたいなアイコンが出るのでクリック

表示されたubuntu18.04を選択して右のウインドウに+がついたようなアイコンをクリックでWSLに接続し、VSCode(WSL側)のウインドウがもう一つ表示されます。以降はVSCode起動後この2ポチでWSL環境が開きます。前より簡単ですね。

①-6 VSCode(WSL側)に拡張機能をインストール

①-5の最後で開いたWSL側のVSCodeに以下の拡張機能をインストール
・C/C++
・他日本語などお好みで
ここまでやればC/C++のコーディングとビルドはできるようになります。

②cmakeのインストール

以降の操作は①-3で使ってたウインドウでもできますが、VSCode(WSL側)のターミナル(bash)でも行えます。コピペとかしやすいので後者をおすすめします。

sudo apt-get install cmake

おわり

③GoogleTestのインストール

インストール方法をググると、tar.gzダウンロードしてきてせこせこ解凍したり、makeしたあと生成物をなぜか手動でコピーしてたりと色んなインストール方法が出てきますが、苦労なくできるのは以下です。

cd
git clone https://github.com/google/googletest.git
cd googletest
mkdir build
cd build
cmake ..
sudo make
sudo make install

④C++のコード書く

書いてください。

⑤GoogleTest使ってみたソースのCMakeLists.txt

cmake_minimum_required(VERSION 3.0)
project("hello_gtest")
add_executable(hello_gtest main.cpp)
target_link_libraries(hello_gtest
  PRIVATE
    gtest
    gmock
    pthread)

①②③あたりを上に書いた通りにやっておけば、includepathの指定とか特に何も書かないでも、上のような内容でビルド＆実行できると思います。
お疲れさまでした。次の⑥は読まなくていいです。

⑥■■■■■■■■■■

前の記事で作った環境、正直なんか使いにくくてその後二度と自宅でC/C++打たなかったんですが、バチが当たってHDDがぶっ壊れたので、SSDに換装後、今回環境を作り直すにあたって、もっと楽にできるようにしてみました。

【VSCode】拡張機能一覧（主にWeb系システム開発用）

2021-03-28T18:20:44+09:00

個人用メモ。
主にPHPを使用して開発する環境で使用している拡張機能一覧。
（他のも混じっているけど）
（後で追加・変更・削除するかも）

VSCode

Bookmarks
　あらかじめソースコード中にブックマークを設定しておくと、他の場所からブックマークまで一瞬で移動することが出来る。
indent-rainbow
　インデントを色付きで表示してくれる。
Japanese Language Pack for Visual Studio Code
　VSCodeの日本語化。

HTML

Auto Close Tag
　自動的に閉じタグを追記してくれる。
Auto Rename Tag
　タグを変更すると、対応する閉じタグを自動的に変更してくれる。
HTML Snippets
　HTMLの予測変換を表示してくれる。
HTMLHint
　HTMLの文法チェックをしてくれる。

PHP(Laravel)

Bracket Pair Colorizer 2
　メソッドやArrayなどで、対となるカッコを色付きで表示してくれる。
php cs fixer
　PHPソースを自動整形してくれる。
　※別途、「php-cf-fixer.phar」のインストールが必要。
PHP Debug
　PHPをステップ実行してデバッグできるようになる。
PHP IntelliSense
　PHPの予測変換を表示してくれる。

【2021.8.8 追加】
* Laravel Blade Snippets
　Laravelのbladeファイル内のタグやディレクティブを色付きで表示してくれる。

Laravel Blade formatter
　Laravelのbladeファイル用のフォーマッタ。
　blade独自のディレクティブもインデントしてくれる（これ重要）。

JavaScript(Node.js,Vue.js)

ESLint
　JavaScriptの構文チェックをリアルタイムで実行してくれる。
　※Vue.jsで使用するには設定が必要。
JavaScript (ES6) code snippets
　JavaScriptの予測変換を表示してくれる。
Vetur
　Vue.jsコードのシンタックスハイライトやコード補完、リント、フォーマットを行ってくれる。

CSS(Sass,SCSS)

IntelliSense for CSS class names in HTML
　CSSクラス名を入力するときに、入力補完してくれる。
SCSS Formatter
　SCSSコードを自動整形してくれる。

その他

Log File Highlighter
　ログファイルの内容を色付きで表示してくれる。
MySQL
　VSCodeでMySQLを使用可能にする。
Rainbow CSV
　CSVファイルをカラムごとに色分けして表示してくれる。
Regex Previewer
　正規表現の実行結果をプレビュー表示してくれる。
SFTP
　サーバへ自動的にソースファイルをアップロードしてくれる。

【参考】

「Visual Studio Code」をインストールしてPHPコードのデバッグ環境を設定する方法
https://incloop.com/visualstudiocodeのデバッグ設定/

Visual Studio Codeで作るPHP開発環境のおすすめ拡張機能17選
https://wonwon-eater.com/vscode-php-plugin/

VScodeの日本語化ができない変わらない時の対処法[Visual Studio Code]
https://rabotiku-sato.com/vscode-japanese-setting

vscodeでVue.jsを書くときに使っているプラグインとか
https://qiita.com/dayoshix/items/c61a75a971331418c348

【HTML編】Visual Studio Code おすすめプラグイン紹介 #02
https://so-da.tech/tech/vscode/vscd3/

VSCodeのAuto Rename Tagで閉じタグも自動変更
https://tech.pjin.jp/blog/2020/04/27/vscode_extension_auto_rename_tag/

VSCode で HTML の文法チェックを行う拡張機能 HTMLHint
https://loumo.jp/archives/26229

VSCode拡張機能『indent-rainbow』でインデントを虹色にする方法
https://onedarling.site/programming/tool/vscode-indent-rainbow/

【2020年版】VSCodeでhtml/css/jsの拡張機能おすすめ
https://uetani33.net/vscode-web-extensions/#toc_id_3_2

VSCode使い必見！？使って便利な Visual Studio Code 拡張機能10選
https://www.geekfeed.co.jp/geekblog/vscode_extension

【超便利】VSCodeでMySQLを利用する方法
https://newmtube07.com/vscode-mysql/

[Visual Studio Code] PHPのコードを整形する「php cs fixer」の設定
https://www.searchlight8.com/visual-studio-code-php/

VSCode(Visual Studio Code)でSFTP・FTP経由でファイルを自動アップロードや同期できる拡張機能「SFTP」が超便利
https://www.karelie.net/vscode-sftp/

Windows10でVisual Studio Code + vue-cliの開発環境構築メモ
https://belhb.hateblo.jp/entry/2020/08/08/142540

【2021.8.8 追加】
LaravelでVisual Studio Codeを使う時に入れておきたい拡張機能3選
https://biz.addisteria.com/laravel-vscode/

Laravel blade formatter VSCode Extensionを作った
https://shufo.dev/2020/10/03/published-vscode-blade-formatter/

VSCodeでBladeテンプレートを整形する
https://blog.nplpl.com/310

【VSCode】codeコマンドで操作する

2021-01-03T17:59:14+09:00

コマンドでまとめて拡張機能をインストールしたいときに便利

動作確認済み環境

VSCode 1.42.1
macOS 10.14.6

Macのターミナルでcodeコマンドを実行できるようにする

※Windowsは最初からコマンド使えるので不要

F1キーでコマンドパレットを呼び出します。
shell Command: Install 'code' command in PATHを実行すれば完了です。

codeコマンド操作

インストール済み拡張機能を確認

$ code --list-extensions

使用例

bash-3.2$ code --list-extensions
chrmarti.regex
CoenraadS.bracket-pair-colorizer
esbenp.prettier-vscode
mechatroner.rainbow-csv
mosapride.zenkaku
ms-azuretools.vscode-docker
MS-CEINTL.vscode-language-pack-ja
ms-python.python
ms-vscode-remote.remote-containers
ms-vscode-remote.remote-ssh
ms-vscode-remote.remote-ssh-edit
ms-vscode-remote.remote-wsl
ms-vscode-remote.vscode-remote-extensionpack
oderwat.indent-rainbow
redhat.vscode-yaml
shardulm94.trailing-spaces
vscode-icons-team.vscode-icons
vscoss.vscode-ansible

拡張機能をインストール

$ code --install-extension "拡張機能名"

使用例

bash-3.2$ code --install-extension vscoss.vscode-ansible
Installing extensions...
Installing extension 'vscoss.vscode-ansible' v0.5.2...
Extension 'vscoss.vscode-ansible' v0.5.2 was successfully installed.

拡張機能をアンインストール

$ code --uninstall-extension "拡張機能名"

使用例

bash-3.2$ code --uninstall-extension chrmarti.regex
Uninstalling chrmarti.regex...
Extension 'chrmarti.regex' was successfully uninstalled!

VSCode＋WSL＋CMake＋GoogleTestでC++プログラミング環境を構築

2020-11-26T18:56:31+09:00

2021/4/9追記
WSLにssh接続で入った方が色々変な事気にしないでいいんじゃない？
ということで、アップデートした記事を書きました。
こちらになります。
VSCode＋WSL(ssh接続)＋CMake＋GoogleTestでC++プログラミング環境を構築

以下はアップデート前の記事です。

Windows10で掲題の環境を作成したのでメモ
サクッとやりたかった
次の機会にはサクッとできるはず

①まずは↓を見ながらVSCode＆WSLでC/C++を使えるようにする

WSL+VSCODEで競技プログラミング環境構築

途中、

拡張機能がインストールできたら上部のメニューから「ファイル」->「フォルダーを開く」
から好きなフォルダーを開いてください。

と書かれているが、自分は好きなフォルダーじゃなくて、
WSLのrootfsディレクトリ以下を指定した
具体的にはUbuntu18.04なら以下

C:\Users\[ユーザー名]\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\rootfs

本当にマイドキュメントとか好きなフォルダにしたら、
gtest.hをincludeするときとかの補完機能がなんかアレとか、CMakelists.txtを書く時に全然アレとか、
とにかく無用な苦労をしたので・・・（だから「競技プログラミング」って書いてあったのかな）

②cmakeのインストール

sudo apt-get install cmake

おわり

③GoogleTestのインストール

cd
git clone https://github.com/google/googletest.git
cd googletest
mkdir build
cd build
cmake ..
sudo make install

ググると色んなインストール方法が出てくるが、自分が苦労なくできたのはこれだけだった
他はヒューマンのエラーが入る余地がありすぎる
特に最後のmake installはmakeだけやって手作業で.aとか.hをコピーしてる記事が多くてなんで？？　ってなった

④C++のコード書く

さすがに省略

⑤GoogleTest使ってみたソースのCMakeLists.txt

cmake_minimum_required(VERSION 3.0)
project("hello_gtest")
add_executable(hello_gtest main.cpp)
target_link_libraries(hello_gtest
  PRIVATE
    gtest
    gmock
    pthread)

①②③あたりを上に書いた通りにやっておけば、includepathの指定とか特に何も書かないで
上の内容でビルド＆実行できると思う
お疲れさまでした。次の⑥は読まなくていいです

⑥■■■■■■■■■■

仕事でどうしてもわかんないとこがあったが職場にいられる時間があまりなく、
しかたない、家でC++環境構築してやってみるか・・男の子なら自宅WindowsPCで
CやC++のコンパイル環境があるべきだよな・・・
と思ってとりかかったら、上記の環境設定だけで終わってしまった

何も考えず仮想PCにlinux入れてssh接続でやる方法ならむしろ確実だったが
「めんどい＆重い＆時間かかる」
というのはわかっていたので、他に軽い方法ないかとググったらMinGWを使う方法がいっぱいでてきた
このMinGWが無駄にした時間のほぼ全て
最初のapt-getに相当する部分でpacmanとか打ち込まされる時点で嫌な予感がして、
騙されたかなと思ってそれでもやってみたら騙された
MinGWってなんで今も存在してるんだろう・・・

WSLはすごい楽でした
ありがとうMicroSoft

c,c++のコメントメモ（doxygenを使用)

2020-11-25T17:55:46+09:00

この記事ははてなをメインにQrunch(閉鎖済み)、Crieitにクロス投稿しています

環境

VisualStudio2017

VisualStudio2019

VSCode

Doxygenで生成したドキュメントのどこで表示されるかわからない

変数等の@briefは詳解の前の簡単な説明と詳解の後のところに表示。
@detailsは詳解のところに表示される。

コメントの書く場所をどうすべきか

VisualStudioではcppに書いたときInteliSenseが機能しなかったので
ヘッダーに書くのが良さそうです。
ただテンプレート関数をクラス内で多用するとコメントと合わせかなり行数が増えるので注意が必要です。
~~どうにかしたい・・・~~

前置簡易コメント

///　コメント
///　@detailsと同じ扱いに
int i;

///　コメント

このコメントはvisualstudioで使うとxmlコメントの書き方に被るみたいで
InteliSense（変数や関数を選んだときに表示されるやつ）に表示されません。
なので以下を使用しました。

//!　コメント

//!@brief   説明

後置コメント

int a;///<コメント

これもvisualstudioでは「XMLコメントに無効なXMLが含まれます」と表示されるので

int a//!<コメント

を使用しました。
あと、Visual studioのc++用のxmlコメントは拡張機能で使用可能みたいです。

[VisualStudio]C++でもXMLドキュメントコメントを自動挿入したい！！

各ファイルのコメント

一番始めにいります。
最低限この２行あれば十分っぽいです。

/*!
@file    何も書かなくてもいい
@brief   このファイルの説明を書く ファイル一覧のところに出力されます
*/

変数、マクロのコメント

int hp;//!@brief コメント

//!@brief 　　　 コメント
//!＠details 　　コメント
int mp;

基本後置コメントがスマートでいいのですが複数行に対応してないみたいなので
複数行に書く場合は前置のほうがいいです。

関数のコメント

/*!
@brief 関数の要約
@param 引数名　引数の詳細引数の個数分かく
@return 戻り値の詳細
@details 関数の細かい説明
*/

クラス、列挙体へのコメント

/*!
@brief 要約　クラスなら一覧にも書かれます
@details 細かい説明
*/

便利なコメント

@todo	書くとTODOリストが自動で作成されめっちゃ便利！
@see	参照したい関数、変数を書ける
@note	メモを書ける
@n	文の途中で改行してくれます。
@retval	@returnの代わりに使用　戻り値ごとの細かい説明を書ける。

参考にしたサイト

Doxygen コマンド一覧
 C++で///を使ったコメント - teratail

VSCodeの拡張機能(2020-11-25追記)

VSCodeにはDoxygen形式のコメントを自動生成してくれるとても便利な拡張機能があります
Doxygen Documentation Generator
関数やクラスの前、ファイルの先頭で/**と改行だけで必要な内容を生成できるのでとてもおすすめです。

Nuxt.jsにlintを導入してみた

2020-09-07T14:22:14+09:00

動機

以前からなんとなくeslintは導入してあーだこーだしてたのですが、ポートフォリオサイトやブログサイトをNetlifyからFirebaseに移植する際に、github actions(CI)を使うようになり、せっかくだからもう少し本格的にlintやtestを導入してみようということで、色々調べて導入してみました。

その手順を初心者なりに備忘録としてまとめてみました。
(だいぶ我流な部分もありますが多めに見ていただければ幸いです)

アドバイスなどは大歓迎です。

知識が増えたら随時更新します。

https://blog.taka1156.site

https://github.com/taka1156/nuxt-blog - アトミックデザインの形にプロジェクトを見直し中

↑ブログのプロジェクトで導入してみました。(Nuxt.js + Firebase + microCMS 構成)

環境

mac OS Catalina
Node.js v12.16.1
npm v6.14.3
yarn v1.22.0

手順

これらをインストール
- eslint関連
  yarn add eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue babel-eslint
- stylelint関連
  yarn add stylelint stylelint-config-standard stylelint-config-prettier stylelint-prettier
- prettier
  yarn add prettier
※ なんでprettierを入れたか
eslintだけだとエラーは出すが修正はしない項目(コード整形関連)もあるので併用する。
(逆にprettierは細かい命名規則や処理に関するエラーは出さない?)

設定ファイルを書く

.eslintrc.json

{
    "parserOptions": {
        "parser": "babel-eslint",
        "sourceType": "module"
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended",
        "plugin:prettier/recommended",
        "prettier/vue"
    ],
    "plugins": [
        "vue"
    ],
    "env": {
        "jest": true,
        "browser": true,
        "es6": true,
        "node": true
    },
    "globals": {},
    "rules": {
        "camelcase": [2,{"properties": "always"}],
        "quotes": [2,"single", { "avoidEscape": true } ],
        "eqeqeq": [2, "always", {"null": "ignore"}],
        "prefer-const": 2,
        "vue/component-name-in-template-casing": "off",
        "vue/no-v-html": "off"
    }
}

.stylelintrc.json

{
    "extends": ["stylelint-config-standard", "stylelint-prettier/recommended"],
    "rules": {
        "color-no-invalid-hex": true,
        "color-hex-case": "lower",
        "selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$"
    }
}

.eslintignore, .stylelintignore
※ storybook-static、coverage は storybookやjestを導入していると生成されるファイル

# ビルドファイル
dist
storybook-static
coverage

# 設定、モジュール
.nuxt
.storybook
node_modules

.prtteirrc.json

{
    "printWidth": 85,
    "tabWidth": 2,
    "singleQuote": true,
    "semi": true,
    "bracketSpacing": true,
    "arrowParens": "avoid"
}

scriptsを追加

"scripts": {
    "lint-js": "eslint --ext .js,.vue .",
    "lint-style": "stylelint \"**/*.vue\" \"**/*.css\"",
    "lint-js:fix": "eslint --ext .js,.vue . --fix",
    "lint-style:fix": "stylelint \"**/*.vue\" \"**/*.css\" --fix",
    "lint:check": "yarn lint-js & yarn lint-style",
    "lint:fix": "yarn lint-js && yarn lint-style",
    ...
}

お好みでvscode設定を追加
保存時に勝手にlint処理が走るようになるので便利
(vscode/setting.jsonに記述)

{
    "comments": "保存時にeslint、stylelintを自動実行",
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
}

まとめ

eslint、stylelintについてざっくりと使い方やルールの指定方法についてわかってきたので、
積極的に活用して読みやすいコードを意識していきたいですね。

また、eslintルールについても、気になるものがあればまとめてみようと思います。

Visual Studio Code内でUnityEngine.UIなどへの参照ができない(インテリジェンスが働かない)場合の修正方法

2020-07-28T20:55:49+09:00

Unity 2019.3.10f1で確認しています。
2019.4以降では解決しているかもしれません。

発生する現象

Unity2019でプロジェクトを作成するとUnityではエラーが発生していないにも関わらず、Visual Studio Code内でUsing UnityEngine.UIなどへ参照ができない現象が発生します。

↑画像のようにUIの下に赤線が表示される

UnityEngin.UIにあるImageも正常に参照できておらずimage.まで打っても候補が表示されない。

表示されるエラー内容

Using directive is unnecessary. [Assembly-CSharp]csharp(IDE0005)
Unnecessary using directive. [Assembly-CSharp]csharp(CS8019)
The type or namespace name 'UI' does not exist in the namespace 'UnityEngine' (are you missing an assembly reference?) [Assembly-CSharp]csharp(CS0234)

解決方法

Package ManagerからVisual Studio Code Editorのパッケージのバージョンを上げる
メニューのWindowからPackage Managerを開きVisual Studio Code Editorを選択します。

初期は1.1.4になっているはずなので、1.2.0を選び右下のUpdate to 1.2.0ボタンを押して更新します。

更新後はVisual Studio Codeを再起動してください。

再起動後も参照ができないままのときは、少し時間をおいてからVisual Studio Codeを再起動してみてください。

WindowsのVSCodeでファイルをgit addしようとするとoutside repositoryエラーが出る

2020-07-27T08:40:30+09:00

VSCodeのUIで編集したファイルのプラスボタンを押してgit addしようとすると、下記のようなエラーが出るようになっていた。結構古いプロジェクトだった。他のプロジェクトでは発生しない。Windowsだけ発生する現象かもしれない。

fatal: d:\users\documents\apps\app\src\entity\Answer.ts: 'd:\users\documents\apps\app\src\entity\Answer.ts' is outside repository

これによりaddができない。試しにシェルでaddしてみたら普通にaddできた。VSCodeのUIでだけaddできない。

調べてみると、 git update-git-for-windows でgit自体をバージョンアップすれば良いらしい。詳しくは下記の情報。

https://stackoverflow.com/questions/13790592/how-to-upgrade-to-the-latest-version-of-git-on-windows-still-showing-older-vers

とにかくgitのバージョン2.13あたり以前だと発生するらしい。多分ドライブ文字列が小文字になってるところが原因っぽいのだろうと。何にしろ詳しくはわからないが、バージョンアップすれば改善した。

バージョンの確認

git version

アップグレード

git update-git-for-windows

使ってよかったVSCode拡張機能14選+3選の紹介

2019-11-19T22:46:45+09:00

一軍

この枠で紹介している拡張機能は、高い汎用性を持っており私自身も良く使っている拡張機能たちです。

Settings Sync♻️

VS Codeの拡張機能を移行する場合や、バックアップするときに大活躍！
とりあえず入れとけスタイルでオッケーな拡張機能。
かったるい移行作業をめちゃくちゃ楽にしてくれる。端末が壊れても安心だし、真っ先に入れても良い拡張機能かも。自分で管理しても良いけどね。

Download Page

テキスト校正くん👨‍🎓

VS Code上にあるテキストを自動で添削してくれるスグレモノ。
どこかに議事録やまとめた文章を提出する前に少し確認するだけで、最低限の日本語は担保されるところが良い😚

Download Page

Code Spell Checker👨‍🏫

テキスト修正の英語版。間違ったスペルを教えてくれる。これでtypoが結構減ると思います。英語が苦手なあなたでも安心（俺やんけ）。
固有名詞もユーザ辞書登録すれば、エラー回避できるので便利。

Download Page

Trailing Spaces✨

こいつをいれてから、文章の後ろにムダなスペースを入れることはなくなった。
赤色で視覚的も見やすくGood（色は変更可能）。ただし、Markdown書くときの改行はちょっと気になる。

Download Page

indent-rainbow🌈

その名の通り、インデントに色を付けてくれる拡張機能。
パット見でどこのラインを編集しているのかがわかるので、非常に便利。ネストが深くなっても安心😇（だからといって深くするのはやめてくれ…）

Download Page

Bracket Pair Colorizer🌈

ペアの括弧同士が同じ色になるので、どこで始まってどこで終わるのかがわかりやすい。
pythonなどのインデントがプログラムの仕組みに組み込まれているものならindent-rainbowだけで問題ないのですが、変なインデントが大量にある闇プロジェクトではこちらが大活躍します。普通に使ってても十分に便利なんですけどね。
後は完全な独断と偏見なのですが、関数型言語にはあったほうが良いと思われます（括弧がいっぱいあるから）。

Download Page

Visual Studio IntelliCode💡

勝手に候補の中から、一番いい感じのやつを選択してくれるやつ。
あんまり意識したことはないけど、便利に使えているということは役に立っていると思われ

Download Page

vscode-icons🏷

多分定番の拡張機能。さまざまなiconが視覚的にわかりやすく表示されるようになる。
個人的には、フォルダーの識別とかが好き。

Download Page

Markdown Preview Enhanced🔍

Markdown Previewの拡張版。PlantUmlが使えたり、pdf化やhtml化が行えるようになっていたりと、
大幅に拡張されている。とりあえず入れておきたい拡張機能の1つ。

Download Page

Marp for VS Code🎨

MarkdownToSlideの決定版。
Chromeのパスを指定してあげることで、pdfやpptxなどのスライドへVS Code上から変換できる。
Marp CLIもいいけど、ぱっと簡単に使うならこっち。
ちなみに、MacのChromeパスは/Applications/Google\ Chrome.app/で設定すればおｋなはず。

Download Page

Live Server🐟

ワンクリックで、現在のディレクトリを元にしたローカルサーバを建てられるスグレモノ。
ローカルで何か確認したいときがあればこちらをどうぞ。

Download Page

GitLens — Git supercharged🥽

その名の通り、gitをめちゃくちゃ便利にしてくれる拡張機能です。
行の右にコミットが表示されたり、過去の履歴を表示させたりとgitのことならこいつにおまかせ感がある。

Download Page

Code Runner🏃‍♂️

ちょっとコードを動作させたいときにとても便利です。
さまざまな言語に対応しているみたいなので、結構好きな言語でショートコードの確認ができたりする。

Download Page

TODO Highlight💡

TODO:やFIXME:などがデフォルトで設定されていますが、NOTE:やDONE:など、自身のオリジナルタグを追加することで色々な用途に利用可能です！
自分はメモとかにも利用しています。

Download Page

二軍

そこまで頻繁に使わないものや、少し尖ったもの。

vscode-spotify🎵

下のバーにSpotifyの情報が表示される。
音楽聴きながら作業していると、地味に画面移動をするシーンが多いのでVS Code1つで収まるのは便利。

Download Page

Better Comments📝

特定のコメント文字列（TODO、!、?など）に対して、色を付けてくれる拡張機能です。

Download Page

filesize📁

左下にファイルのサイズを表示するだけのアプリ。たまに便利。

Download Page

Proxy 下で vscode の WSL 上の他の拡張機能のインストールに失敗する

2019-10-09T11:22:41+09:00

プロキシ環境下の vscode で、 WSL 上で拡張機能を動かしたいのに、インストールインストールに失敗する問題を解決するメモ。

前回の↓の記事は、『Remote – WSL 拡張が有効にできない』問題だったが、今回は『Remote – WSL 拡張を有効にした後、その環境上で他の拡張機能がインストールできない』問題なのでちょっと違う点に注意。ややこしいね。
https://crieit.net/posts/Proxy-vscode-WSL

遭遇した問題

Visual Sutdio Code (以下、 vscode) へ無事に Remote – WSL 拡張機能の "VS Code Server for WSL" のインストールが完了し、 Windows 上から快適に WSL の環境にアクセスできるようになった。
しかし、いくつかの vscode の拡張機能は、 Windows 上の環境とは別に WSL 上の環境で改めてインストールしなくてはならない。

そこで、 UI 上の案内に従って各拡張機能で "Install in WSL" を行ったところ、プロキシ環境下だと以下のエラーが発生してインストールに失敗する問題に遭遇した。

Failed to install extension

パネル上の OUTPUT タブで "Log (Remote Server)" の情報を見ると、以下のようなエラーが発生しているのがわかる。

[remoteagent] [error] Failed to install extension: {拡張機能ID} connect ECONNREFUSED 13.107.6.175:443

settings.json ではプロキシの設定しているし、更には WSL 上の環境変数 (http_proxy, https_proxy) にだってプロキシを入れている。
更には（前述の）前回の記事に倣って、 WSL のコンソール上から code . の立ち上げまで行ってみた。

それでも解消しない。何故だ。

なお、試した vscode のバージョンは、 August 2019 (version 1.38.1) だ。

"Remote [WSL]" 用の設定ファイルを書き換える

Remote – WSL 拡張をインストールすると、 Settings のウィンドウに "Remote [WSL]" というタブが増えている。

そのタブに移動してみると、 Proxy の設定が空欄になっているのがわかる。

"Modified in: User" って書いてあるので、 User タブの内容で上書きされる動作をしてくれそうだったり、設定されてなかったら http_proxy, https_proxy の環境変数の値が使われると書いてあったりしているが、とりあえずその情報は無視。

この "Remote [WSL]" 上のプロキシの設定も、 User タブと同様に改めて記載して保存し、 vscode をリロードしてみる。

その結果、 WSL 上の拡張機能もインストールに成功するようになった！

まとめ

プロキシ環境下で WLS - Remote を使うときは、 Settings の "Remote [WSL]" タブにもプロキシの設定を書こう。
WSL 上の http_proxy, https_proxy の環境変数を設定しただけでは、 vscode の全ての通信をプロキシ経由にするには不十分のようだ。
- VS Code Server for WSL の更新のために、これらの環境変数は設定しておくべき。
- もしかしたら、 Windows 側の環境変数にも上記の値を設定させておけば、本問題が発生しないのかも知れないが、試していない。
vscode のプロキシ環境下の動作の作り込みは、まだまだ甘い。

Proxy 下で vscode の WSL 拡張へ接続できない

2019-10-09T11:02:59+09:00

Windows 上の Visual Studio Code (以下、 vscode) で、WSL 上のファイルやシェルを使えるようになる、 Remote - WSL 拡張機能。

これを、プロキシ環境下でインストールしたり更新したりすると、 vscode から WSL 環境ににアクセスするときに、

VS Code Server for WSL closed unexpectedly.
Check WSL terminal for mor details.

とエラーになってしまう。

WSL ターミナルのログを見てみると、だいたい以下のようになっていて、どうやら update.code.visualstudio.com から VS Code Server の更新版のファイルをダウンロードするのに失敗しているように見える。

Starting VS Code Server inside WSL (default distro)
Extension version: 0.39.5, Windows build: 17763. Multi distro support: disabled. WSL path support: enabled
Probing if server is already installed: C:\WINDOWS\System32\wsl.exe  -e sh -c "[ -d ~/.vscode-server/bin/3db7e09f3b61f915d03bbfa58e258d6eee843f35 ] && echo found || echo missing"
No server install found on WSL, downloading server on client side: C:\Users\user\AppData\Local\Temp\vscode-remote-wsl\3db7e09f3b61f915d03bbfa58e258d6eee843f35\vscode-server-linux-x64.tar.gz
Unable to detect if server is already installed: Error: connect ECONNREFUSED 104.42.78.153:443
Launching C:\WINDOWS\System32\wsl.exe sh -c '"$VSCODE_WSL_EXT_LOCATION/scripts/wslServer.sh" 3db7e09f3b61f915d03bbfa58e258d6eee843f35 stable .vscode-server 0  --disable-telemetry' in c:\Users\user\.vscode\extensions\ms-vscode-remote.remote-wsl-0.39.5
WSL version: 4.4.0-17763-Microsoft 
Updating server...
Updating VS Code Server to version 3db7e09f3b61f915d03bbfa58e258d6eee843f35
Removing previous installation...
Downloading:     
Failed
--2019-09-11 20:50:12--  https://update.code.visualstudio.com/commit:3db7e09f3b61f915d03bbfa58e258d6eee843f35/server-linux-x64/stable
Resolving update.code.visualstudio.com (update.code.visualstudio.com)... 104.42.78.153
Connecting to update.code.visualstudio.com (update.code.visualstudio.com)|104.42.78.153|:443... 
failed: Connection refused.
ERROR: Failed to download https://update.code.visualstudio.com/commit:3db7e09f3b61f915d03bbfa58e258d6eee843f35/server-linux-x64/stable to ~/.vscode-server/bin/3db7e09f3b61f915d03bbfa58e258d6eee843f35-xxxxxxxxxx.tar.gz
VS Code Server for WSL closed unexpectedly.
For help with startup problems, go to
[https://code.visualstudio.com/docs/remote/troubleshooting#_wsl-tips](https://code.visualstudio.com/docs/remote/troubleshooting#_wsl-tips)

どう解決したものか。

そもそも wget でダウンロードができる状態なのか

拡張機能の GitHub プロジェクト上の Issue によると、内部的には wget でファイルをダウンロードしているらしい。
https://github.com/microsoft/vscode-remote-release/issues/78
https://github.com/microsoft/vscode-remote-release/issues/79

.bashrc で http_proxy, HTTP_PROXY, https_proxy, HTTPS_PROXY 全ての環境変数にプロキシの URL を設定しているので、 wget に対してプロキシの情報は渡っているはずなのだが。。。

とりあえず WSL を起動して、書き込み権限がある適当なディレクトリで、エラーになっているファイルのダウンロードを wget https://update.code.visualstudio.com/commit:3db7e09f3b61f915d03bbfa58e258d6eee843f35/server-linux-x64/stable で試してみて、成功するか試してみよう。

私の場合、以下のような初歩的なミスでダウンロードに失敗していた。

HTTP_PROXY と HTTPS_PROXY の大文字の環境変数にしか設定しておらず、 wget がプロキシを認識してくれなかった。
curl とかはどっちでもイケるから、気づくのに時間がかかった。
何故か ~/.wget-hsts のパーミッションが 666 に書き換わっていて、 wget のセキュリティエラーでダウンロードに失敗している事があった。
カレントディレクトリが /mnt/c/ になっていて、ダウンロードしたファイルの書き込めなかった。

それでもダウンロードに失敗する

以下の記事によると、 Windows 側から WSL Remote の VS Code Server を起動するとき、 .bash_profile や .bashrc, .profile などを読んでくれないらしい。
https://github.com/microsoft/vscode-remote-release/issues/432
このため、環境変数でプロキシを設定しても反映されないようだ。

以下のどちらかを行うと、この問題を回避できる。

#79#issuecomment-503989625 のコメントのように、 ~/.wgetrc にプロキシの設定を書く。
- http_proxy と https_proxy だけ設定すればよいはず。 check_certificate = off をむやみに設定するのはセキュリティ上良くない。
いったんすべての VS Code を終了させ、 WSL のコンソール上で code と実行し、 Windows の VS Code を起動する。
- このとき、 WSL 側に Linux 版の VS Code がインストールされていると、そちらが起動してしまうのでダメ。

正直、どちらが良いかは一長一短だ。

.bashrc や .wgetrc などあちこちにプロキシの設定を書くと管理が大変だし、
VS Code Server が更新されるたびに WSL 側から VS Code を実行するのは手間だ。

幸い、 #79#issuecomment-504368316 によると、今後のバージョンでは VS Code Server のダウンロードを Windows 側で行うように更新する予定のようだ。
それまでの間は逐一 WSL 側から VS Code を実行する方法で回避するのでも良いかもしれない。

しかし、少なくとも現時点のバージョンである VS Code 1.38.0 + Remote - WSL 0.39.5 の組み合わせでは、そうなっていない。

hadolintでDockerfileの書き方を叱ってもらう(VSCode, CentOS)

2019-08-30T17:38:11+09:00

最近の開発環境はとても親切になっていて、コードの補完とか、良くないコードの指摘とか、もはや君が書いてくれたらいいんじゃない？と言いたくなるくらいいろんな機能が充実してきている。

順調に飼いならされているぼくは、いろんなツールに叱ってもらいながらコードを書くのが当たり前になっていて、そうすると、叱ってくれない箇所があるとむしろ不安になってしまう。

そんなわけで不安になるものの一つがDockerのファイルで、dockerfileとかはベストプラクティスがあるんだから、それに沿って書き方チェックしてくれたらいいのになーと思っていた。

そしたら、そういうのがあることを教えてもらった。

雑に書いたdockerfileやdocker-compose.ymlを添削してくれるサービスがほしい
— ﾅｶﾞﾓﾄ@Glideエンジニア (@ngmt83) August 26, 2019

lint?もしかしてと思ったらありました!https://t.co/oQqFRTYtI4
— ﾅｶﾞﾓﾄ@Glideエンジニア (@ngmt83) August 26, 2019

これは使ってみるしかない。すでに何人もの人が試していて日本語の記述もいっぱいあるので、ここではぼくの普段使っている環境 VSCode + CentOS での手順をメモ。

hadolintのインストール

公式サイトによると、

You can download prebuilt binaries for OSX, Windows and Linux from the latest release page.

ということなので、リリースページからダウンロードしてきたファイルをそのまま実行するのがいいらしい。

apt-getで入れないと不安になっちゃうけど、まあ新しいツールはそんなもんよね

[ ~]$ cd /usr/local/bin/
[ /usr/local/bin]$ sudo curl -L -O https://github.com/hadolint/hadolint/releases/download/v1.17.1/hadolint-Linux-x86_64
[sudo] daisuke のパスワード:
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   611    0   611    0     0   1615      0 --:--:-- --:--:-- --:--:--  1616
100 3216k  100 3216k    0     0   598k      0  0:00:05  0:00:05 --:--:--  678k
[ /usr/local/bin]$ sudo chmod +x hadolint-Linux-x86_64

試しに実行してみる

[ /usr/local/bin]$ hadolint-Linux-x86_64 ~/develop/dengen_map/docker/front/Dockerfile 
/home/daisuke/develop/dengen_map/docker/front/Dockerfile:3 DL3008 Pin versions in apt get install. Instead of `apt-get install ` use `apt-get install =`
/home/daisuke/develop/dengen_map/docker/front/Dockerfile:3 DL3015 Avoid additional packages by specifying `--no-install-recommends`

叱ってもらえる！

VSCodeから実行

VSCodeには、hadolint というプラグインが用意されている。これをインストールして、設定画面からhadolintのパスを設定する

そうすると、つぎからDockerfileを編集したときに、こんなふうに叱ってもらえるようになる！幸せ！もっと叱って！

いまのところ、docker-compose.ymlまでは見てくれないらしい。構文チェックだけでもやってくれるツールがほしいなあ。

VSCodeメモ書き

2019-06-15T11:16:12+09:00

バージョンアップするたびに機能増えるのはいいんですがちょっとこれどうすんのっていうのをメモ

ボードにしたほうがよかった気がする。

各バージョンのリリースノート

v1.35
v1.38

1.35

shell 切り替え

windows10環境で1.35.1だとpowershell(integrate console)がデフォルトで今までと同じくコマンドプロンプトにならないのか?って思ってたら、cfg書き直さなくてもターミナルのドロップダウンリストで選択できるようになった。

ターミナルの横にドロップダウンリストが表示されているので

選択を選ぶと使えるシェルが選択できる。WSL環境のbashまで選択肢に入ってる。
次回以降は、ここで選んだものがデフォルトになる。cmdを選ぶと次回以降もcmd

msのpowershell機能拡張(ms-vscode.powershell)を入れてるとPowershellは右下にpsengineのバージョンが表示される。

WSL側のファイルを編集する

WSLを使ったリモート開発の手順を実行するだけで、WSL側の環境を手軽に使えるようになって、非常に便利

Windows側のVSCodeにRemoteDevelopment機能拡張をインストールする

WSL側で

code .

といれるとWindows側のCodeが起動して必要なファイルを自動でダウンロードして接続してくれる。
ワークスペースが存在する場合は、

code ./[ワークスペースファイル.code-workspace]

で、ワークスペースを反映した状況で起動する

1.38

統合されたターミナル

teminal.integrated.cwd を使った際の動作を改善した。

次のようにcwd変数を使うように設定した場合

"terminal.integrated.cwd": "${fileDirname}"

変数が参照できなかった場合は、エラーを出す代わりにターミナルにエラーを表示して、ワークスペースのディレクトリに移動する

自動処理用シェルセッティング

統合ターミナルで、シェルのセッティングが追加されていて、
シェルの指定が可能になった。(例えばタスクなど)
特に便利なのは、tmuxのような自動処理の際に利用できないシェルを利用している場合。
In addition to setting the shell for the Integrated Terminal, you can now specify a shell for automation (such as Tasks). This is particularly useful if you use tmux as your shell since that doesn't work with all automation.

"terminal.integrated.shell.osx": "/Users/user/bin/tmux_script"
"terminal.integrated.automationShell.osx": "bash",

VSCodeのRemote DevelopmentでDocker内のPHPでデバッグしてみた

2019-06-08T10:30:51+09:00

VSCodeのStable版でRemote Developmentのプレビュー版が使えるようになったので先日Node.jsで試してみましたが、PHPのXdebugによるデバッグも試してみました。

Remote Developmentの拡張機能のインストールは下記の記事と同じです。

VSCodeのRemote DevelopmentでDocker内のNodeでデバッグしてみた

サンプルのプロジェクトをclone

PHPにもサンプルのプロジェクトがありますので、そちらをcloneしてきます。

git clone https://github.com/microsoft/vscode-remote-try-php.git

プロジェクトを開く

cloneしてきたフォルダを開いたら、下記のボタンをクリックしてRemote-Containers: Open Folder in Container...を選択します。フォルダを指定するとDockerイメージがビルドされ、コンテナの中でVSCodeが開き直され準備完了です。

デバッグする

基本的な準備はできたのでデバッグしてみます。下記のように、適当な箇所にブレークポイントを設置します。

デバッグをスタートするためF5を押すか、下記のようにデバッグメニューの実行ボタンをクリックします。

問題なければ下記のように停止し、変数の中身を見ることができます。

ブラウザアクセスでデバッグする

上記の方法だと、コマンドラインでの実行としてのデバッグになりますので、ブラウザでアクセスしてもブレークポイントで停止できません。そのため、サーバーとしての動作でも止められるように.vscode/launch.jsonのconfigurationsに下記のような設定を追加します。

        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000
        },

次にデバッグメニューでその設定を選択して起動します。するとXdebugのListenがスタートします。

次に、プログラムをサーバー起動させます。これでブラウザからアクセスできるようになります。

php -S localhost:8000

これでhttp://localhost:8000にブラウザアクセスすると先程の同様にブレークポイントで止まります。

まとめ

通常の開発にはあまり使わないかもしれませんが、フレームワークの中の処理を追いたいとか、APIやテストの開発時には便利そうですね。また他の言語も試してみたいと思います。

VSCodeのRemote DevelopmentでDocker内のNodeでデバッグしてみた

2019-06-06T22:53:45+09:00

VSCodeのStable版でRemote Developmentのプレビュー版が使えるようになったので試してみました。とりあえずDockerコンテナ内のNode.jsでブレークポイントを貼ってデバッグしてステップ実行したりするところを試しました。

基本的には下記のマニュアルどおりにやればいいのですがちょこちょこつまづいたり冗長な部分もあるのでとりあえず最小で試すところを書いてみます。

Visual Studio Code Remote Development

Remote Developmentをインストール

まずはRemove Developmentの拡張機能をインストールします。これをインストールするとSSH、コンテナ、WSL用の拡張機能も同時にインストールされます。

サンプルのプロジェクトをclone

下記がコンテナの場合のマニュアルです。

Developing inside a Container using Visual Studio Code Remote Development

ここに書かれているように、試す用のGitHubリポジトリがいくつか用意されています。Visual Studio Code用の設定や、Remote Development用の設定も含まれているため簡単に試すことができます。今回はこれを使って試していきます。Node.js用のvscode-remote-try-nodeというリポジトリをcloneしてきます。

ただ、2019/6/6現在Dockerイメージ作成でエラーになって失敗するようですので、.devcontainer/Dockerfileのベースイメージだけnode:10から下記に変更して最新のものがインストールされるようにしておきます。

FROM node

プロジェクトを開く

まずは普通にcloneしてきたフォルダをVSCodeで開きます。次に、下記画像のようにステータスバーの一番左にRemote Development用のメニューが追加されていますのでここでRemote-Containers: Open Folder in Container...を選択すると初回のみDockerイメージがビルドされ、そのイメージのコンテナ内としてVSCodeが開きなおされます。（ちなみにdocker-compose.ymlがあればそちらからの起動を選択したりもできるみたいです）

デバッグしてみる

準備はできたのでデバッグしてみます。まずはブラウザでページを開いた時の処理あたりにブレークポイントを貼ってみます。

左のメニューから虫のようなボタンを押してデバッグメニューを開きます。

緑色の実行ボタンを押すとデバッグが始まります。開始したら http://localhost:3000 にアクセスするとページ表示が始まり、先程のブレークポイントのところで停止します。ここでresやreqの変数などを見ることができたりします。おわったらVSCodeの上部に停止ボタンが出ているので止めます。

これで最小の確認は完了です。

TypeScriptの場合

おまけとしてTypeScriptの場合ですが、tsconfig.jsonでsourceMapをtrueにします。あとはts-nodeで実行するか、もしくはビルド用のタスクを作ってlaunch.jsonのpreLaunchTaskにそのタスクを指定すれば同様に試すことができます。

まとめ

この様な感じでDockerコンテナ内のシステムを使って動かすことができました。やはりデバッグやテスト実行が思いつく限り一番有用な気がしますが、他にも色々と便利な使い方はできそうな気がします。

個人的にはいろんなコンテナの処理を実行したいな、という場合もある気がするので中で起動するのではなくて一部だけ中で実行する、のような連携がもっと簡単にできればいいなぁと思いましたが、とりあえずPreview版ですので今後にも色々期待したいと思います。

PHPも下記で試してみました。
VSCodeのRemote DevelopmentでDocker内のPHPでデバッグしてみた

VSCodeのRemote Development機能が革命的な話。

2019-05-04T10:08:55+09:00

背景

今月始めにMicrosoftからRemote Development Extension Pack. というのが発表された。簡単に言うと、VSCodeでコードを書くOSとプラグインが実行されるOSを別にすることが出来る。

よくあるパターンで、「MacでNokogiriがビルドできません」「WindowsでESLintを実行するにはどうしたら良いですか」みたいな質問がある。
最終的にサービスを公開するときにはどうせLinux使うのに、開発するときしか使わない別のOSで同じものを動かす苦労って無駄だよなあ、と思っていた。

じゃあ最初からLinuxで開発すればいいかというと、最近の高度化したWeb開発はIDEの支援なしに実行することが困難で、RubyだったらRuboCop、JavaScriptだったらPrettierやESLintで文法チェックしてもらわないと人類にはついていけない。これらを動かすためには開発環境をIDEと同じOSで動かす必要があって、そのためには上記の質問に悩まないといけない...というのが実情だった。

そういう悩みを解決するのが、VSCodeのRemoteDevelopmentだ。VSCodeはWindowsやMacで動かしつつ、SSHやDocker、WSLなどで動作するLinuxマシン上にあるソースコードを編集し、linuxマシン上でプラグインを動かすことが出来る。つまり、Windows/MacにはVSCodeさえあればよくて、ほかは全部Linux上で実行することが出来る。もはやNokogiriのビルドに悩む必要がなくなる！

やってみた

インストール

やり方はここで解説されている。早速やってみた。
Remote Development with VS Code

Remote Developmentはまだベータ版の機能なので、実行するためにはInsiders というβ版を使う必要がある。これは既存のVSCodeとは別のアプリケーションとして動作して、既存の環境を壊さないのでむしろ便利かも。

インストールが完了したら、ExtenstionsからRemoteDevelopmentをインストールする。ブラウザで開いてInstallクリックすると既存のVSCodeの方に入っちゃうので注意。サイドバーのExtenstionから「Remote Development」と入力してインストールする

マシンに接続

Linuxマシンに接続する方法はいろいろあるけど、今回は既存のマシンにlinux接続することにした。Ctrl+Chift+P でコマンドパレットから"Remote-SSH: Connect to Host"を実行

WindowsのPuttyで接続を管理していると、その設定ファイルの内容をインポートしてくれる(！)

ハマりポイント：Linux側にtmuxが入っているとうまく接続できないので、bash_profile編集して外して上げる必要がある。

接続完了。Open Fileを選ぶと、linuxマシン上のファイルを編集することになっている。

プラグインを使う

ここまではSSH経由でファイルマウントしたりする機能を使えばできないこともなかったので、今までできなかったことに挑戦。

ExtenstionからESLintとPrettierをインストール。WindowsのVSCodeからインストールしても、linuxで実行したほうが良い機能はlinux側にインストールされる。なにそれすごい...

設定から、Format on Saveを有効に。

で、こういう許されないJavaScriptを書いて保存すると...

勝手に整形される。ぼくらが夢見ていた機能！WindowsにはVSCodeしかインストールしていないのにlinuxの機能が使える！

Prettierだけだと、ぶっちゃけlinux上で上書きされたファイルを読んでるだけのような気もするので、あとでESLintも試してみよう

まとめ

ということで、WindowsにインストールしたVSCodeからlinuxの開発ツールの支援を受けつつコードを書くことが出来るようになった。

さいきんMacイケてないと思わない？とかっこいいこと言ってSurfaceに移ったのだけど、パワー不足で仮想マシンを使うのが辛かったり、hyper-Vでlinux動かしてもESLintが使えなかったりして、やっぱりMacに戻らないと駄目かなあ、もうちょっとなんとか...と思っているところだった。

RemoteDevelopmentがあれば、ネットの向こうで実行しているlinux VPSに対してVSCodeの各種支援機能を実現することが出来る。こうなってしまえば、もはやWindowsであれが動かないこれが動かないと悩む必要がなくなる。

数年前まで、開発マシンをインターネットの向こうに置くと、通信環境が確保できないと開発できないのがネックだったんだけど、最近どこでも無線LAN使えるし、テザリングもあるので、SSHでつなぐ程度の回線で良ければほぼ人権レベルに確保できるようになってきた。

この先５Gのモバイル接続が普及すれば、インターネット上で開発する動きはますます加速することが予想される。そういう予想のもとに提供されたのがAmazonのCloud9だったんだけど、MicrosoftはVSCodeという強力なツールに機能を追加することで同様の機能をよりスマートに実現してみせた。

GitHubの買収、TypeScript、VSCodeの提供と、あっという間にWEB開発の主流を抑えつつあるMicrosoftが、唯一ネックだったIDEの実行環境を埋めるツールを出してきて、最近のMicrosoftはイケてるよね。