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…

はじめに こんにちは！今年新卒で入社したK.Mです！今回の記事では、私がプロジェクトで使ったeslint-plugin-importについて紹介したいと思います！ eslint-plugin-importとは？ eslint-plugin-importは、eslintのプラグインであり、import順に関するルールを設定することができます。settings.jsonの"source.organizeImports": "explicit"を用いることでも同様にimport順を並べ替えることができますが、こちらは細かいルール設定ができません。一方、eslint-plugin-importを用いる…

社内 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…

こんにちは。KENTEM第１開発部のS.Eです。 私はクラウドサービスのフロントエンドエンジニアとしてプロジェクト業務に携わっています。 現在のプロジェクトは新規で立ち上げ、既に２年ほど経過したような状況です。 プロジェクトメンバーの入れ替えも何度か発生している中で挙がってきた意見があります。 それは『コーディング規約（ルール）がわかりづらい』といったものです。 コーディング規約といっても「末尾にセミコロンを付ける」とか「文字列はシングルクォートで括る」とか単純なものが多いです。 プロジェクトの運用等についてはWikiで示していたりしたのですが、 明確な取り決め等はできておらず、レビュー時の指…