ESLintのFlat Config移行でやって良かったこと

2024/04/07 8 users eslintrc flat config デフォルト ルール

ESLintのv9.0.0ではFlat Config(eslint.config.js)がデフォルトになりました。これまでの.eslintrcの形式のファイルも使えますが、ESLINT_USE_FLAT_CONFIG環境変数を設定する必要があるようです。 これを機にFlat Configで普段使っているルールを整理して書いてみることにしました。その際やって良かったことをまとめま... 続きを読む

Introducing ESLint Config Inspector - ESLint - Pluggable JavaScript Linter

2024/04/06 6 users Pluggable JavaScript linter

As of ESLint v9,0.0, the new configuration system has reached general availability, bringing with it with many benefits. Configuration files are now easier to manage and more transparent to compose. However, it can still be non-trivial to understand which rules are enabled and disabled for specif... 続きを読む

ESLint v9.0.0 released - ESLint - Pluggable JavaScript Linter

2024/04/05 5 users Pluggable JavaScript linter

Highlights This is a summary of the significant changes, both breaking and non-breaking, you need to know about when upgrading from ESLint v8.x to ESLint v9.0.0. Installing Because this is a major release, you may not automatically be upgraded by npm. To ensure you are using this version, run: np... 続きを読む

【自動修正も可能】カスタムESLintルールをTypeScriptで書く（eslint-plugin-local-rules）

2024/04/02 5 users TypeScript デフォルト 特定 カスタムルール ルール

チームで開発をする中で、特定の書き方を強制するために ESLint を使うことがあります。 どうしてもデフォルトのルールでは表現できない場合もありますが、そんなときはカスタムルールを作ることで対応できます。 今回は eslint-plugin-local-rules というプラグインを使って、リポジトリ内で完結するルールを書く方法を... 続きを読む

Prettierを使わない理由

2024/03/30 59 users Prettier コードフォーマッター 議論 ツール 意見

この記事はPrettierを使用している人を非難したり、脱Prettierを推奨する事を目的としていません。 こういった考え方もあるということをひとつの意見としてご覧いただければ幸いです。 はじめに Prettierはコードフォーマッターとして広く使われているツールです。 コードスタイルに関する議論をなくすことを目的として... 続きを読む

JavaScript／TypeScript向け静的解析ツール「Oxlint」が正式に公開、Rustの採用で大幅に高速化

2023/12/26 9 users rust TypeScript エラー 言語 用途

Oxlintは、JavaScriptやTypeScriptのコードを調べ、エラーにつながりやすい書き方となっている部分や、必要のない部分を指摘する機能を持っている。この用途では「ESLint」が事実上の標準となっているが、100％JavaScriptで記述してあるため、実行速度が問題となっている。 Oxlintでは、プログラムを記述する言語にRust... 続きを読む

ESLintのローカルルールで独自のコーディング規約を実装する - ドワンゴ教育サービス開発者ブログ

2023/12/22 11 users berlysia コーディング規約 ローカルルール 運用 開発

この記事はドワンゴ Advent Calendar 2023 の 22 日目の記事です。 ドワンゴ教育事業Webフロントエンドチームの berlysia です。1 この記事では、オンライン学習サービスN予備校の開発を支えるコーディング規約の考え方に少し触れ、その運用を支えるESLintの活用を紹介します。 この記事の内容は、他社様主催イベントに... 続きを読む

ESLint の Suggestions から学ぶ、コードの自動修正の奥深さ - mizdra's blog

2023/12/04 9 users SQLite Linter mechairoi 間違 コード

これは、はてなエンジニアアドベントカレンダー2023 4日目の記事です。 3日目は id:mechairoi さんの「SQLiteでLinderaを使った日本語全文検索」でした。 blog.chairoi.me 今日のテーマは、JavaScript 向けの Linter 「ESLint」についてです。ESLint を使うと、JavaScript で書かれたコードを静的解析して、よくある間違... 続きを読む

ESLintのローカルルールで独自のコーディング規約を実装する

