The lightning talk for フロントエンドカンファレンス福岡スピンオフ テーマ: ESLint https://fec-fukuoka.connpass.com/event/201334/
![@cybozu/eslint-configから学ぶ、全社共通ESLint configの運用](https://cdn-ak-scissors.b.st-hatena.com/image/square/82554493cb413f35552e26a938840b9db9ee0246/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fc83097f7e9f34e5e8bb1069410169bb0%2Fslide_0.jpg%3F17324937)
何もしないでそのままでも十分かもしれない。 先にまとめ 最近の react-scripts は ESLint を含んでいるので別途インストール不要 設定は .eslintrc.js を作成して extends: ['react-app'] する Airbnb のルール設定を使う場合はもうちょい頑張る 元々 create-react-app してない場合も同じ Airbnb ルール利用時の手順概要 ESLint 初期化 ESLint の設定を更新 コードを recommended な状態へ対応 想定環境 Node.js v10.16 react-scripts v3.1 TypeScript v3.5 ESLint v6.1 @typescript-eslint/eslint-plugin v1.13 React アプリの準備 create-react-app でテンプレートから作成します。
VSCode の Eslint プラグインはデフォルトの状態だと.js,.jsxファイルにしか反応しない。 いざtypescriptを導入すると、cli上ではうまく動くが、エディタ上で赤く表示されないのでどこにエラーが起きているかがわかりにくい。 なので、eslintの設定で.ts,.tsxも表示してくれる様に設定を変更する必要がある。 以下の設定をVSCodeの設定に追加する。 { "eslint.validate": [ "javascript", "javascriptreact", { "language": "typescript", "autoFix": true }, { "language": "typescriptreact", "autoFix": true } ] } デフォルトでは ["javascript","javascriptreact"]となっている。 ty
[追記:] TypeScriptでESLintを使う方法も書きました tech-1natsu.hatenablog.com TSLintではなくESLintを使いたい方はこちらもあとで読んでみてください。 なお JS with ESLint TS with TSLint この構成をお求めの方は当記事(下記)です。 Prettier導入するにあたって色々絡み合うものがあるので調べたりしたことをまとめておく。 基本的にリントとフォーマッタのどちらか片方しか使わないという場面は、リリースを意識したプロジェクトではあまりないと思うので、実質この組み合わせは必須のようになってくる気がしている。 それで、Prettierとはなんぞや…JSのコードフォーマッタで、、というPrettierの概要についてはググればめっちゃ出てくるので省略。 この記事は導入したいけどなにをどうすればいいんやという人向け。 と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く