はじめに こんにちは、がんがんです。 2024 年 4 月、Nuxt から Nuxt ESLint というモジュールが公開されました。Nuxt ユーザー待望の All-in-one ESLint モジュールです。 本モジュールの登場により Nuxt におけるリンターの設定方法が大きく変わりました。 本記事では Nuxt ESLint を用いたマイグレーションを中心に新しい Nuxt ESLint をセットアップしていきます。 Nuxt ESLint とは Nuxt ESLint はAll-in-one ESLint integration for Nuxtと公式ドキュメントに記載がある通り、Nuxt ユーザーのための All-in-one モジュールです。 今までの Nuxt ユーザーは Nuxt3 で ESLint を使う場合、どれが Nuxt 公式のルールだろう Nuxt で ESLi
eslint-plugin-import-accessで「そこからそれはimportしないでください！！」を防ぐ
eslint-plugin-import-accessで「そこからそれはimportしないでください！！」を防ぐ この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 16日目の記事です。 3行で eslint-plugin-import-accessで「ディレクトリの他の階層からimportしてほしくないメンバ」を定義できるよ！ さらに defaultImportability: "package"を指定するとちょっと初見殺し感があるけどかなり強力になるよ！ re-exportを使う場合はビルドパフォーマンスやバンドルサイズに影響する可能性があるから気をつけよう！ eslint-plugin-import-accessとは アプリケーションなどを開発しているとき、あるモジュールの範囲内でのみ使用してほしい（=あるモジュールの中に隠蔽したい）変数や関数を定義したくな
📈 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
結論 eslint:recommended や plugin:@typescript-eslint/recommended を使用するだけでは no-floating-promises や restrict-plus-operands などの重要[1]なルールが有効になりません。 plugin:@typescript-eslint/recommended-type-checked を使用すると、これらのルールをまとめて有効にできます。 recommended? TypeScript のプロジェクトではともに導入されることが多い ESLint と typescript-eslint 。公式ドキュメントの Getting Started に則って進めると、以下のようなconfigになっていることが多いのではないでしょうか。 module.exports = { extends: [ 'esli
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のフォーマット系ルールの廃止など: Cybozu Frontend Weekly (2023-11-07号)
こんにちは！サイボウズ株式会社フロントエンドエンジニアのおぐえもん（@oguemon_com）です。 はじめに サイボウズでは毎週火曜日にFrontend Weeklyという「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/11/07のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 Deprecation of formatting rules 2023/11/03リリースのeslint v8.53.0からスタイルフォーマット系のルールがdeprecatedになりました。メンテナンスの負荷軽減が主な理由です。 本バージョンではarray-bracket-newlineをはじめとする67のルールがdeprecatedの対象になっています。 Jest v30.0.0-alpha.1 Jestの次世代バージョ
GitHub - vitest-dev/eslint-plugin-vitest: eslint plugin for vitest
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
GitHub - eslint-stylistic/eslint-stylistic: Monorepo for ESLint Stylistic plugins and configs
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
こんにちは。技術本部ウラカタ開発部のkaorun343です。フロントエンドエンジニアのチームでは継続的に開発環境の改善活動をおこなっています。今回はこの活動において実施した、React Routerのアップデート作業について紹介します。 はじめに 方針 移行ガイドにそって更新作業を実施する ESLintを用いる AST Grepについて ESLintを活用した移行作業 ルート定義の修正 <Switch> の中にある <Redirect> を除去 <Switch> の中にある <Route> 以外のコンポーネントの除去 コンポーネントの修正 route propsを利用している箇所の修正 最後に はじめに アソビューの社内向け管理画面はReact Routerを用いたシングルページアプリケーションとして構築しています。この管理画面アプリケーションは長らく依存パッケージの更新がなされていなかっ
Change Request: Deprecate formatting rules and recommend using a source code formatter · Issue #17522 · 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
To address: If you are using any of these formatters via the -f command line flag, you’ll need to install the respective package for the formatter. Related issue(s): #17524 Removed require-jsdoc and valid-jsdoc rules The require-jsdoc and valid-jsdoc rules have been removed in ESLint v9.0.0. These rules were initially deprecated in 2018. To address: Use the replacement rules in eslint-plugin-jsdoc
typescript-eslint is the tooling that enables standard JavaScript tools such as ESLint and Prettier to support TypeScript code. We've been working on a set of breaking changes and general features that we're excited to get in front of users. And now, we're excited to say that typescript-eslint v8 is released as stable! 🎉 We'd previously blogged about v8 in Announcing typescript-eslint v8 Beta. Th
GitHub - antfu/eslint-flat-config-viewer: A visual tool to help you view and understand your ESLint Flat config.
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
まじめに Flat Config の移行をするととっても時間かかりますよね？いくつもリポジトリ持ってるとどんどん時間が溶けていきます。 それでも ESLint v9 の新機能は使いたいんだよなーとか、ESLint v9 にしないと dependabot や renovate がうるさくてかなわんとか、という人（それはつまり僕のこと）のための選択肢をいくつか書いてみようと思います。 @eslint/migrate-config使う 物はこれです。 この方法は次のドキュメントに書いてあります。 以下のコマンドでとりあえず Flat Config で動きそうなeslint.config.*が生成されます。 npx @eslint/migrate-config .eslintrc.js # .eslintrc.json 使っている場合 # npx @eslint/migrate-config .e
この記事は Cybozu Frontend Advent Calendar 2023 の 24 日目の記事です。 先日リリースされた ESLint v8.56.0 でオプション reportUnusedDisableDirectives が改善された話です。 元々どういうオプションだった？ // eslint-disable-line みたいなルール無効化ディレクティブを書いたけど、しばらくして何かしらのコード修正の影響でもうそのルール違反は発生しなくなって、でも無効化ディレクティブは消し忘れて無駄に残っている、みたいな状態は起こりがちです。 例えば以下のように non null assertion (!) が一時的に必要になって disable したけど、
eslint-plugin-vuejs-accessibilityとは何か eslint-plugin-vuejs-accessibilityは、Vue.jsのコンポーネントにおけるアクセシビリティの問題点を検出するためのESLintプラグインです。 類似するものとしてeslint-plugin-jsx-a11yがあります。これはReactのJSXにおけるアクセシビリティの問題を検出するためのESLintプラグインです。今あるルールはこのプラグインから参考になっている部分がいくつかあります。 eslint-plugin-vue-a11yとの違い 元々は個人で開発していたeslint-plugin-vue-a11yというものがあります。 こちらのeslint-plugin-vue-a11yは現在メンテナンスがされておりません。今回紹介するeslint-plugin-vuejs-accessi
Configuration Files (New) - ESLint - Pluggable JavaScript Linter
This config system is feature complete but not enabled by default. To opt-in, place an eslint.config.js file in the root of your project or set the ESLINT_USE_FLAT_CONFIG environment variable to true. To opt-out, even in the presence of an eslint.config.js file, set the environment variable to false. If you are using the API, you can use the configuration system described on this page by using the
Vite+React+TypeScript+EsLintで、Importパスにエイリアスを使うためにハマったこと
環境 Windows11 node: v16.13.2 react: v17.0.2 その他 Vite + React + TypeScriptでパスエイリアスの設定方法 src/components/Page1.tsxファイルに定義しているPage1コンポーネントを 下記のように@から始まるパスとしてインポートできるように設定します。
SvelteのESLintおすすめ設定
0.はじめに最近ESLintの有用性を実感している清水琢巳です。 私は、株式会社ネクストビートで「おもてなしHR」という地方創生に関わる、宿泊業界に特化した転職支援プロダクトの開発をしています。 現在おもてなしHRでは、Svelteを採用して開発しています。 その開発する中で、SvelteのESLint設定について調査をしました。 今回はその結果を共有します。 ※ 本記事はeslint-plugin-svelte［1］を参考にし、私が翻訳した内容を記載しています。そのため言い回しが異なっている場合がありますが、ご了承ください。 目次本記事の構成は以下のとおりです。 1. SvelteのESLintの導入方法 2. plugin:svelte/recommendedの設定内容 3. 個別に追加したおすすめの設定 4. 私のベスト3 5. まとめ 6. 参考文献 7. 告知 1. Svelte
ESLintからBiomeに移行しました｜いえもん
こんにちは。フロントエンドエンジニアのiemongです。 noteで開発しているmonorepo環境のLinterをESLintからBiomeへほぼ移行しました。それについて共有します。 移行のモチベーションnoteではNuxtからNext.jsへのリプレイスを進めている最中で、monorepo環境で6個のアプリと22個のpackageがあります。TurborepoのRemote Cachingを使うなどしてタスクの実行速度の改善は既にやってたのですが、Componentの数が増えてきたせいかCIでlintが途中でkillしてしまうことがあったり、キャッシュがない場合にLintだけで2~3分かかるpackageなども存在しました。また、ESLintのFlat Config対応も進めていきたかったのですが、使用しているESLintのplugin側の対応がまちまちで着手しづらい状況でした。 そ
GitHub - eslint-types/eslint-define-config: Provide a defineConfig function for .eslintrc.js files
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.
ESlintとPrettierの使い方と導入方法を初心者向けに解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、新米エンジニアのにっしーこと西澤です。 今年の4月からエンジニアになった私が直面している悩みがあります。それは、「綺麗なコードを書きたいけど、そもそも綺麗なコードがなんなのかがわからない。ルールもわからないから、どうしたらいいかわからない……」ということ。 同じ悩みを持っている方は多いんじゃないでしょうか？ そこでこの記事では、そんな悩みを解決してくれるESlintとPrettierについて紹介します！ なぜESlintとPrettierがおすすめなのか 導入するメリットはズバリ、ある程度のクオリティを保ちながらコードを書けるようになることです。また、コードが綺麗になることで可読性が高くなり、コードレビューの手間が減るなどたくさんのメリットがあります。 ESlintとは？ ESlintはJavaScriptやTypeScriptなどの静的解析ツールです。 と紹介されているのをよ
ESLint Flat Config メモ
設定ファイル 以下の3通り。 eslint.config.js eslint.config.mjs eslint.config.cjs プロジェクトのルートディレクトリに置く必要あり。 以下のようにexport defaultで配列を返し、その中にオブジェクトで設定を並べていく。 export default [ { rules: { semi: "error", "prefer-const": "error" } } ]; Configuration Objects export defaultで返す配列に含まれるオブジェクト（以降、「設定オブジェクト」）が持てるプロパティ一覧。 files globパターンの配列。設定オブジェクトに記述された設定を反映したいファイルを指定。 filesがない場合、その設定オブジェクトに記述された設定は他の設定オブジェクトで指定されたすべてのファイルに対
Highlights Here are some of the key changes in this release. Experimental TypeScript configuration files Arya Emami landed experimental support for TypeScript configuration files. Specifically, you can now use eslint.config.ts, eslint.config.mts, and eslint.config.cts files as your configuration files. Because this feature is experimental, you’ll need to use the unstable_ts_config feature flag: np
ESLintをより強力に！eslint-plugin-unicornとeslint-plugin-perfectionistの活用法
はじめに ESLintはJavaScriptやTypeScriptのコード品質を向上させるためのツールですが設定に悩むことも多いです 本記事ではESLintの設定をシンプルかつ強力にするための2つのプラグインeslint-plugin-perfectionistとeslint-plugin-unicornを紹介します これらのプラグインを使うことで、手間をかけずに厳格なコードチェックを実現できます！ eslint-plugin-perfectionistとは eslint-plugin-perfectionistはオブジェクト、インポート、型、列挙型、JSXプロパティなどのデータを整然と並べ替えるためのESLintプラグインです 並べ替えの基準にはアルファベット順や自然順、行の長さ順などがあります このプラグインの特徴としてすべてのルールが自動修正可能であり、開発者が手動で修正する必要がな
Biome v1.7からPrettierとESLintから移行するためのコマンドが追加されたので、既存のNext.jsプロジェクトで試しに移行コマンドを叩いてみました。 biomejs.dev Biomeのインストールと初期設定 ESLintからの移行コマンド Prettierからの移行コマンド package.jsonのscript変更 実行してみる Biomeのインストールと初期設定 Biomeをインストール。 > npm i --save-dev --save-exact @biomejs/biome@latest added 3 packages, removed 81 packages, and audited 891 packages in 5s 157 packages are looking for funding run `npm fund` for details 3
ESLintの新しいFlat Configは、デフォルトではファイル名と拡張子が固定でeslint.config.jsしか使えない。eslint.config.mjsが使えない。 つまり、プロジェクトのpackage.jsonのtypeに依存して、中身がCommonJSかESMなのかが変わってしまう。 これは実際けっこう面倒になりそうで、自分で使う設定ファイルは共通で使い回すことになると思うけど、プロジェクトによってrequire()を使うCJS用とimportを使うESM用で書き分けないといけなくなる。 一応コマンドライン引数を使えば任意のファイル名を設定ファイルとして渡すことはできるけど、その場合は環境変数でFlat Configを有効化する必要もあるので、都度手で打つのは厳しい長々としたコマンドになってしまう。 ESLintチームは、これに関してかなり固い決意を持っているようなので覆
eslint-config-* の比較表
以下の4つの config の比較表です。 eslint:recommended eslint-config-standard eslint-config-airbnb-base eslint-config-google フレームワークを依らないルールについて比較したいので eslint-config-airbnb から React 関係の plugin を除外した eslint-config-airbnb-base を使用します。 バージョン情報 使用する各パッケージのバージョンは下記の通りです。 eslint: 7.25.0 eslint-config-standard: 16.0.2 eslint-config-airbnb-base: 14.2.1 eslint-config-google: 0.14.0 eslint-plugin-import: 2.22.1 eslint-pl
ESLint Stylistic
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
To address: If you are using any of these formatters via the -f command line flag, you’ll need to install the respective package for the formatter. Related issue(s): #17524 Removed require-jsdoc and valid-jsdoc rules The require-jsdoc and valid-jsdoc rules have been removed in ESLint v9.0.0. These rules were initially deprecated in 2018. To address: Use the replacement rules in eslint-plugin-jsdoc
new Date() と Date.parse() だけを禁止したい場合は amzn/eslint-plugin-no-date-parsing などが使えますが、 Date オブジェクトに生えている全てのメソッドも禁止したい場合は、以下のようなルールを書くことで実現できます。 （ESLint Flat Config を使う場合は適宜読み替えてください。） { "rules": { "no-restricted-syntax": [ "error", { "selector": "NewExpression[callee.name='Date']", "message": "Use dayjs instead." }, { "selector": "CallExpression[callee.object.name='Date']", "message": "Use dayjs inste
Nuxt3で「eslintrcとprettier」から「flat configとeslint stylistic」へ移行した話
はじめに こんにちは、株式会社 Gerunda の齋藤です。 昨年 2023 年の 10 月に Flat config への移行に関するロードマップの発表からしばらく経ちました。 2024 年 4 月に eslint の v9 がリリースされます。現在 flat config が標準となり、eslintrc は非推奨となりました。次の v10 では完全に eslintrc は削除され使えなくなる予定になっています。そこで今回 eslintrc から flat config へ移行したので、ここに記録を残すこととします flat config とは そもそも eslint の目指す flat config とは何なのでしょうか。 eslint 公式のThe goals of flat configには以下のように書かれています Logical defaults One way to defi
All TypeScriptのMonorepoのlinterをESLintからbiomeにしたらlintが25倍速くなった🚀 - KAKEHASHI Tech Blog
フロントエンド(React.js TypeScript) バックエンド(Node.js TypeScript) インフラ(CDK TypeScript) の Monorepo の linter を ESLint からbiomeに変更したら lint が約50秒かかっていたのが大体2秒になって嬉しかったので共有します。 こんにちは、カケハシでソフトウェアエンジニアをしている加藤です。 本エントリはカケハシ Part 2 Advent Calendar 2023の 21 日目の記事です。 ぜひ Part1 も 2 も見て頂けたらと思います。 同じカケハシ社内の他のチームでは以前 コードフォーマッターを Prettier から dprint にしたら 10 倍以上速くなった話 🚀 で紹介した通り、dprintを導入していますが、今回僕たちのチームは biome を導入してみました。 導入してみ
Webエンジニアのhikaeです。 皆さんは「SOLID原則」についてどの程度知っているでしょうか？ ソフトウェア開発においてメンテナンスしやすいコードを書くことは、とても重要な要素です。 今回はD（Dependency inversion principle）「依存性逆転の原則」にあたる内容で、 対象のパスで対象のファイルをインポートするのを禁止する仕組みを整えてみました。 日本語の記事が見当たらなかったので、始めてみたい人はこの記事を参考にプロジェクトに導入してみてはいかかでしょうか？ 今回の実装PRは以下に含まれています。 インストール 依存性逆転の原則に関しては以下の記事を参考にしてください。ここではルールの設定方法について説明します。 使用するライブラリはeslint-plugin-importです。メンテナの方、ありがとうございます。 npm install --save-de
Highlights This release backports from v9.x to v8.x two new features and several bug fixes related to the flat config system to help plugins, integrations and users migrate to flat config ahead of the final v9.0.0 release. Support for eslint.config.mjs and eslint.config.cjs This release introduces support for eslint.config.mjs and eslint.config.cjs configuration files to v8.x in addition to eslint
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt3のLinterは Nuxt ESLint で整備する (マイグレーションあり)
typescript-eslintのrecommendedって2種類あんねん
ESLintを活用したReact Routerのアップデート作業 - asoview! Tech Blog
Migrate to v9.x - ESLint - Pluggable JavaScript Linter
Announcing typescript-eslint v8 | typescript-eslint
【ESLint】Flat Configの移行が面倒！だけどESLint v9を使用したいあなたへ
ESLint v8.56.0 の `reportUnusedDisableDirectives` とは何か？
eslint-plugin-vuejs-accessibility入門
ESLint v9.9.0 released - ESLint - Pluggable JavaScript Linter
既存プロジェクトでPrettier・ESLintをBiomeに移行してみた - もふもふ技術部
ESLint Flat Config を ESM (.mjs) で書く
Migrate to v9.x - ESLint - Pluggable JavaScript Linter
ESLint で Date オブジェクトの使用を禁止する - Qiita
「このパスでこのファイルのインポートをさせたくない、、、」をESLintでルール化する
ESLint v8.57.0 released - ESLint - Pluggable JavaScript Linter