【M5Stack】VSCodeの開発環境構築(写真で丁寧に解説)

m5stack-development-environment-for-vscode

こんにちは、クマベです。
この記事では、Visual Studio Code(VSCode)の環境構築をおこない、M5Stackの開発準備について説明します。

Visual Studio Code とは

「Visual Stduio Code」は、便利な高機能エディタです。
主にプログラムの作成や編集、管理に利用されます。

様々なプログラム言語に対応しているので、たくさんの用途で活用できます。
本格的にプログラムを始めようとしている方なんかにオススメです。

エディタは様々ありますが、そのなかでもトップクラスに使いやすいと思います。
筆者も現役で使っています。

Visual Studio Code

Visual Studio Codeの導入

STEP
下記の公式サイトから「Visual Studio Code」を取得
あわせて読みたい
Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code edit...
STEP
パソコンの環境に合わせてソフトを選択
install-vscode

※ここでは「Windows10 64bit」環境での方法を紹介します

STEP
ダウンロードしたソフトを起動
click-to-vscode
STEP
「同意する」
vscode-agree
STEP
手順通りに進めていく
vscode-add-task
STEP
インストール完了
vscode-install-end
STEP
ソフトの起動

はじめは下記のような表示がされますので、「信頼します」を選択しましょう。

vscode-trust

Visual Studio Codeの初期設定

STEP
日本語設定

左のメニューバーから「拡張機能」を選択します。

vscode-external
STEP
Japanese Language Pack for Visual Studio Codeのインストール

検索窓から「japanese」と入力して、手順通りにインストールします。

vscode-japanese
STEP
インストール完了

右下の「Restart」を選択すると、ソフトが再起動し、日本語設定になります。

vscode-japanese-restart
STEP
C言語のインストール

上記の日本語設定と同様に、C言語もインストールします。

vscode-c

PlatformIO IDEの導入

STEP
PlatformIO IDEの取得

検索窓から「platform」と入力して、手順通りにインストールします。

vscode-platformIO
STEP
インストール完了

右下の「Reload Now」を選択すると、ソフトが再起動し、インストールされます。

vscode-platformIO-install
STEP
プロジェクトの作成

手順通りに進めて、「+ New Project」を選択します。

vscode-platformIO-open
STEP
ファイルの設定

Name:ファイル名(HelloWorld)
Board:書き込むM5Stackシリーズ(本記事ではM5Stack FIREに設定)
Framework:フレームワーク(Arduino)

vscode-platformIO-new-project
STEP
プロジェクト作成の完了

boardの部分は、上記で設定した名前になります。

vscode-platformIO-set
STEP
M5Stackのライブラリを導入

1度ホームに戻り、「Libraries」を選択します。

vscode-platformIO-add-project
STEP
M5Stackのライブラリを検索

検索窓から「M5Stack」と入力して、ライブラリを検索します。

vscode-platformIO-m5stack-library
STEP
プロジェクトとライブラリの紐付け

作成したプロジェクトを選択することで、ライブラリを使うことができます。

vscode-platformIO-m5stack-add
STEP
ライブラリの設定完了

正しく設定されていれば、下記のようにM5Stackのライブラリが表示されます。

vscode-platformIO-m5stack-add-check

M5Stackへの書き込み

STEP
サンプルプログラムの作成

「main.cpp」のファイルに、下記のようなサンプルプログラムを入力します。

vscode-platformIO-m5stack-helloworld
STEP
パソコンとM5Stackを接続

M5Stackシリーズ付属のケーブルを使用して接続します。

m5stack-setting
STEP
プログラムのビルド

成功すると「SUCCESS」と表示されます。
プログラムに間違いなどがあると、進まない可能性があります。

vscode-platformIO-build
STEP
ソフトの書き込み

成功すると「SUCCESS」と表示されます。
パソコンとM5Stackがうまく接続されていないと、進まない可能性があります。

vscode-platformIO-m5stack-upload
STEP
書き込み成功

正しくプログラムを書き込めると、下記のように「Hello World」と表示されます。

m5stack-helloworld

おわりに

以上で終了となります。お疲れさまでした!

本記事では「Visual Studio Code」で「M5Stack」シリーズにソフトを書き込む方法を紹介しました。
この手順を踏めば、あとは自由にプログラムを作成し、M5Stackで試せることができます!

次回は拡張モジュールを使った電子工作などをご紹介していきます。

よかったらシェアしてね!
  • URLをコピーしました!