Vs Code windows11のインストール/環境構築(Macとの同期)

プログラミング学習

Vs Code windowsの環境構築覚書です。Macから同期しました。windowsもwindows10からwindows11に移行しました。node.jsの環境でnuxtなどを利用しています。

Vs CodeでMacとWindows11両方に同期する

移行先のマシンでもインストールを完了させておきます。

歯車アイコン > turn on settings sync > Settings Sync: Turn On > Sign in with Github > Authorize Visual-Studio-Code > Open

同期はマイクロソフトアカウントも選べますが、githubもマイクロソフト傘下かつ普段よく使っているためgithubにしました。

File > Preferences > Settings Sync: Turn On

にも同じ設定があります。

まず、今までの設定があるMacで同期し、次に何も設定がないWindowsで同期します。何もない方を先に同期しても何も変わりません。

エラーがでましたが、yesで問題ないでしょう。同期には多少時間がかかるようです。

You have not yet finished authorizing this extension to use GitHub. Would you like to keep trying?

詳しい解説はこちらの動画がわかりやすいです。

Udemyでも講座がでています。

ざっくり学ぶ、Visual Studio Codeの使い方講座

Vs Codeの同期におけるコンフリクトの解消

Replace Localはローカル設定を上書きのようです。基本マージしてコンフリクトを解消するみたいな使い方ですかね。

settings.jsonあたりがコンフリクトしやすいです。

Accept Local: Selecting this option will overwrite remote settings in the cloud with your local settings.
Accept Remote: Selecting this option will overwrite local settings with remote settings from the cloud.

https://code.visualstudio.com/docs/editor/settings-sync

ローカルの設定をリモートにあげたいときは[ Accept Local ]を押して[Turn on Settings Sync]を押します。[Accept Remote:]は逆です。

同期後、念のためsetting.jsonやエクステンションの数などを確認します。たぶんuiに含まれているのかなダークモードとライトモードも統一されましたよ。

スポンサーリンク

Windows11にVS Codeをインストール/環境構築

VSCodeのダウンロード

VSCodeのインストール設定

インストールはただすればいいだけですが、時若干迷うのはこの設定です。

エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する
エクスプローラーのディレクトリコンテキストメニューに[Codeで開く]アクションを追加する
→右クリックはあったほうが便利なのでチェックをいれました。

サポートされているファイルの種類のエディターとして、Codeを登録する
→ダブルクリックで開けます。

PATHへの追加(再起動後に使用可能)
→コマンドプロンプトから実行が可能

Vs Codeのワークスペースの使い方

Udemyで講座がでています。ワークスペースの項目は無料で見れます。

ざっくり学ぶ、Visual Studio Codeの使い方講座
スポンサーリンク

windows10、windows11でvs codeのpathを通す

windowsはpathを通す作業が必要です。

node.jsのインストール

node.jsを使っています。Macと同様、Windowsもインストールが必要です。

推奨版をインストールします。

インストール前は次のエラーがでました。

node -v
node: The term 'node' is not recognized as a name of a cmdlet, function, script file, or executable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.

インストール時にnote.jsのpathを通す

node.jsはインストールする際にデフォルト設定で勝手にpathが追加されます。チェックを外さないようにしましょう。

Node.js and npm システム環境変数に追加
npm modules npmをユーザー環境変数に追加

上記の2つはチェックをいれましょう。

ユーザー環境変数とシステム環境変数、別々に追加されます。

C:\Users\username\AppData\Roaming\npm
C:\Program Files\nodejs\

次の場所に2つの設定があります。

Windowsのアイコン > 検索バーに「コントロールパネル」と入力 > システムとセキュリティ > システム > システム詳細設定 > 環境変数 >編集

node -vでバージョン確認ができるはずです。

windows10、windows11でpathを上書きせず複数設定する方法

通常の指定方法は以下のとおりですね。(追記)windows10からwindows11にアップデートしました。やり方は一緒でした。

Windowsのアイコン > 検索バーに「コントロールパネル」と入力 > システムとセキュリティ > システム > システム詳細設定 > 環境変数 > 新規

しかし、個人的にはffmpegなどの動画コーディックでもpathを使っているため、上書きしてしまいました。。

複数指定する場合はセミコロンで区切りますが、Windows10からはuiが改善されて編集モードで複数指定できるようになりました。

Windowsのアイコン > 検索バーに「コントロールパネル」と入力 > システムとセキュリティ > システム > システム詳細設定 > 環境変数 >編集

あとはこのようにインストール先を指定すればいいだけです。あくまで例で今はこの方法は使っていません。

C:\Program Files\nodejs

ちなみに、環境変数は大文字と小文字が混在している場合もありますが、PATH と Path は同一のものであり区別はしていません。気分的には揃えておきたいですけど…。

スポンサーリンク

MacからWindows11の環境を移行したらVsCodeのビルドができない

npm run buildやnpm run devをすると、次のエラーがでます。どうやら全般的にビルドできないようです。

'nuxt' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

pathが通っていないのでは?と、ぐぐるとnode.jsをpathが通っていないみたいな説明が多くてそっちを追ってしまうと時間を無駄にします。

ビルドだけできないのはpackage.jsonに定義する環境変数の問題です。

簡単に言うとMacとWindowsでpackage.jsonに定義する環境変数の書き方が異なるため起こります。

https://harionote.net/2021/12/29/%E3%80%90react%E9%96%8B%E7%99%BA%E3%80%91windows%E7%92%B0%E5%A2%83%E3%81%A7%E3%80%81npm-run-%E3%80%87%E3%80%87%E3%81%97%E3%81%9F%E3%82%89%E3%80%8Cxx-%E3%81%AF%E3%80%81%E5%86%85%E9%83%A8%E3%82%B3/

cross-envを使うと解決できます。cross-envはnpmスクリプトにおいて環境変数を指定する際に便利なパッケージ。もしくはsetをつけるか(こっちは未検証)

cross-envは初回ビルドが遅いみたいだけど、2回目から早くなりました。

スポンサーリンク

VS Codeのwindows11のエラー

windowsまわりででたエラーと解決策をめもしておきます。

Windows11でPowerShell-7.2.4のアップデート

新機能と改善のために最新の PowerShell をインストールしてください!https://aka.ms/PSWindows

Windowsででるメッセージです。バージョンを確認します。

$PSVersionTable

メッセージにあるリンク先からインストールします。

PowerShell-7.2.4-win-x64.msi

MSIインストーラー版はMicrosoft Updateによる更新がサポートされるようになったようです。インストール方法はたくさん紹介したサイトがあったため割愛します。

用語 ‘npm’ は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。

用語 'npm' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。名前が正しく 記述されていることを確認し、パスが含まれている場合はそのパスが正しいことを確認してから、再試行してください。
npm: The term 'npm' is not recognized as a name of a cmdlet, function, script file, or executable program. Check

pathを通してください。

npm WARN config global `–global`, `–local` are deprecated. Use `–location=global` instead.

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

Windows特有のエラー。npmを最新にすれば改善されるような情報もあったが、改善されなかったため、こちらの方法で対処! なお、Program Filesをいじるため、保存する前に変更の確認される。Windows11はRetry as Adminで管理者権限で保存できるようだ。

コメント

タイトルとURLをコピーしました