Vs Code windowsの環境構築覚書です。Macから同期しました。WindowsもWindows10からWindows11に移行しました。Windows11からMacbookの移転もあります。
node.jsの環境でnuxtなどを利用しています。
Contents
Vs CodeでMacとWindows11両方に同期する(PC引越し・移転)
移転先のPCでインストールを完了
基本として、移行先のマシンでもインストールを完了させておきます。
トップページから
other platforms > ダウンロードファイルを選ぶ
の方が良いかもしれません。リンク先はダウンロードファイルを選ぶページです。
例えば、MacならUniversalとIntel chipとApple silicon(M1移行のMac)の容量が違います。Windowsも同様です。
移転前のMAC・Windows
まず、今までの設定があるMac(Windows)で同期します。
Macの場合：
歯車アイコン > turn on settings sync > Backup and Sync Settings.(旧Settings Sync: Turn On)
Code > Preferences > Backup and Sync Settings.(旧Settings Sync: Turn On)
Windowsの場合：
歯車アイコン > turn on settings sync > Settings Sync: Turn On
File > Preferences > Settings Sync: Turn On
にも同じ設定があります。
Sign in > 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.
https://code.visualstudio.com/docs/editor/settings-sync
Accept Remote: Selecting this option will overwrite local settings with remote settings from the cloud.
ローカルの設定をリモートにあげたいときは[ 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もインストールが必要です。
推奨版をインストールします。
インストール前は次のエラーがでました。
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\npmC:\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番参考にしましたかね。
ありがとうございます。
[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\cmdUse 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\binUse 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つ増えています。
VS Codeのwindows11のエラー
windowsまわりででたエラーと解決策をめもしておきます。
Windows11でPowerShell-7.2.4のアップデート
新機能と改善のために最新の PowerShell をインストールしてください!https://aka.ms/PSWindowsWindowsででるメッセージです。バージョンを確認します。
$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. Checkpathを通してください。
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で管理者権限で保存できるようだ。
Make sure you configure your “user.name” and “user.email” in git.
新しいPCでGithubにコミットしようとすると、次のような表示される場合があります。
Make sure you configure your "user.name" and "user.email" in git.
[Open Git Log]
[Learn More]
[Cancel]新PCでは再度、usernameとメールアドレスの指定が必要そうです。旧PCと同様の名前とメールアドレスを使い回せばOKっぽいです。
git config --global user.name "username"
git config --global user.email "[email protected]"user.nameの変更
旧PCの名前を変更をしたい場合、次の手順でできます。
git config --global user.name "username"変更を確認。
git config --global user.name名前も含めてリストで確認。
git config --global --listご参考になれば幸いです。
コメント