2023/11/02 29 users コーディング規約 ローカルルール

Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜 で発表させていただいたスライドです ドワンゴ教育事業採用サイト 続きを読む

Deprecation of formatting rules - ESLint - Pluggable JavaScript Linter

2023/10/26 18 users Pluggable JavaScript linter

In ESLint v8.53.0, scheduled to be released on Friday, November 3, 2023, we will formally deprecate our formatting rules. Formatting rules are those rules that simply enforce code conventions around spacing, semicolons, string formats, etc. For a variety of reasons, which are discussed in this po... 続きを読む

新卒エンジニアがESLintのFlat Config移行と格闘した話 - ドワンゴ教育サービス開発者ブログ

2023/10/19 12 users config ドワンゴ flat config 移行 資料

ESLintのFlat Configへの移行は進んでますでしょうか？試してみたでしょうか？ 今回はドワンゴの新卒エンジニアが初仕事として取り組んだ、ESLintのFlat Configへの移行に関して「その方法と嵌ったところの乗り越え方」をお伝えします。 この記事で言及すること Flat Configに書き変えるときに見る資料 ESLintのconfigを... 続きを読む

Biome と ESLint の lint ルールの互換性

2023/10/10 8 users lint Biome 既存 フロントエンド開発 ルール

Biome では、現在約 150 個程度の JavaScript・TypeScript に関する lint ルールを実装しています。 これらのルール多くは既存の ESLint 関連で実装されているルールと同じものになっているのですが、ルールの名前が異なることもあり、その対応関係がわかりにくくなっています。 そこでこの記事では、フロントエンド開発... 続きを読む

ESLint の共有設定を Flat Config に対応させる - Object.create(null)

2023/09/16 11 users Object.create まえがき null 修正案 コード

まえがき こんにちは, 人間 ESLint です. そんな人間 ESLint の私ですが, 私一人があらゆるコードに注意深く目を通して, さらに修正案まで提示するというのは大変です. 多くの問題は機械的に検知できるはずなので, そういった仕事を私の代わりにしてくれるメカ人間 ESLint が欲しくなってきます. そんなわけで, 4 年ほど... 続きを読む

ESLintのルールから考えるJavaScriptのundefined判定 - Qiita

2023/07/13 7 users Qiita undefined パク 判定 ルール

JavaScriptのundefined判定にはいくつか記載方法がありますが、言語仕様を理解しないまま記述すると、ブラウザや開発環境によっては思わぬバグを生み出すことがあります。 この記事では、JavaScriptにおけるundefinedの判定方法を複数紹介し、ESLintのルールから適切な判定について検討してみようと思います。 ESLintと... 続きを読む

なぜ <div> に onClick がダメなのか？

2023/06/18 144 users onclick div 要素 みなさん 設定

■ はじめに <div>要素にonClickを定義しない方がいい、ということを聞いたことがあります。 みなさんも聞いたことないでしょうか？ ただ、なぜ良くないのか？ 理解してなかったので今回調べてみました。 ちなみに、ESLint でもそのような場合にワーニングを吐いてくれるものがあります。 ESLint の設定にもそれに対応す... 続きを読む

Result型とESLintでエラーハンドリング漏れを検出する

2023/03/30 16 users

こんにちは、よしこです。 この記事では、わたしの所属する株式会社ナレッジワークで最近コードベースに取り入れた「エラーハンドリング漏れ防止の仕組み」について紹介します。 背景 「通信を伴うアクションに失敗しても画面にエラーフィードバックが表示されない」という実装漏れをしてしまったことがあり、今後こうい... 続きを読む

TypeScriptの型情報を使ったサポート対象のブラウザが実装してないメソッドの利用をエラーにするESLintルール

2023/03/18 14 users TypeScript メソッド 実装 エラー 解析

eslint-plugin-typescript-compatはTypeScriptプロジェクト向けのESLintルールです。 このESLintではサポートしているブラウザが、実装していないメソッドを検知してLintエラーにしてくれます。 JavaScriptではメソッドの静的解析は難しい(メソッド名が同じでも独自実装の可能性があるため)ですが、TypeScriptの型情報を... 続きを読む

