Nordic nRF5340 PDKを使おう～nRF Connect for VS CodeをセッティングしてVisualStudioCodeで使う～

Nordicがサポートするのエディタ・ビルドツールがSegger Embedded StudioからVisual Studio Codeに変更されます。
この為、__Nordic nRF5340 PDKを使おう　～nRF Connect SDKをインストールしてSegger Embedded StudioでZephyr OSを使おう～__
https://qiita.com/usashirou/items/e4759cdf172199d667fc
の続編として　__nRF Connect for VS Code__　のセットアップ方法をまとめました。
## Video tutorials
https://www.youtube.com/playlist?list=PLx_tBuQ_KSqEt7NK-H7Lu78lT2OijwIMl
## nRF Connect for VS Codeをインストールする
https://www.nordicsemi.com/Products/Development-tools/nRF-Connect-for-VS-Code/Tutorials
最初に __nRF Connect for Desktop__ と __nRF Command Line Tool__ をインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/5bfa803e-431e-37df-158f-6c2a48c81ea3.png)
## nRF Command Line Toolsをインストールする
最新のものをダウンロードしました。
https://www.nordicsemi.com/Products/Development-tools/nRF-Command-Line-Tools/Download?lang=en#infotabs
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/7a6b7aa7-e832-49b5-204b-b752073d10dc.png)
インストールを次へ次へで進めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/961bd3aa-58c8-498e-1672-a5b0f600c411.png)
![スクリーンショット 2022-03-26 175643.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/dbf5ac90-bc84-a69d-0cab-fd161471bfca.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/954fe475-d34a-f24c-be99-ee4651c224f6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4df08fc1-29f4-19c9-a1f1-cd9dea058a76.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/18b7bb11-eb95-d8d7-86cf-34c4106cad31.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/dadaa869-5fd0-27ca-a91a-d51e725f1c6e.png)
![スクリーンショット 2022-03-26 175809.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/1de3c370-32d7-2e52-944a-22853065af1d.png)
![スクリーンショット 2022-03-26 175824.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/92462343-3269-35b9-493c-bc7b2a1440c5.png)
## nRF Connect for Desktopをインストールする
こちらも最新のものをダウンロードしました。
https://www.nordicsemi.com/Products/Development-tools/nRF-Connect-for-desktop/Download#infotabs
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/887c9237-26f6-a0d2-c67c-75f0b4c60b3e.png)
![スクリーンショット 2022-03-26 175856.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/ab7a42d1-48dc-42e6-da13-a2f4dad93038.png)
J-Linkなどのドライバをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4dcf8051-47a2-6510-1cd4-f91fcd63691a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/811440ec-b495-2c4c-3460-bffa297a4299.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/2ed6a554-1d19-824f-4d7f-4c49d3bcff88.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/5be8c3b0-db5d-e2c0-5a54-6d462ce1aa69.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/e802766f-61f9-89b6-b3cd-cffdb8feb1fc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/19d643a7-da95-d3fa-c853-ffc938cff63b.png)
![スクリーンショット 2022-03-26 180048.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/c38dbf7b-ed12-6993-5cf7-0485ff92e3a0.png)
![スクリーンショット 2022-03-26 180124.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/65a0b5b1-8be5-a290-f686-e25625893756.png)
![スクリーンショット 2022-03-26 180219.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/40941130-b0ef-d40c-562a-ddfaa05628c5.png)
__nRF Connect for Desktop__ を立ち上げます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/f6fa8dc1-d7cd-8f57-f1ce-166c8e769779.png)
## Toolcahin Managerをインストールする
 __nRF Connect__ を起動し、最初に __Toolcahin Manager__ をインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/dc364458-a841-f54d-9e62-e50036235c4a.png)
