VsCodeの日本語化を忘れていた。
また、ソースコードのチェックと整形の設定をする。
なんかvscodeの右下にPrettier入れない？みたいな通知も出てくるし。
まずは日本語化
Visual Studio Codeで日本語化する方法[Windows] #VisualStudioCode - Qiita
検索して出てきた上記記事だと2019年だけど、より簡単になっていた。
- メニューバー→view→command palette
- configure display languageを選択
- 日本語 というのが出てくるのでそれを選択すると自動でインストールされる
- VsCodeをRestartしますか？と聞かれるのでOKすれば日本語化される。
次にPrettierとESLint。
こちらのページを参考に実施する。
ESLint + Prettierの導入（パッケージ版 + VSCodeプラグイン版） #JavaScript - Qiita
参考にというか割愛されてるので、GUIで普通にインストールすればいいのかしら？
VsCodeの拡張を開くと、RecommendのところにPrettierとESLintがあるのでインストールする。
インストールするとESLintの効果で、ソースコードに赤波線がひかれるようになる。
また、コード整形の設定をオンにするため、.vscode/setting.jsonに下記を追加
"editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "[markdown]": { "editor.formatOnSave": false }
保存したらいきなりjsonが整形されたのでうまく行ったっぽい？ 早速function.tsをコード整形してみる。
function.tsを上書き保存したら、詰め詰めで書いていたコードが優雅な感じに。 しかしエラーが残っている。
一つ目のエラーはno-case-declarationsとある。 どうやらswitchのcase内で変数を宣言するのは推奨されないってやつですね。 caseは名前空間が分かれないからね。 とりあえず{}でくくって対応。
2つ目のエラーはCustomFunctionsが定義されていないと出る。 普通にコード自体は動いてるけどどう対処すればいいんだろう？
困ったときのChatGPTさんに聞いてみたところこんな回答が
このエラーは、ESLintが
CustomFunctionsを定義されていないと見なしていることを示しています。これはおそらくESLintがTypeScriptのグローバルな名前空間や外部のライブラリについて認識していないことが原因です。解決策として、ESLintに
CustomFunctionsがグローバルなオブジェクトであることを伝えるため、ESLintの設定にCustomFunctionsをグローバルな名前として追加することが考えられます。
.eslintrcファイル内で、以下のようにglobalsセクションを定義してCustomFunctionsを追加します。{ "globals": { "CustomFunctions": "readonly" } }これにより、ESLintは
CustomFunctionsが定義されたグローバルなオブジェクトであることを認識し、そのエラーを解決できるはずです。
対応してみたらエラーが消えた！ さすがGPTさん。
