ESLintを挿入してReact でアプリケーションを作っている時の話。こんなエラーが出てずっと対処法に困っていた。

Compiled with problems:X

ERROR

[eslint] 
src/App.tsx
  Line 17:5:   'datasets' is not defined     no-undef
  Line 18:9:   'label' is not defined        no-undef
  Line 19:9:   'data' is not defined         no-undef
  Line 20:9:   'borderColor' is not defined  no-undef
  Line 41:3:   'prefCode' is not defined     no-undef
  Line 42:3:   'prefName' is not defined     no-undef
  Line 67:60:  'NodeListOf' is not defined   no-undef

Search for the keywords to learn more about each error.

お世話になった記事（なっく日報さんから）

歴史的経緯により存在しているglobal変数を弾いてくれるための仕組みなんだそう。今回は必要ないのでエラーが出ないようにしたい。
.eslintrc.json　ファイルを変更しglobalに値を記入するとエラーが消える仕組み。この事象の場合このように記載するとエラーが消える。

.eslintrc.json

{
	"env": {
		"browser": true,
		"es2021": true
	},
	"extends": ["eslint:recommended", "prettier"],
	"parserOptions": {
		"ecmaVersion": 12,
		"sourceType": "module"
	},
	"globals": {
		"datasets": false,
		"label": false,
		"data": false,
		"borderColor": false,
		"prefCode": false,
		"prefName": false,
		"NodeListOf": false,
		"Props": false,
		"labels": false
	},
	"rules": {
		"no-console": "off"
    }
}

そんじゃま！(´･ω･)ﾉｼ