HarioNote

<p>EclipseではなくVSCodeで作業しつつTomcatサーバーを立ち上げたく、設定してみたのですがそのうち忘れそうなので備忘録として書きます。</p>
<h2>前提・注意点</h2>
<p>私の場合以下の環境であったり前提条件のもとで設定しているので、参考にされる場合は自身の環境や状況によしなに合わせてください。</p>
<ul>
<li>作業PCにTomcatがインストールされている。</li>
<li>Tomcatのwebapps下にプロジェクトフォルダが配置されている</li>
<li>タイトルにVSCodeとあるが、私の使用しているエディタはVSCodeをフォークしたCursolというものなので若干見た目が異なるかもしれない。</li>
<li>今回スクショで出てくるTomcatのバージョンが古いです。実際にサービスとして外部に提供する場合はサポートされているバージョンを使用するようにしてください。</li>
</ul>
<h2>設定手順</h2>
<h3>必要な拡張を追加する</h3>
<p>まずVSCodeに必要なプラグインを追加しておきます。<br>
必要なので以下の2つです。</p>
<p>1.<a href="https://github.com/Microsoft/vscode-java-pack"> Extension Pack for Java</a><br>
<img src="https://storage.googleapis.com/newt-files/07084b3e-005f-4697-9860-6c413ae7958d/2024-12-16_2.webp" alt="2024-12-16_2.webp"><br>
2. <a href="https://github.com/redhat-developer/rsp-server-community">Community Server Connectors</a><br>
<img src="https://storage.googleapis.com/newt-files/a97b9f64-f8a0-4417-a909-0c4fad98b45c/2024-12-16_1.webp" alt="2024-12-16_1.webp"></p>
<h3>サーバーを設定する</h3>
<p>VSCodeの左ペインに<code>SERVERS</code>という欄が現れていると思うので、そこで「Create New Server...」をします。<br>
そして「No, use server on disk」を選択します。<br>
<img src="https://storage.googleapis.com/newt-files/4b143ba1-f1ea-4ffa-bf80-567644ecd1d1/2024-12-16_3.webp" alt="2024-12-16_3.webp"><br>
<img src="https://storage.googleapis.com/newt-files/5ef8ea35-a29f-42d6-8bfe-acb46c8cc507/2024-12-16_4.webp" alt="2024-12-16_4.webp"><br>
<img src="https://storage.googleapis.com/newt-files/616ffdeb-2c8d-4adb-8738-025c9a00d228/2024-12-16_5.webp" alt="2024-12-16_5.webp"></p>
<p>フォルダ選択ダイアログが表示されるので、Tomcatサーバーがあるディレクトリを選択します。（binがあるところです）<br>
<img src="https://storage.googleapis.com/newt-files/d465c48c-cf27-4bde-9612-e5362b89c43a/2024-12-16_6.webp" alt="2024-12-16_6.webp"></p>
<p>選択すると新たに作成するサーバーの設定画面が表示されます。<br>
<code>Server Name</code>に任意の名前をつけましょう。<br>
<img src="https://storage.googleapis.com/newt-files/0b6457fc-12ed-4e95-a4fa-762c7b5251bf/2024-12-16_7.webp" alt="2024-12-16_7.webp"></p>
<p>必要に応じて<code>Optional Attributes</code>の<code>vm.install.path</code>を指定してあげましょう。<br>
<img src="https://storage.googleapis.com/newt-files/c3b49586-4678-4a7d-b42d-84281bf3a1bb/2024-12-16_8.webp" alt="2024-12-16_8.webp"></p>
<p>普段からTomcatを起動するのに個別に指定しているJVMがある場合は同じものを指定してあげましょう。<br>
「Configure Tomcat」を起動して、「Java」タブの「Java Virtual Machine:」で指定している値があればそれと同じものを指定すればokです。<br>
<img src="https://storage.googleapis.com/newt-files/b2d55570-436e-46bd-ad01-be5eb8b8d32b/2024-12-16_10.webp" alt="2024-12-16_10.webp"></p>
<h3>起動してみる</h3>
<p>作成したサーバーを右クリックして「Start Server」で起動してみましょう。<br>
<img src="https://storage.googleapis.com/newt-files/0dda91b4-b110-461e-85a6-bb5e094dac3a/2024-12-16_11.webp" alt="2024-12-16_11.webp"></p>
<p>特に問題がなければ、VSCode内のターミナルにて「Server  startup」的なログが表示されるかと思います。</p>
<p>これでVSCode上からTomcatを起動でき、ログ出力もVSCode内で確認できます。</p>
<p>以上。</p>


VSCodeからTomcatサーバーを起動できるように設定する手順の備忘録

<p>VSCodeをアップデートしたらstyled componentsの入力補完をしてくれている拡張機能が効かなくなったので、ダウングレードせずに解決できないかと調べたらできたのでその備忘録です。</p>
<p>ただ、今回の解決策はあくまでも私が試してうまく解消できた方法なので万人に当てはまるわけではありません。</p>
<h2>使用していたstyled componentsのコード補完の拡張機能</h2>
<p>使用していたのは「 vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)」です。<br>
<img src="https://storage.googleapis.com/newt-files/822f4a9b-906c-44bb-adf7-842d1153a252%2F2022-12-1046866.png" alt="2022-12-1046866.png"></p>
<p>↓こんな感じでstyled componentの定義内のcssの入力を助けてくれる便利なやつです<br>
<img src="https://storage.googleapis.com/newt-files/493861b4-b0c6-4f83-a1cd-a5c02e6c38a8%2F6541464653.png" alt="6541464653.png"></p>
<h2>試した解決策と結論</h2>
<p>結論から書かせてもらいますと、私の場合はVSCodeにインストールされていた「JavaScript and TypeScript Nightly」という拡張機能を取り除くことで解消することができました。</p>
<p>↓こちらです<br>
<img src="https://storage.googleapis.com/newt-files/e7f88aac-e340-487f-a7f0-d9d9fe10cdb8%2F6426454.png" alt="6426454.png"></p>
<p>拡張機能の欄から検索し、アンインストールをしVSCodeを再起動したら復活しました。<br>
これで快適な環境を取り戻せました。</p>
<h2>結論にたどり着くまでの経緯</h2>
<p>とりあえず色々ググったら<br>
↓こちらのissueにたどり着きまして、コメントを読み漁って解決方法にたどり着きました<br>
<a href="https://github.com/styled-components/vscode-styled-components/issues/354">https://github.com/styled-components/vscode-styled-components/issues/354</a></p>
<p>issue内のコメントでは、VSCodeの様々なversionや環境で発生していたり発生していなかったりの報告があったのですが、その中の1つにVSCodeのバージョンは変えずに拡張機能の組み合わせを細かく試した人がいて原因が「JavaScript and TypeScript Nightly」とであったと報告がありました。（本当に感謝。。。）</p>
<p>それでその拡張機能を検索したら私の環境にもインストールされていたので、アンインストールを試したらうまくいきました。</p>
<p>たどり着くのに時間がかかったので地味に疲れました笑</p>
<p>以上です。</p>


VSCodeをアップデートしたらstyled componentsの補完が効かなくなっていたので解消した【VSCode/拡張機能】

#VSCode拡張機能

VSCodeからTomcatサーバーを起動できるように設定する手順の備忘録

VSCodeをアップデートしたらstyled componentsの補完が効かなくなっていたので解消した【VSCode/拡張機能】