はじめに 「Flat Config が何かはわかったからサンプルをくれ！」という方向けの記事です。 筆者が普段使用している eslint.config.js をご紹介します。 Flat Config については良記事がたくさんあるため ↓ などを参照してください。 今回ご紹介する設定は、React × TypeScript を使用し、フォーマットは Prettier に任せる前提になっています。 しかし、Vue やサーバー Node.js でも使いまわせる箇所は多いと思います。 eslint.config.js まずは結論から。 // @ts-check import { fixupConfigRules } from '@eslint/compat'; import { FlatCompat } from '@eslint/eslintrc'; import eslint from '@
重い腰を上げて FlatConfig 対応をした ESLint が新しい設定形式として FlatConfig を導入してから随分と経ち、最新バージョンの v9 では FlatConfig がデフォルトになりました。一方で利用者の多い plugin でもなかなか対応が進まず、周りでは思ったよりも FlatConfig への移行が進んでいない印象を受けます。 とはいえ次のバージョンである v10 では FlatConfig しかサポートしないことが予定されており、今まで移行を見送ってきた方も「さすがにそろそろ移行するか...」と思っているのではないでしょうか。自身の所属チームで管理している ESLint の rule セット : @cybozu/eslint-config でも遅ればせながら FlatConfig 対応を進めています。（現在はアルファ版で提供中です） そんな @cybozu/e
はじめに Next.jsなどReactのプロジェクトにはlinterとformatterが必須でeslintとpretteirを使うと思います。 しかし、導入するとなると考慮すべき点や面倒な点が結構あります。 以下は一例です。 eslintとprettierは設定が複数あり、プラグインのインストールが必要 eslint-plugin-prettierを使えば、pretteirがなくてもformatterは実現できるため、そもそもprettierいるのか問題 逆にeslintはlinterとしての役割のみにして、formatterの機能は持たせたくない そこででてくるのがBiomeです。 Biomeとは 一言でいうとeslintとprettierを一つにしたものです。 以下、公式の引用とページです。 Biome はWebプロジェクトのための高性能なツールチェーンであり、プロジェクトの健全性を
ESLint の Flat Config を書く時に読んでほしい記事 (2024-08版) - Object.create(null)
ESLint v9 から Flat Config がデフォルトの設定ファイルの形式となり, 徐々に対応しているプラグインも増えて移行が進みつつありますが, 実際に移行したプロジェクトを見ているとしばしば勘違いなどから誤った設定をしている事例を目にします. ということで, Flat Config を書くにあたっていくつか知っておいて欲しいことや, よく見かけるミスをまとめてみました. この記事では網羅的な説明はしませんので, ESLint や typescript-eslint の公式ドキュメントを前提として, 副読本的に参照してください. Getting Started with ESLint - ESLint - Pluggable JavaScript Linter Getting Started | typescript-eslint Flat Config のしくみ Flat Co
Vitest公式になったeslint-plugin-vitestを導入して、適切なVitestのお作法を学んでみる
import vitest from "@vitest/eslint-plugin"; export default [ { files: ["tests/**"], // or any other pattern plugins: { vitest }, rules: { ...vitest.configs.recommended.rules, // you can also use vitest.configs.all.rules to enable all rules + // e.g. 'vitest/no-test-return-statement': 'error', + "vitest/max-nested-describe": ["error", { "max": 1 }] // you can also modify rules' behavior using optio
これは、はてなエンジニアアドベントカレンダー2023 4日目の記事です。 3日目は id:mechairoi さんの「SQLiteでLinderaを使った日本語全文検索」でした。 blog.chairoi.me 今日のテーマは、JavaScript 向けの Linter 「ESLint」についてです。ESLint を使うと、JavaScript で書かれたコードを静的解析して、よくある間違いを検出したり、コーディングスタイルを統一できます。 通常、ESLint のルールによって報告された問題 (error や warn) は人が手で修正します。ただし、ルールが報告する問題の中には「fixable」な性質を持ったものがあります。こうした fixable な問題は、eslint --fix で自動修正できます。例えば、object-shorthand ルールによって報告された問題は、以下のよう
ESLintのv9.0.0ではFlat Config(eslint.config.js)がデフォルトになりました。これまでの.eslintrcの形式のファイルも使えますが、ESLINT_USE_FLAT_CONFIG環境変数を設定する必要があるようです。 これを機にFlat Configで普段使っているルールを整理して書いてみることにしました。その際やって良かったことをまとめます。 作成した設定はSharable Configとして公開しています。 typescript-eslintのtseslint.configを使う Flat configはこのように配列で書きます。 export default [ { rules: { "no-unused-vars": "error", "no-undef": "error" } } ]; // @ts-check import eslint f
この記事はドワンゴ Advent Calendar 2023 の 22 日目の記事です。 ドワンゴ教育事業Webフロントエンドチームの berlysia です。1 この記事では、オンライン学習サービスN予備校の開発を支えるコーディング規約の考え方に少し触れ、その運用を支えるESLintの活用を紹介します。 この記事の内容は、他社様主催イベントにて発表した内容の再構成です。 speakerdeck.com コーディング規約は実行可能にしたい 教育事業のWebフロントチームには、細かいコーディング規約が書かれた文書は存在しません。コーディング規約はESLintをはじめとする各種ツールによって、自動で検出・修正可能な形になっています。 文書という形でなく、各種ツールのコンフィグファイルとそのコメントとしてまとまっている、と言い換えてもよいかもしれません。ドキュメンテーションは重要な仕事ですが、そ
ESLintプロジェクトは2024年10月3日、ESLintがJSONとMarkdownのリンティングを正式にサポートしたことを発表した。 ESLint now officially supports linting of JSON and Markdown -ESLint ESLintはオープンソースのJavaScriptコードチェック（リンティング）ツール。JavaScriptやTypeScriptのコードを静的解析し、構文エラーやコーディング規約に違反がないか、等をチェックすることができる。 新たにサポートされたJSONリンティングは、@eslint/jsonというプラグインを使用して実行される。このプラグインはJSON、JSONC （コメント付きJSON）、JSON5の解析機能を提供するもので、npmからインストールすることができる。 また、Markdownリンティングは@e
ESLintがJavaScript以外にも対応言語を広げるとの方針を説明。まずはJSON、Markdownへの対応プラグインを開発
ESLintがJavaScript以外にも対応言語を広げるとの方針を説明。まずはJSON、Markdownへの対応プラグインを開発 JavaScriptコードの構文やスタイルをチェックできる「ESLint」の開発者であるNicholas C. Zakas氏は、ESLintのブログに投稿した記事「What's coming next for ESLint」で、今後ESLintをJavaScriptだけでなく他の言語にも対応させていく方針を説明しました。 We're excited to share our plans for the future of ESLint:https://t.co/4joAwfRqkR — ESLint (@geteslint) July 5, 2024 ESLintはJavaScriptの構文やスタイルなどをチェック ESLintはその名前にあるように、いわゆる
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
フロントエンドカンファレンス北海道 2024 の登壇資料です コードベースに秩序をもたらすため各種 Linter を利用している方も多いのではないでしょうか？一般的なルールについては Linter 内蔵のものや既存の Plugin ですでにカバーできるでしょうが, 一方で事業ドメイン特化であった…
こんにちは。プロダクトエンジニアのatsushimと言います。 社内ではプロダクトを開発する傍ら、アクセシビリティを高めるための改善や仕組みづくりを進めています。 この記事ではSmartHR独自のESLintのルールを作っている話をしたいと思います。 SmartHRでは アクセシビリティ（以降a11y） を考慮したアプリの開発・改善を行っており、過去記事でその様子をご確認いただけます。 SmartHR Tech Blog: アクセシビリティ の検索結果 ただ普段の開発中、a11yを意識しつつ開発を行うことは、エンジニアにかなりの負荷がかかります。 フロントエンドの経験が少なく基本的なマークアップの知識が足りていない アクセシビリティを意識してね！といわれても何をすればいいのかわからない そのため、SmartHRでは独自のESLint ルールを作成し、CIに組み込むことでa11yを担保、改善
What's coming next for ESLint - ESLint - Pluggable JavaScript Linter
When we released ESLint v9.0.0 in April, it was the first major release in 30 months and formally introduced the new configuration system. ESLint v9.0.0 also made some rule API changes to prepare the core for what’s coming next. After the release, we spent a lot of time creating compatibility utilities, a configuration migration tool, and a rule API transform utility to help the ecosystem move to
こんにちは、kintone 新機能開発チームに所属している 23 卒の柿崎です。 この記事では、私が初めて ESLint のカスタムルールを作って npm で公開し、普段業務で触っているコードに適用されるまでについて紹介しようと思います。 「自分でも ESLint のカスタムルール作れそう！作ってみよう！」と思ってもらえたら嬉しいです。 実際に作ったものはこちらです 👇 きっかけ kintone 新機能開発チームは kintone の領域ごとに複数のサブチームに分かれていて、その中でも私はアプリの利用に関する領域にオーナーシップを持つアプリチームにいます。 アプリチームでは現在フロントエンドのフレームワークの刷新を行っています。 kintone のアプリとは、ユーザーが作ることのできる業務システムのことで、アプリにはフィールドという概念があり、その数は 20 個ほどです。 フィールドごと
Introducing the ESLint Configuration Migrator - ESLint - Pluggable JavaScript Linter
We’ve heard you: One of the biggest reasons ESLint users haven’t upgraded to ESLint v9.x is migrating a configuration file seems difficult and complicated. Some plugins support flat config and the ESLint v9.x rule APIs and some don’t. Sometimes you need to use FlatCompat and sometimes you need to use the compatibility utilities. While we cover as much as we can in the migration guide, it can take
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: npm i eslint@9.0.0 --save-dev Migration Guide As there are a lot of changes, we’ve created a migration gu
ESLint now officially supports linting of JSON and Markdown - ESLint - Pluggable JavaScript Linter
Back in July we announced our plan for ESLint going forward. Part of that announcement discussed transitioning ESLint to be a more general-purpose linter that is capable of linting any language. A lot of the core functionality of ESLint (finding files, parsing then, reporting problems) is generic, and so we’ve spent the past few months extracting the JavaScript-specific parts of the core. We’re no
Introducing ESLint Config Inspector - ESLint - Pluggable JavaScript Linter
As of ESLint v9,0.0, the new configuration system has reached general availability, bringing with it 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 specific files, especially when your configuration is complex or composed from multiple sources. That’s why we are
Version support policy and ESLint v8.x end of life - ESLint - Pluggable JavaScript Linter
For ESLint’s entire 11 year existence, we’ve only maintained one major release line at a time. This was both for practical reasons (limited team bandwidth) and technical reasons (our infrastructure was built to assume just one branch). Unfortunately, we haven’t been good at communicating our version support policy, which has led to confusion and frustration when we do a major release. Adopting a f
Introducing ESLint Compatibility Utilities - ESLint - Pluggable JavaScript Linter
The release of ESLint v9.0.0 brought with it the rollout of the new configuration system, but also a series of changes to the rules API. These changes are necessary in order to prepare ESLint for implementing language plugins, which will give ESLint the ability to natively lint languages other than JavaScript. As a result, plugin authors needed to update their rules to work with v9.0.0, and unfort
【自動修正も可能】カスタムESLintルールをTypeScriptで書く（eslint-plugin-local-rules）
チームで開発をする中で、特定の書き方を強制するために ESLint を使うことがあります。 どうしてもデフォルトのルールでは表現できない場合もありますが、そんなときはカスタムルールを作ることで対応できます。 今回は eslint-plugin-local-rules というプラグインを使って、リポジトリ内で完結するルールを書く方法を紹介します。 この記事の概要 ESLint のカスタムルールを作る 外部に公開 (npm publish) する必要はなく、リポジトリ内だけで完結させる ルールを TypeScript で書く 自動修正機能をつける JSX を検出する ESLintルールを作ることのメリット 具体的な方法を説明する前に、なぜ開発ルールを ESLint ルールにすることが重要なのか確認しておきます。 コードを書く人が気をつければいいんじゃない？と思うこともあるのですが、ルールを作る
自分だけの ESLint Config を作る
これはなに 自身のプロジェクトに適合した ESLint Config の設計および実装方法についてまとめたものです。 業務や趣味プロに関わらず、 JavaScript / TypeScript でコーディングする際に ESLint は非常に有用なツールであり、広く使われています。ほとんどの場合において ESLint 基盤はプロジェクトごとに必要なパッケージをインストールして設定ファイルを作成し、構築されます。しかしその設定内容がプロジェクト間で重複することは珍しくなく、プロジェクトの数が増えるにつれ冗長となりがちです。そこで、複数プロジェクト間で共通のルールセットを定義して単一の ESLint Config として再利用することで、メンテナンス性や再利用性の向上が期待できます。本稿では、そのような用途で使える自分だけの ESLint Config を設計・実装する方法を紹介します。 前提
typescript-eslint is the tooling that enables standard JavaScript tools such as ESLint and Prettier to support TypeScript code. We've been working on infrastructure improvements that will help ensuring long-term interoperability with other tools in the ecosystem. In particular this major release tightens our dependency requirements to help set us up for ESLint v9 and includes a new package typescr
ESLint v8のEOLなど: Cybozu Frontend Weekly (2024-09-10号)
こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/9/10 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Paragraphs | scottohara.me HTML における「段落（paragraph）」の概念と、その適切な使用について解説した記事です。 HTML の paragraph は、<p> 要素だけでなく他の要素も含む広い概念で、スクリーンリーダーは <p> 要素だけでなく、<span>, <div>,<li> なども段落として認識します。そのため role=paragraph のような ARIA ロールは、
背景 ある日。 彡(ﾟ)(ﾟ) 「ファッ！？ 基本ケバブケースでファイル名が作られてるのに、一部でスネークケースとキャメルケースが混じっとる！！」 という状況に直面しました。 Nest.jsで作っていたマイクロサービスで起こっており、基本的にキャメルケースで当初は命名が統一されていました。 が、別のマイクロサービス(Laravel)でModel(Actice Record)の定義などを先にしていたのをNest.jsにそのまま持ち込んだ際に、テーブル名がキャメルケースだったりすることもあり、そこから紛れ込み始めたものと思われます。 要するに、人為的なエラーです。 ということでこれを修正する 目に見えるケバブケース以外のファイル命名は潰せましたが、本当潰し切れているか。あるいはこれから先も同じようなことが起こらないかが気になるところ。 こんなときの解法がlinterによる静的解析です。 という
Highlights Types now included We’ve been receiving complaints about the @types/eslint package not being updated after the v9 release. While we did do an initial update to the package for v9, it quickly became apparent that regular updates to that package could not be accomplished in a timely manner. Ultimately, we decided that the only way for us to provide the type of experience we want for ESLin
のように実装することが多いと思います。 このような実装の罠として、変数がbool型ならよいのですが、たとえばnumber型かつ0が格納されている際、式の評価としては左辺の0が返されてしまい、ブラウザ上に「0」とだけ表示されたり、React Nativeでは最悪の場合クラッシュを引き起こします。 対策としてはシンプルで、かならず!!を先頭に付与すると良いです。
JSer.info #681 - 2024年6月の正式公開に向けたES2024のリリース候補が公開されました。 Release ES2024 Candidate February 2024 · tc39/ecma262 ES2024では、次のような変更が含まれる予定です。 ArrayBuffer.prototype.resize ArrayBuffer.prototype.transfer RegExp v flag Promise.withResolvers Object.groupBy/Map.groupBy Atomics.waitAsync String.prototype.isWellFormed/String.prototype.toWellFormed 毎年2月ごろに仕様へ取り込むProposalが決まり、6月ごろのGA 127th meetingで最終的な承認を得る予定です
ESLintがメジャーバージョンアップしてv9.0.0に ー Flat configがデフォルトに、新たなルール導入、Node.js v19以前のサポート終了
4月6日、JavaScriptのコード品質管理ツールであるESLintは、その最新版バージョン9.0.0をリリースした。このアップデートでは、新機能の導入、バグ修正、そしていくつかの重大な変更が行われた。 4月6日、JavaScriptのコード品質管理ツールであるESLintは、その最新版バージョン9.0.0をリリースした。このアップデートでは、新機能の導入、バグ修正、そしていくつかの重大な変更が行われた。 新しいバージョンをインストールするには、以下のコマンドを実行するだけでよい。 npm i eslint@9.0.0 --save-dev 主な変更点を以下に挙げる。 Node.jsサポートの更新 主要な変更点の一つとして、Node.jsのサポートが更新された。これにより、Node.js v18.18.0未満およびv19のサポートが終了し、Node.js v20.xが現在のLTSリリース
ESLint の Legacy Config と Flat Config における Plugin 構造の違いと両対応 Plugin の構造
概要 ESLint v9 への対応を進めていると、いくつか Flat Config に対応していない Plugin や Config に遭遇することがあります。その際に、Legacy Config のみ対応している Plugin と、Flat Config も対応している Plugin の両方の構造の違いを知っておくと、Flat Config に向けた対応をすすめる上で便利だったため、その違いを俯瞰するための資料としてまとめました。 前提 以下で例示する Plugin は、パッケージ名を eslint-plugin-example として、いくつかのカスタムルールと、カスタム Processor を持つものを想定しています。 Plugin の実装方法や API の解説はしない。 ESLint v9 では、v8 で廃止予定となった API が削除されているため、Plugin を作成したり、E
Vue3 + TypeScript + Prettier に対応した ESLint Flat Config の最小構成
タイトルの構成を Flat Config で実現しようと思ったら、若干ハマったので雑に書きました。 TL; DR 別途必要なライブラリはインストールしてください。 import globals from "globals"; import pluginJs from "@eslint/js"; import tseslint from "typescript-eslint"; import pluginVue from "eslint-plugin-vue"; import vueParser from "vue-eslint-parser"; import eslintConfigPrettier from "eslint-config-prettier"; export default [ { languageOptions: { globals: { ...globals.brows
📈 Tracking: ESLint v9 support · Issue #18391 · eslint/eslint
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
JSer.info #702 - typescript-eslint v8がリリースされました。 Announcing typescript-eslint v8 | typescript-eslint ESLint 9のサポート、projectServiceをStableに変更、プリセットのルール変更などが行われています。 jQuery UI 1.14.0がリリースされました。 jQuery UI 1.14.0 released | jQuery UI Blog jQuery UIはすでにメンテナンスモードとなっていますが、このリリースでは今後のメンテナンスのしやすさに向けた変更が行われています。 Plans for jQuery UI 1.14, dropping support for UI <1.12 in the Download Builder | jQuery UI Blog
📈 Tracking: Flat Config support · Issue #18093 · eslint/eslint
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
JSer.info #688 - zx 8.0.0がリリースされました。 Release 8.0.0 · google/zx パッケージサイズの削減、$.syncの追加、inputオプションの追加、AbortControllerのサポート、killメソッドの追加などが行われています。 そのほかには、$.verboseのデフォルト値をfalseに変更、ssh APIの削除などの変更も含まれています ESLint 9.0.0がリリースされました。 ESLint v9.0.0 released - ESLint - Pluggable JavaScript Linter Node.js 18.18未満のサポート終了、Flat Configをデフォルト化、ビルトインのformatterの一部をパッケージに移動、JSDocのルールを削除、eslint:recommendeddの更新などの変更が行われ
JSer.info #695 - Vitest v2.0.0-beta.5がリリースされました。 Release v2.0.0-beta.5 · vitest-dev/vitest --merge-reportsがカバレッジをサポート、Promiseベースのmockに対するAssertionの追加、ブラウザモードの改善などが含まれています。 VitestのBrowser Modeは、jsdomやhappy-domを置き換える形で、コンポーネントテストのための仕組みとして作られています。 開発中のVitest 2.0ではCommands APIとmodule mockingが追加されています。 次のIssueに、VitestのBrowser Modeの目的や方向性についての解説が書かれています。 Vitest Browser Mode · vitest-dev/vitest · Discus
Migrate to ESLint 9.x
Have you updated your ESLint setup to version 9.x? This version includes many breaking changes. Two major changes you need to consider are: Node.js < v18.18.0 and v19 are no longer supported. Flat config is now the default and has some changes. Flat config ESLint’s new flat config system makes setting up easier by using just one JavaScript file (named eslint.config.js, eslint.config.mjs, or eslint
ESLintのルールを全部読む
全部読んで、使うのか使わないのか、使うならどういう設定にするか、を全部考える。 airbnb-base を使いがちだったが自社のルールセット作るうえでは通ったほうが良い道なのではと思ったので、やる。 array-callback-return ArrayやArray.prototypeに生えている関数(Arrany.fromやArray.prototype.everyなど)が引数にcallbackを取る場合に、callbackで必ずreturnを書くことを強要するルール。 // だめな例 /*eslint array-callback-return: "error"*/ var indexMap = myArray.reduce(function(memo, item, index) { memo[item] = index; // returnがない }, {}); var foo =
こんにちは，株式会社 AbemaTV Web browser チームの山﨑です． 私たちのプロダクトでは JavaScript や TypeScript などの静的解析ツールである ESlint を CI で活用しています．しかし，ESlint の実行が不安定になっており開発速度や開発者体験が低下している問題が発生していました．具体的には， eslint を実行している CircleCI のインスタンスクラスを large にしても，job の失敗率が 50% を超えてしまっているような状態でした． この問題を解決すべく，eslint のルール毎の実行時間を計測する TIMIMG オプションを活用することでボトルネックとなっていたルールの特定・精査を行いました． 今回の記事では，不安定だった CI 上での ESlint 実行を TIMIMG オプションを活用し安定化させるに至った話をします
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2024年9月 俺の eslint.config.js
仕組みと嬉しさから理解するeslint FlatConfig対応
【Next.js】eslint + pretteirをやめてBiomeにした話
ESLint の Suggestions から学ぶ、コードの自動修正の奥深さ - mizdra's blog
ESLintのFlat Config移行でやって良かったこと
ESLintのローカルルールで独自のコーディング規約を実装する - ドワンゴ教育サービス開発者ブログ
ESLintがJSONとMarkdownのコードチェック機能をサポ―ト | gihyo.jp
アクセシビリティを担保するためにESLintの独自ルールを作っている話 - SmartHR Tech Blog
初めてESLintのカスタムルールを作ったらチームで使われるようになった話
ESLint v9.0.0 released - ESLint - Pluggable JavaScript Linter
Announcing typescript-eslint v7 | typescript-eslint
eslint-plugin-unicornでファイル名のケーススタイルを統一する
ESLint v9.10.0 released - ESLint - Pluggable JavaScript Linter
【ESLint】Reactで”&&”で分岐した際、うっかり「0」を表示しないためのルール3選
「ESLint」がJSONとMarkdownの文法チェックに対応 ～より汎用的なlinterへと進化／JavaScriptのソースコードを静的解析して文法の誤りを検出
2024-02-20のJS: ES2024 RC、typescript-eslint v7、React Compiler
2024-08-06のJS: typescript-eslint v8、jQuery UI 1.14.0(IEサポートの終了)、Porffor
2024-04-11のJS: zx 8.0.0、ESLint 9.0.0、Flowの`component`構文
2024-06-03のJS: vitest v2.0.0-beta.5(browser mode)、Rspack v0.7、ESLint Migrator
重い lint ルールを特定しよう！TIMING オプションで ESLint 実行速度改善