Vs Code windows11とMacの同期(PC引越し・移転)/pathを通す

Vs Code windowsの環境構築覚書です。Macから同期しました。WindowsもWindows10からWindows11に移行しました。Windows11からMacbookの移転もあります。

node.jsの環境でnuxtなどを利用しています。

1 Vs CodeでMacとWindows11両方に同期する(PC引越し・移転)
2 Windows11にVS Codeをインストール/環境構築
- 2.1 VSCodeのインストール設定
- 2.2 Vs Codeのワークスペースの使い方
3 windows10、windows11でvs codeのpathを通す
4 MacからWindows11の環境を移行したらVsCodeのビルドができない
5 VsCodeのWindows11でgitをインストール
- 5.1 名前とメールアドレスを指定してコミット
6 windows11でVS Codeを使う際に必要な拡張機能
- 6.1 相対パスを取得すると/(スラッシュ)ではなく\(バックスラッシュ)になる
7 VS Codeのwindows11のエラー

Vs CodeでMacとWindows11両方に同期する(PC引越し・移転)

移転先のPCでインストールを完了

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

トップページから

other platforms > ダウンロードファイルを選ぶ

の方が良いかもしれません。リンク先はダウンロードファイルを選ぶページです。

Download Visual Studio Code - Mac, Linux, Windows

例えば、MacならUniversalとIntel chipとApple silicon(M1移行のMac)の容量が違います。Windowsも同様です。

移転前のMAC・Windows

まず、今までの設定があるMac(Windows)で同期します。

歯車アイコン > turn on settings sync > Settings Sync: Turn On

Code > Preferences > Settings Sync: Turn On(Macの場合)

File > Preferences > Settings Sync: Turn On(Windowsの場合)

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

> Sign in with Github > Authorize Visual-Studio-Code > Open

と続けます。

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

認証コードが届くため認証してあげて、openします。同期が開始します。

移転前のMAC・Windowsが同期された確認する

Code > Preferences > Settings Sync: Turn On(Macの場合)

File > Preferences > Settings Sync: Turn On(Windowsの場合)

を再び選びます。コマンドパレットが開くため、

Setting Sync Show Synced Dataを選ぶと確認できます。

実際にVsCode側で拡張などを調べても追加されていることがわかります。

移転後のMAC・Windows

次に何も設定がないWindowsで同期します。何もない方を先に同期しても何も変わりません。手順は同様です。

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

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

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

Udemyで「ざっくり学ぶ、Visual Studio Codeの使い方講座」という講座がでている方ですね。

Udemy

Dropboxなどで同期している場合

Dropboxなどのストレージに同期している場合、移行先のPCでファイルをダウンロードしておきます。ファイルが見つからず大量にエラーが出るため。

Dropboxの場合、右クリック > オフラインのアクセスを許可
VsCodeで開く

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

インストールしたてのVsCodeなら問題ありませんが、何らかの都合で先にちょっといじっていると、、

異なる環境になり、コンフリクトする場合があります。

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に含まれているのかなダークモードとライトモードも統一されましたよ。

Globalのインストールに注意

npmからglobalでインストールしたものは、新しい環境で入っておらずエラーが表示される場合があります。インストールしましょう。

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

VSCodeのインストール設定

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

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

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

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

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

Udemyで「ざっくり学ぶ、Visual Studio Codeの使い方講座」という講座がでている方ですね。ワークスペースの項目は無料で見れます。

Udemy

windows10、windows11でvs codeのpathを通す

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

node.jsのインストール

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

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

https://nodejs.org/ja/

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

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回目から早くなりました。

VsCodeのWindows11でgitをインストール

MACのときはxcodeの付属でデフォルトで入っていましたが、Windowsが入っていませんでした。インストールしました。

VsCodeに[Download Git for Windows ]から公式サイトに飛ばれてました。
ダウンロードすると、64bitを自動で判断してくれました。
インストールは長いですけど順番にやっていけば終わります。

3つぐらいの記事を参考にインストールを進めましたが、こちらの記事を1番参考にしましたかね。

Windows10にGitをインストール

ありがとうございます。

[Adjusting the name of the initial branch in new repositories]だけブランチはまだmasterのものしかなかったため、Let Git decideにしました。あとは一緒です。

環境変数は次のように追加されるようです。

Git from the command line and also from 3rd-party software

C:\Program Files\Git\cmd

Use Git and optional Unix tools from the Command Prompt

C:\Program Files\Git\cmd
C:\Program Files\Git\mingw64\bin
C:\Program Files\Git\usr\bin

Use Git and optional Unix tools from the Command Promptを選択すると、Windowsの基本コマンドにも影響があるようで避けました。

名前とメールアドレスを指定してコミット

Macで使っていたため、そのままコミットできる状態したが、名前とメールアドレスの設定が必要でした。

次の手順でうまくいきました。

git --version // バージョンを確認
git remote -v // パスを確認

コミットしようとするとエラーが発生。

Make sure you configure your ‘user.name’ and ‘user.email’ in git.

ローカルとグローバルがありますが、名前とメールアドレスはグローバルがよさそうです。

git config --global user.name "username" 
git config --global user.email "email"
git config --global --list // 確認
git config -l --show-origin // 全確認。こちらqで抜けます。

windows11でVS Codeを使う際に必要な拡張機能

相対パスを取得すると/(スラッシュ)ではなく\(バックスラッシュ)になる

この拡張で解決です。地味だけど素敵な拡張。右クリックしたときメニューが1つ増えています。

Copy Relative Path Posix - Visual Studio Marketplace

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で管理者権限で保存できるようだ。

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