__Install__ をクリックします。
インストール完了後 __Toolcahin Manager__ の __OPEN__ をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/3721a382-ab8e-9811-7f25-9b710ea72417.png)
## nRF Connect SDKをインストールする
クリックすると __nRF Connect SDK__　のインストール画面になります。
ここで __nRF Connect SDK__ を選定し __Install__ をクリックします。(今回は最新のものをインストールしました）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/bc511367-9455-d1ec-acc9-e1e27b75b110.png)
__Continue Installation__ をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6c5d2b43-73ea-d9c0-3b37-2bff7d238f41.png)
## Visual Studio Codeをインストールする
__Visual Studio Code__ をインストールしていない人はここでインストールします。
使用するOSに対応したインストーラーをダウンロードします。
### https://code.visualstudio.com/download
![スクリーンショット 2022-03-26 174732.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/1375d8b7-6a2c-1dbe-7bc8-707d7ea00cc4.png)
次へ次へでインストールしていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/a84c849d-5662-3016-85fe-79a5ce9ef712.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/52692508-d174-b8b9-334b-265ca17491fd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/bc0e27f5-0306-7bbb-6288-f089d33e881f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6a7d89f7-49a3-4285-b1ba-414f278f2193.png)
![スクリーンショット 2022-03-26 174922.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/af049aaf-dcdf-c3ce-97ec-021ffda3a258.png)
![スクリーンショット 2022-03-26 175019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/812b09af-fecb-d808-4001-02d1fb2ff5de.png)
__Toolcahin Manager__ から __Open VS Code__ をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/0a48fc9a-59d1-f748-7ab9-91660ed0bfdc.png)
![スクリーンショット 2022-03-26 181347.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6fbc9452-9934-ea95-43e2-8830c9750ae9.png)
__Install missing Extensions__ をクリックし、必要なアプリケーションをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/3044c949-4392-b911-5174-0699860c4a1a.png)
セキュリティ警告が出たら __アクセスを許可する__ をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/cebc6767-395e-537c-fe20-8729db4e156f.png)
最後に __Open VS Code__ をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/82aaa5cf-9a56-e286-f0cf-a6ee39f70fcb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/8df54b03-97f4-08e1-362f-b1383c9941f2.png)
__VS Code__ にすでに __nRF Connect for VS Code__ がインストールされていますが無効になっている場合は有効にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/d44e59ca-4198-3eca-35d6-478dc49be6fa.png)
セキュリティアイコンをクリックし、 __信頼する__ をクリックして使えるようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6a221efd-4872-9a62-170f-60d55b4ffeea.png)
__アクセス許可する__
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/566df5f3-640f-d861-bc48-0531d5124907.png)
__nRF Connect SDK__ のパスを設定します。
プルダウンにインストールされているライブラリが表示されている場合はこのまま進みます。
表示されていない人は一つ下の __nRF Connect for VS Codeがインストールされていない場合__ に進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/43b4b340-6fb0-f440-9814-b5d59e7dd6ac.png)
## nRF Connect for VS Codeがインストールされていない場合
拡張機能に __nRF Connect for VS Code__ をインストールします。
__Nordic__ を検索し __nRF Connect for VS Code__ を選択しインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/d03132b2-3f2d-8f4a-26cb-a3d94542a6d2.png)
## VS CodeにnRF Connect for VS Codeを設定する
__Welcome__ ページから __nRF Connect SDK__ を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/3a5c66ff-8223-23b9-373c-0877bc7bcae7.png)
__Toolcahin Manager__ の __nRF Connect SDK__ の▼をクリックし、 __SDK__ と __toolchain__ の場所を探します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/e4df57cf-e726-8fe6-0ad1-ea1d22772cdb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4f07dc84-4e2b-4a50-f2af-4d705b8e4196.png)
__PATH__ を指定し使えるようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/a9af5706-58e0-ea4d-b003-d7ed3a88c8df.png)
## サンプルプログラムを作る
　__Create a new application from sample__ をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4aa509c3-937f-00c2-f923-eebb7579221e.png)
__SDK__ と __Toolchain__ のパスが通っている事を確認します。
作成するフォルダを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4a22068f-0e84-f8e3-1d57-4b049579e846.png)
 __Application location__、 __Application template__ を選択し、__Create Application__ をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4537c822-bd94-bd55-7d19-150d7be64902.png)
セキュリティ警告が出るので、 __はい、作成者を信頼します__ をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/3d7fd3d3-998a-c502-c57f-93379c6abbbb.png)
 __APPLICATIONS__ に作ったものが存在することを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/c72fa467-74d5-9daf-5ce8-100cbe95ca1f.png)
 __Show in Explorer__ をクリックすると、プログラムを見る事が出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/ad435f34-bc19-a47a-6abc-8deb731841e0.png)
![vs-code-10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/a9b1c977-78ba-334f-21eb-9fb1b3d01ecf.jpeg)
## サンプルプログラムをビルドする
アイコンをクリックし __Add Build Configuration__　を設定します。
 __Board__ 及び必要な項目を設定します。
 __Enable debug options__ をクリックするとデバック内容が表示されるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/02a4ddeb-7722-2333-61fc-443666581736.png)
ビルドが終わった状態です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4d94ed0d-6907-ad64-25a8-60e5e32cda1b.png)
## ファームを書き込む
VS Codeではビルドしたファームは自動書き込みされないようです。
__CONNECTED DEVICES__ の右のアイコンをクリックし、接続しているデバイスを探します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/9fb563ef-0718-e227-0dde-41fd0878c7f0.png)
__Flash__ をクリックし書き込みをします。
VS Codeはネイティブでターミナル機能がついており出力内容を表示することも可能です。
__CONNECTED DEVICES__ をクリックすると右上の __choose cinfiguration__ に通信速度等が表示されています。
これをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/83eac419-42b5-1cdb-acfd-2726a466dd23.png)
右下の __NRF TERMINAL__ に __Hello World!__が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/c943b915-f4dd-baf8-0239-a2afdd0fa7c0.png)
以上でVisualStudioCodeにてNordicSoCのプログラムを作る事が出来るようになりました。