HEWプロジェクトをVSCodeで扱う

# HEW使いづらい！！！！！
エディタが使いづらいです！！(個人差あり)
VSCodeでいじれるようにしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/a7ebda5a-d909-465f-1c6b-f062e5cee340.png)

# はじめに
この記事では3段階のステップをわかりやすくするために用語を定義しています。以下をご覧ください。

- ホップ - 最初に1回行ってください。
- ステップ - 各ワークスペース(`.hws`があるディレクトリ)ごとに1回行ってください。
- ジャンプ -  各プロジェクト(`.c`があるディレクトリ)に対して1回行ってください。


# ホップ
最初に1回行ってください。

## HEWのパスを通す
**HEWがインストールされているディレクトリのパスを通してください。**
(おそらく`C:\Program Files (x86)\Renesas\Hew`)
パスを通さなくても一応できますが、**通すことをおすすめします。**
パスの通し方は**[こちら](https://qiita.com/BonyChops/items/a56ea9d0194a9992fd16)**をご覧ください

## `.vscode`ディレクトリを作成する
- `C:\Workspace(HEWのワークスペース)`に`.vscode`ディレクトリを作成する。  
ここに置く`.vscode`は、実際に使う用ではなく、のちの各ワークスペースにコピーするためのものです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/9b70986d-4ba1-f9f7-d715-f0d9821a1d69.png)

- `C:\Workspace\.vscode`に`tasks.json`と`settings.json`を置く
    - 以下に僕が頑張って定義したものをおいておきます。  
      このとき、**HEWディレクトリのパスを通していない場合**、`tasks.json`の`"command": "hmake",`を、`"command": "{HEWのインストールディレクトリ}\\hmake"`へ変更してください。  
(`"command": "C:\\Program Files (x86)\\Renesas\\Hew\\hmake"`)  
[こちらからもどうぞ(GitHub Gist)](https://gist.github.com/BonyChops/e2c1e11d97cefb7b53b8eff80a5f47af)

```settings.json
{
    "files.encoding": "shiftjis",
    "C_Cpp.default.includePath": [
        "C:\\Program Files (x86)\\Renesas\\Hew\\Tools\\Renesas\\Sh\\9_4_3\\include",
        "${default}"
    ]
}
```


```tasks.json
{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "shell",
			"label": "HEW: hmake build active file",
			"command": "hmake",
			"args": [
				"${fileBasenameNoExtension}_Debug.mak",
				"CONFIG=Debug"
			],
			"options": {
				"cwd": "${workspaceFolder}\\make"
			},
			"group": {
				"kind": "build",
				"isDefault": true
			},
			"problemMatcher": {
				"owner": "cpp",
				"fileLocation": [
					"relative",
					"${workspaceFolder}\\make"
				],
				"pattern": {
					"regexp": "^(.*)\\((\\d+)\\) : (.*)$",
					"file": 1,
					"line": 2,
					"location": 2,
					"message": 3
				}
			}
		}
	]
}
```

# ステップ
各ワークスペース(`.hws`があるディレクトリ)ごとに1回行ってください。

- `.vscode`ディレクトリをコピー
    - `C:\Workspace\.vscode`を`C:\Workspace\{ワークスペース名}\`へコピーしてください。おわり。

# ジャンプ
各プロジェクト(`.c`があるディレクトリ)に対して1回行ってください。

- HEWでMakeファイルを作る
    - **忘れがちです**。各プロジェクトごとに行いましょう
      1. `.hws`を開く
      2. VSCodeに移行したいプロジェクトをアクティブプロジェクトに設定する。(**太字**になっていればすでにアクティブプロジェクトに設定されています)  
      ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/f11e4d17-3320-bcf4-1eae-34bfa0faacf7.png)  
     3. 「ビルド(B)->Makeファイルの作成(G)...」から、Makeファイルの作成  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/5e0ee56e-b364-a109-3060-2be99fd2d51e.png)  
Makeファイル名はデフォルトから変えないでください(`$(PROJECTNAME)_$(CONFIGNAME).mak`)。  
あとは画像のとおりに。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/ea514d40-d59d-0e6e-fd53-49e41e8a997a.png)  

# ビルドする
すべての作業が完了したら、早速ビルドしてみましょう。
プロジェクトを開くには、**ワークスペース**のディレクトリ(`C:\Workspace`ではなく、`.hws`があるディレクトリのことです！)で、`Code で開く`を選択してください。もし右クリックして`Code で開く`がなければ、VSCodeを起動して「ファイル(F)->フォルダーを開く...」でワークスペースのディレクトリを選択してもOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/a0504e9d-b04b-19eb-06d1-bbca9bb323e1.png)  
「フォルダーを開く」の場合、下の`フォルダー:`が`WorkSpace`ではなく、ワークスペース名になっていることを確認してください！(ここだと`CMT`)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/0ef9aa7c-442e-25ea-a95c-b89f579afc77.png)  
左のファイル構成がこんな感じになってればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/a24539ad-099b-bf1b-542a-352ec9ea0041.png)
あとは、HEWでやったようにプロジェクト内のCを開いた後、`Ctrl + Shift + B`でビルドできます！このときに変なメニューが出てくる場合は、以下の[トラブルシューティング](#トラブルシューティング)を御覧ください。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/e6941e73-62af-9c5b-c7b6-2ec4ebce6582.png)
出来上がったやつはHEWでビルドしたときと全く同じものになるので、HTermなどでマイコンに転送してあげてください。  
お疲れさまでした。

# トラブルシューティング
ここによくやりがちなミスを列挙しておきます。

## ヘッダファイル(`machine.h`など)が認識されない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/5d47dd3d-5418-66a2-72b1-f5589ee79577.png)

### 解決策
すみません、これは僕が作った`settings.json`に設定した`includePath`が間違っているか古くなっています。
すべてのプロジェクトの`.vscode`ディレクトリにある`settings.json`のインクルードパスを更新してください。
大体は`C:\Program Files (x86)\Renesas\Hew\Tools\Renesas\Sh\9_x_x\include`あたりになるはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/db640a1a-60e9-c275-cf1b-de01d72ff778.png)

## ビルド時に変なメニューが出る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/1134c8df-44fe-c300-6f2e-967593a256fc.png)

### 解決策
`.vscode`ディレクトリがうまく構成されていません。[ステップ](#ステップ)を御覧ください。

## ビルド時に`FILE ERROR: File not found`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/8767d402-7530-8bc6-5e56-e5cfe898f683.png)

### 解決策
Makeファイルが作成されていないか、ファイル名が間違っています。[ジャンプ](#ジャンプ)を御覧ください。

## ビルド後コンパイラのエラーが邪魔
ビルド前:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/56b455cc-729a-28be-27b9-6f8ba2f1e0bd.png)  
ビルド後:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601799/b04e340e-bd06-b8ab-73c0-016d25dc045a.png)

### 解決策
`tasks.json`には、コンパイラのエラーを検出する設定がされていますが、かえって邪魔でしたら`"problemMatcher"`ごと削除してください。

削除後:

```tasks.json
{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "shell",
			"label": "HEW: hmake build active file",
			"command": "hmake",
			"args": [
				"${fileBasenameNoExtension}_Debug.mak",
				"CONFIG=Debug"
			],
			"options": {
				"cwd": "${workspaceFolder}\\make"
			},
			"group": {
				"kind": "build",
				"isDefault": true
			}
		}
	]
}
```