ESLint

こんにちは、駅メモ！開発チームエンジニアの id:hayayanai です！ 駅メモ！のフロントエンド開発では、Linter として ESLint や Stylelint、それらの Vue 関連のプラグインを導入しています。 これらの開発支援を利用していく中で、既存の ESLint ルールのエラー文だけを変えたいという話が上がりました。 一般的なエラー文を出すよりも、チームとしての方針を明記した方が対応しやすいということです。 一から ESLint のカスタムルールを作る方法については、調べてみると既に多くの情報がありました。 一方で、既存のルールを上書きする方法の情報は少なく、実装に苦戦しま…

こんにちは。アプリケーションサービス部の渡辺です。 コードの品質担保にはいろいろな方法があると思います。テストカバレッジ上げることだったり、実際に動かしてみて不具合がないか確認してみたりなどです。 運用を見据えると コードの読みやすさ を品質として定義することもできますね。 ただ、 コードの読みやすさ っていったい何でしょう？ 実装者はおそらくそのコードをスラスラ読むことができますよね。一方で他の人はそのコードをスラスラ読むことができるケースとできないケースがありそうです。 おそらく、経験などが大きく影響してくると思います。 経験などの不確実なものでなく、何か仕組みで コードの読みやすさ を担…

こんにちは。ムキムキマッチョマンになりたい人です。心も体もムキムキマッチョマン。 フロントエンド領域でのムキムキマッチョマン目指して頑張っています。 この記事は技術記事の皮を被った、IT知識トレーニングの記録です。 はじめに フロントエンド開発において、コーディング規約やいろいろな制約を持たせたいときに重宝されるのがLinter、静的解析ツールです。 静的解析ツールではソースコードを実行などせず解析し、文法上の間違いや表記の統一の問題を見つけ、場合によってはそれの解決まで行ってくれます。 2024年現在様々なLinterがある中で、ESLintはプラグインを中心としたエコシステムを形成し色々あ…

TypeScript React で ref を使ったタイマーを使った処理を書いていて予期しない ESLint のエラーが出たのでメモ ESLint no-unused-expressions error が発生 const timerRef = useRef<number | null>(null); // … timerRef.current && clearTimeout(timerRef.current); // => ESLint error A && B をしている箇所で Expected an assignment or function call and instead saw…

こんにちは。私は主にReactでWEBフロントエンド開発を行っています。 ESLint v9.0.0のリリースブログによるとESLint v9.0.0以降はFlat configと呼ばれる書き方がデフォルトになるようです。 そこでESLint Flat config時代における、VS Codeを使ったVite × React環境にESLintとPrettierを組み込み、保存時に自動的にフォーマットしてくれる設定をご紹介します。 2024年9月現在、Viteを使ったReactプロジェクトを立ち上げる方法についてです。 ViteによるReact環境構築 パッケージのインストール ESLintの設…

社内 AI にお願いして描いてもらった ESLint flat config のイメージ図 こんにちは。kickflow エンジニアの芳賀と申します。 今回は入社後初めて行った「ESLint の flat config 移行」についてお話します。 自身も久しぶりにガッツリ ESLint と向き合う機会だったので初心に帰り、調べ調べ行いました。

JavaScriptで最も使われているバグ発見ツールであるESLintをインストールします。 eslint.org シンプルなNode.jsファイルに対して、ターミナル上からESLintを実行することを想定しています。 まずは公式サイトに書いてある通りに、プロジェクトディレクトリ配下で、何も考えずインストールコマンドを実行します。 npm init @eslint/config@latest いくつか初期化のための質問をされるので答えて、インストール完了。 早速使うぞ！とコマンドを打ってみたところ、コマンドが見つからないと言われました。 eslint -v zsh: command not f…