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"
}
}
そんじゃま!(´・ω・)ノシ