prettier-plugin-organize-imports で import 文を自動フォーマットする

2023/02/27 6 users ES Modules 本稿 フォーマット 筆者 試行錯誤

これはなに？ 筆者は ES Modules の import 文を自動フォーマットするツールとして長らくprettier-plugin-organize-imports を愛用しています。一時期は ESLint でフォーマットしていましたが、試行錯誤を重ねた末にこのプラグインによるフォーマット方法に至りました。 本稿ではその導入手順をフォーマットの仕組みを軽... 続きを読む

Ubie における ESLint 活用

2022/12/04 15 users TypeScript Ubie ベストプラクティス 静的解析

Ubie では JavaScript や TypeScript で開発されているプロジェクトに対して、静的解析のために ESLint を導入しています。 この記事では Ubie での ESLint を活用事例を紹介します ESLint を活用する目的 まず私が ESLint を活用する目的は、コーディング規約やベストプラクティスを強制することで、コードレビューの手... 続きを読む

最近は ESLint をいじって遊んでるので紹介します

2022/12/03 6 users パク 課題 余裕 プログラム みなさん

学校の課題や仕事をどうしてもやりたくないけど、数時間だけ余裕があって、プログラムは書きたい！というとき、みなさんはどうしていますか？ 最近の自分は ESLint をやっています。ということで自分が実装した変更を紹介していきます。 基本的に、ESLint の Rules ドキュメントを眺めてみて「バグがありそうだな〜」と... 続きを読む

Complete rewrite of ESLint · Discussion #16557 · eslint/eslint

2022/11/19 9 users Discussion

Introduction ESLint was first released in 2013, meaning it will be ten years old next year. During that time, the way people write JavaScript has changed dramatically and we have been using the incremental approach to updating ESLint. This has served us well, as we've been able to keep up with ch... 続きを読む

JavaScript/TypeScript の Linting に XO を使うように統一した - ドクターズプライム Official Blog

2022/08/16 12 users TypeScript linting github.com

@1000ch (id:hc0001) です。掲題の通り、少し前にドクターズプライムの Frontend プロジェクトで使う lint ツールとして ESLint ではなく XO を使っていく方針に切り替えました。最近その振り返りを行ったので、その備忘録として文字に起こします。 github.com 経緯と課題 これまでは Create React App に付属する ESLin... 続きを読む

JavaScriptにセミコロンは入れるのか？入れないのか？ - Qiita

2022/08/14 155 users セミコロン Qiita コンパイラ 落とし穴 結論

結論 どちらでもいい セミコロン付けても付けなくても落とし穴はある ESLintを利用することで落とし穴を検知できる 私はセミコロンつけない派 自動セミコロン挿入とは 自動セミコロン挿入(automatic semicolon insertion) この仕組みのおかげでセミコロンを使わなくてもコードを書くことができ、コンパイラが行末を察し... 続きを読む

ESLintのconfigがどのように変わり得るか（flat configとは何か）

2022/08/12 11 users config flat config 言及 リリース 通り

ESLint v8.21.0のリリースでこれまでとは異なるconfigシステム（flat config）が持ち込まれた。 以下の通り、新しいconfigシステムへの一歩というように言及があり、ESLintを利用する上で無視できない影響を受ける変更となりそうなので、どのようなものか確認しておきたい。 We took a big step toward ESLint’s new con... 続きを読む

Node.jsのツールで--cacheフラグを実装するためのライブラリを書いた

2022/08/04 6 users textlint Prettier ライブラリ ツール 実装

ESLint、Prettierなどは--cacheフラグという一度チェックしたファイルは、ファイルが変更されるまで再チェックしないキャッシュの仕組みを実装しています。 同様の仕組みをtextlintを実装したことはありますが、file-entry-cacheを使い結構煩雑な実装が必要になります。ファイル変更を元に処理結果をキャッシュする仕組... 続きを読む