Nuxt+ESLint+PrettierとVSCodeでいい感じにやりたい2021

以前書いた記事の内容が古くなっていたため、今のやり方をメモしておこうと思い、記事にしました。

前提

WindowsでNuxtによるWebアプリ開発をする。NodeはローカルにインストールしたくないのでDockerを使う。エディタとしてVSCodeを使い、コード整形や構文チェックもしたい。

続きを読む →

Nuxt.jsアプリをEdgeHTMLで動作確認しようとしてはまった話

お仕事で使うHTMLベースのアプリを趣味で(?)Nuxtで作ってたんですけど。私はChromeで動けばええやろという感じでいたんですが、Edge(レガシー)で動かんぞみたいな報告を度々されるんですね。しかし開発環境はすでに新Edgeになってしまっていて、動作確認できない。

というわけでMicrosoftのサイトにある動作確認用の仮想マシンを使うことに。今回はHyper-V版をダウンロード。

さて、仮想マシンを起動して、EdgeのアドレスバーにIPアドレス:ポートを入力してもなぜか繋がらない。これで1時間ほど嵌ってました。結局原因は、デフォルトではnuxtがローカルホストからの接続しか受け付けないようになっているからで、ちゃんとドキュメントに書いてあるんですね。ちゃんとドキュメント読もう。それかExpressとか他のサーバを立ち上げて接続確認していればもっと早く気付けたかもしれない……。しょうもないことで時間を浪費してしまったので反省の意味を込めて文章書いてます。

Hyper-Vの仮想ネットワークについてよくわかっていなかったこともあり、内部用の仮想スイッチやNICを追加したりしてたんですけど全部無駄で、標準の設定で大丈夫でした。

VSCode(win)でコンテナ内のNuxt開発環境のESLintでコード整形

※2021.8.3追記:本ページの内容は若干古くなってしまったので、別の記事に書き直しました。

とりあえずできたのでメモメモ。Remote Development (VSCode Remote – Containers) を使います。

続きを読む →