🔰
ReactでESlintつかってみた(🔰)
はじまり
Parsing error: Unexpected token, expected ","
の解決方法がわからず模索していた所、「LSlint」というものを初めて知ったので、この機会にどんなものかまとめました。プログラミング初心者が備忘録として書いています🙇
「.eslintrc.yml」に何やら記述をすればいいとのこと。
これなんですか??
ESlintとは
結論：ESLintとは、JavaScriptやTypeScriptのコードの構文を検証するためのツールです。
すごいありがたいじゃん。ちなみに、いろんな記事に出てくるLinterとは？
ESLintの特徴
- 設定が簡単 Node.jsとnpmだけあれば実行できます。
- 記述方式に統一感が出せる記述方式に統一感が出せることで、コードを読む速度が上がります。
- ルールをカスタマイズできる
現状どういうものかはわかった感じ。
とりあえず使ってみよう
npm i --save-dev eslint-plugin-react eslint-plugin-react-hooks
ルートディレクトリ内に.eslintrc.ymlを作成
.eslintrc.yml
---
root: true
parser: "@typescript-eslint/parser"
plugins:
- "@typescript-eslint"
- jest
extends:
- eslint:recommended
- plugin:@typescript-eslint/recommended
- plugin:react/recommended
- plugin:react-hooks/recommended
- plugin:jest/recommended
- prettier
これで動いてくれました。
本来は自分で多くのルールを作成できるものであり、複数人で開発する場合でもシステム全体のコードの一貫性を維持することができるらしいので、今後はルール設定を詰めていきたいと思います。
勉強させていただきました
Discussion