【ESLint】Reactで”&&”で分岐した際、うっかり「0」を表示しないためのルール3選
のように実装することが多いと思います。 このような実装の罠として、変数がbool型ならよいのですが、たとえばnumber型かつ0が格納されている際、式の評価としては左辺の0が返されてしまい、ブラウザ上に「0」とだけ表示されたり、React Nativeでは最悪の場合クラッシュを引き起こします。 対策としてはシンプルで、かならず!!を先頭に付与すると良いです。
のように実装することが多いと思います。 このような実装の罠として、変数がbool型ならよいのですが、たとえばnumber型かつ0が格納されている際、式の評価としては左辺の0が返されてしまい、ブラウザ上に「0」とだけ表示されたり、React Nativeでは最悪の場合クラッシュを引き起こします。 対策としてはシンプルで、かならず!!を先頭に付与すると良いです。
TSKaigi 2024 で話した「Prettier の未来を考える」という発表のスピーカーノートです。スライドは こんにちは、今日は「Prettierの未来を考える」というタイトルでお話させていただきたいと思います。 鈴木 颯介と言います。ユビー株式会社でプロダクト開発エンジニアとして働きながら、筑波大学でパソコンの勉強をしています。オープンソースソフトウェアが好きで、今日お話するPrettierのメンテナーをしたり、トランスパイラのBabelのコミッターをしたりしています。最近はWebKitのJSエンジンにたくさんパッチを投げたりしています。 私が働いているユビーは、TSKaigiのGold Sponsorをさせてもらっています。ブースがあります。ユビーのグッズの他に、Prettierのステッカーも配布しておりますので、興味がある方はぜひお立ち寄りください。 まず、Prettierにつ
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
📈 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
社内の人から、自分が以前書いた次の記事が「便利で助かった！書いた時から何かアップデートある？」ってメッセージがきた。 そんな便利だなんてどうもありがとうございますウフフ、と思いながら書いた日を見てみると 2022-08-09 だった。もうすぐ 2 年経とうとしてる。時の流れが早くて怖い。 この記事に書かれた実装例はリポジトリにまとめていたんだけど、当然、何かメンテをしていたわけもなく、2022 年当時の状態がそのまま残っていた。 せっかく便利に思ってくれる人がいたので、内容をアップデートする。 アップデートまとめ メジャーバージョンのリリースやビルドツールの統一の観点で Jest から Vitest に移行 useFakeTimers({ shouldAdvanceTime: true }) @testing-library/reactを v15 にバージョンアップ MSW を v2 にバ
Biome v1.7
Today we’re excited to announce the release of Biome v1.7! This new version provides an easy path to migrate from ESLint and Prettier. It also introduces experimental machine-readable reports for the formatter and the linter, new linter rules, and many fixes. Update Biome using the following commands:
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の更新などの変更が行われ
anonymous default export? anonymous default export とは名前のとおり匿名でデフォルトエクスポートを宣言することです。必ず名前を付与しなければいけない名前付きエクスポートと異なり、以下はすべて有効な構文です。 export default class { constructor(options) { this.options = options; } } export default function () { } export default 1 export default { a: 1 } export default [1, 2, 3]
📈 Tracking: Flat Config rollout · 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の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
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
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
Prettierを使わない理由
この記事はPrettierを使用している人を非難したり、脱Prettierを推奨する事を目的としていません。 こういった考え方もあるということをひとつの意見としてご覧いただければ幸いです。 勘違いしている人が多そうなので追記します。 Prettierを使わないというのは私が独断で決めた事ではないです。 チームが発足する際の技術選定で合意は取れていますし、私が関与していない別のチームでも同様にPrettier無しで開発しています。 私達のチームはメンバー同士を互いに信頼していますし、細いスタイルで喧嘩を始めるようなメンバーは居ないので安心してください。 はじめに Prettierはコードフォーマッターとして広く使われているツールです。 コードスタイルに関する議論をなくすことを目的としており、ESLintとは異なりデフォルト設定のままですぐに使えるのが特徴です。 さらに、PrettierはJS
こんにちは、kintone 新機能開発チームに所属している 23 卒の柿崎です。 この記事では、私が初めて ESLint のカスタムルールを作って npm で公開し、普段業務で触っているコードに適用されるまでについて紹介しようと思います。 「自分でも ESLint のカスタムルール作れそう！作ってみよう！」と思ってもらえたら嬉しいです。 実際に作ったものはこちらです 👇 きっかけ kintone 新機能開発チームは kintone の領域ごとに複数のサブチームに分かれていて、その中でも私はアプリの利用に関する領域にオーナーシップを持つアプリチームにいます。 アプリチームでは現在フロントエンドのフレームワークの刷新を行っています。 kintone のアプリとは、ユーザーが作ることのできる業務システムのことで、アプリにはフィールドという概念があり、その数は 20 個ほどです。 フィールドごと
こんにちは。プロダクトエンジニアのatsushimと言います。 社内ではプロダクトを開発する傍ら、アクセシビリティを高めるための改善や仕組みづくりを進めています。 この記事ではSmartHR独自のESLintのルールを作っている話をしたいと思います。 SmartHRでは アクセシビリティ（以降a11y） を考慮したアプリの開発・改善を行っており、過去記事でその様子をご確認いただけます。 SmartHR Tech Blog: アクセシビリティ の検索結果 ただ普段の開発中、a11yを意識しつつ開発を行うことは、エンジニアにかなりの負荷がかかります。 フロントエンドの経験が少なく基本的なマークアップの知識が足りていない アクセシビリティを意識してね！といわれても何をすればいいのかわからない そのため、SmartHRでは独自のESLint ルールを作成し、CIに組み込むことでa11yを担保、改善
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
Security.Tokyo #3の発表資料です。 クライアントサイドのパストラバーサルと、postMessage経由の脆弱性を取り上げました。
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で最終的な承認を得る予定です
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
チームで同じような React コンポーネントを書く
はじめに 「eslint-plugin-react の plugin:react/recommended に含まれていないルールにも有効なものがあるよ！みんなで同じようなコンポーネント書いて、レビューを楽にして保守性も上げよう！」という内容の記事です。 この記事では React の関数コンポーネント、TypeScript、Prettier を使っている前提で書いています。そのため、タグの位置調整など Prettier で対応可能なものは Prettier に任せる方針です。 先に結論の .eslintrc.cjs を載せておきます。React 以外の設定は省いています。 { extends: [ "plugin:react/recommended", "plugin:react/jsx-runtime", "plugin:react-hooks/recommended" ], rules:
はじめに Next.jsなどReactのプロジェクトにはlinterとformatterが必須でeslintとpretteirを使うと思います。 しかし、導入するとなると考慮すべき点や面倒な点が結構あります。 以下は一例です。 eslintとprettierは設定が複数あり、プラグインのインストールが必要 eslint-plugin-prettierを使えば、pretteirがなくてもformatterは実現できるため、そもそもprettierいるのか問題 逆にeslintはlinterとしての役割のみにして、formatterの機能は持たせたくない そこででてくるのがBiomeです。 Biomeとは 一言でいうとeslintとprettierを一つにしたものです。 以下、公式の引用とページです。 Biome はWebプロジェクトのための高性能なツールチェーンであり、プロジェクトの健全性を
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
【2024年1月】Next.js での新規アプリの構成 & Next.js ディレクトリ構成(features)
選定の方針 ログインしての利用がメインで、ユーザーがあまり多くないサービスを想定しています。 開発効率の重視して、出来るだけWebアプリに集中できる構成を目指しています。 コスト理由で中断しないように、個人でも支払える費用感を意識しています。 Next.js ライブラリ構成 メインで使っているライブラリです。Next.js + Vercelの開発体験が良すぎるので、できる限り活用して開発することを意識して作っています。 フレームワーク Next.js メインで使うライブラリ SWR tRPC React Hook Form Jotai Style/CSS に関して Vercelがリリースしたv0をいいなと思って、v0の出力で使われているTailwind CSS + shadcn/uiを使うようにしています。(v0活用は検証中です) よく使うインフラ系サービス Vercel: Gitにpus
Commitzenで開発環境を整備
概要 本記事では、Commitzen を利用し、コミット環境を整備していきます。具体的には、以下についてカバーします。 commitzen で対話的にコミットメッセージを入力可能にする cz-customizable で commitzen のプロンプトをカスタマイズする commitlint でコミットメッセージが規約に沿っているかチェックする husky でコミット前にコミットメッセージが規約に沿っているかチェックする lint-stage でステージングエリアに追加されたファイルに対して ESLint の Linting と Prettier のフォーマットを実行 本記事の構成 Next.js で作業環境を構築 ESLint を設定 Prettier を設定 husky を設定 lint-staged を設定 commitlint を設定 commitzen を設定 cz-custo
このドキュメントは、次の Biome のブログの日本語訳になります。 細かい内容については、ぜひ原文の方を読んでもらえると嬉しいです。 ロードマップ 2024 コアコントリビューターとメンテナーが 2024 年にフォーカスしようとしていることを共有できることはとても嬉しいです。一方で、Biome はコミュニティ主導のプロジェクトであるため、取り上げている全てのアイデアのリリースを約束することはできません。 もしいくつかのアイデアに共感し、それらの開発を加速させたいと思った際には、次のような方法でサポートすることができます。 プロジェクトとコミュニティに参加する。アイデアを実装するためのサポートをすることができます。 スポンサーになる。Biome をお使いの会社では、スポンサーになることができます。Biome は CI の時間を削減し、費用を節約できるほど速いです。パフォーマンスは、プロジェ
JSer.info #675 - Vue 3.4 がリリースされました。 Announcing Vue 3.4 | The Vue Point Vue 3.4ではVueテンプレートのパーサーのパフォーマンス改善、watchEffectの改善、defineModelがStable APIに変更されています。 また、v-bindが同名の場合の省略記法を追加、Hydrationのエラー表示を改善などの変更も含まれています。 破壊的な変更として、global JSX namespaceの型を定義しないように変更、実験的な機能だったReactivity Transformの削除なども含まれています。 関連して、Vue 2.x は2023年12月31日にサポートが終了し、End of Life(EOL)となりました。 Vue 2 Has Reached End of Life 最終バージョンは2.7.
2024-01-01 quick-lint-js is a JavaScript bug finder. Today, version 3.0 makes it also a TypeScript bug finder! quick-lint-js complements TypeScript with beginner-friendly messages and fast linting. install quick-lint-js 🌐 try in browser code on GitHub Example code used in this article has been adapted from various open source projects, including some Copyright Tiny Technologies, Inc. and Copyrigh
この記事は Cybozu Frontend Advent Calendar 2023 の 24 日目の記事です。 先日リリースされた ESLint v8.56.0 でオプション reportUnusedDisableDirectives が改善された話です。 元々どういうオプションだった？ // eslint-disable-line みたいなルール無効化ディレクティブを書いたけど、しばらくして何かしらのコード修正の影響でもうそのルール違反は発生しなくなって、でも無効化ディレクティブは消し忘れて無駄に残っている、みたいな状態は起こりがちです。 例えば以下のように non null assertion (!) が一時的に必要になって disable したけど、
この記事はドワンゴ Advent Calendar 2023 の 22 日目の記事です。 ドワンゴ教育事業Webフロントエンドチームの berlysia です。1 この記事では、オンライン学習サービスN予備校の開発を支えるコーディング規約の考え方に少し触れ、その運用を支えるESLintの活用を紹介します。 この記事の内容は、他社様主催イベントにて発表した内容の再構成です。 speakerdeck.com コーディング規約は実行可能にしたい 教育事業のWebフロントチームには、細かいコーディング規約が書かれた文書は存在しません。コーディング規約はESLintをはじめとする各種ツールによって、自動で検出・修正可能な形になっています。 文書という形でなく、各種ツールのコンフィグファイルとそのコメントとしてまとまっている、と言い換えてもよいかもしれません。ドキュメンテーションは重要な仕事ですが、そ
コンポーネントをアクセシブルに保つ技術
アクセシビリティ Advent Calendar 2023 21日目の記事です。 Ubie株式会社 デザインエンジニアのtakanoripです。 Ubieではデザインシステムの1要素としてコンポーネントライブラリの実装を進めています。その中でコンポーネントをアクセシブルに保つための仕組みをいくつか導入しているので紹介します。 Linter まず一番オーソドックスなものとして、アクセシビリティ向けLintツールを導入しています。 Ubieではeslint-plugin-jsx-a11yとMarkuplintを導入しています。 両者は重複する部分もありますが、eslint-plugin-jsx-a11yはよりReactでの実装を考慮したチェック、Markuplintは純粋なマークアップのチェックに強みがあるので、両方のツールを使用することでより網羅的にチェックができます。 上記Lintはコンポ
フロントエンドのLinterやCIを改善した話
この記事は 株式会社エス・エム・エス Advent Calendar 2023 の21日目の記事です。 介護事業者向けの経営支援サービス「カイポケ」のリニューアルプロジェクトでフロントエンド開発をしている @hush_in です。 今年の4月にエス・エム・エスに入社しました。 入社してからフロントエンドのLinterやCIを改善した話をします。 忙しい人向けまとめ ESLint の recommended 系 extends を追加 全般 eslint:recommended plugin:import/recommended TypeScript plugin:@typescript-eslint/recommended-type-checked plugin:@typescript-eslint/stylistic-type-checked plugin:import/typescri
We're thrilled to announce that oxlint is now generally available! This milestone signifies our team's ability to promptly address and triage issues. Oxlint is a JavaScript linter designed to catch erroneous or useless code without requiring any configurations by default. How to Use At this stage, oxlint is not intended to fully replace ESLint; it serves as an enhancement when ESLint's slowness b
10月28日に開催された「VueFes Japan 2023」のイベントレポートをダイジェストでお届けします。 なお、公式サイトのタイムテーブル内に、一部の講演の資料がアップロードされています。 オープニング 実行委員長・ユーザーグループ代表の川口和也氏から、挨拶がありました。 今回は4トラックでスピーカーは35名、コアチームの来日など充実した内容になっています。またオフラインでの開催は5年ぶりです（台風やコロナの影響で、2018年以来です）。 川口氏は、フェイス・トゥ・フェイスで開催できる嬉しさやスポンサーへの感謝を述べました。 Evan You氏によるキーノート 基調講演はVue.jsの作者であるEvan You氏。広い会場で立ち見もでるほどの盛況でした。Evan You氏は、台風やコロナで日本に来れなかったため、久々の来日とのことです。 Evan You氏はVue.jsとVite
これは、はてなエンジニアアドベントカレンダー2023 4日目の記事です。 3日目は id:mechairoi さんの「SQLiteでLinderaを使った日本語全文検索」でした。 blog.chairoi.me 今日のテーマは、JavaScript 向けの Linter 「ESLint」についてです。ESLint を使うと、JavaScript で書かれたコードを静的解析して、よくある間違いを検出したり、コーディングスタイルを統一できます。 通常、ESLint のルールによって報告された問題 (error や warn) は人が手で修正します。ただし、ルールが報告する問題の中には「fixable」な性質を持ったものがあります。こうした fixable な問題は、eslint --fix で自動修正できます。例えば、object-shorthand ルールによって報告された問題は、以下のよう
Biome はじめました。
モチベーション そもそも TypeScript や JSX に詳しくないのでどう書くのがいいのか悩みたくない ESLint や Prettier の設定を なんとなく 設定して使ってしまっている Formatter / Linter 関連のライブラリの内容を理解せずにアップデートしてしまっている 依存関係は減らしていきたい Rust で書かれた言語向けの高速なツールが好き Rye とか Ruff とか efmt とか Biome Biome は Rust で書かれた Formatter / Linter を含むツール。本当におかしいくらい早い。 全然大きくないが、以下のソースコードに適用したときの速度。 $ pnpm run fmt > biome format --write ./src Formatted 114 file(s) in 11ms $ pnpm run lint > bi
What's coming in ESLint v9.0.0 - ESLint - Pluggable JavaScript Linter
Last month, the Technical Steering Committee (TSC) met to finalize the features for ESLint v9.0.0. This post outlines our plans for v9.0.0. You can keep up to date everything that is planned for v9.0.0 on our project board. Development plan Due to the large number of breaking changes planned for v9.0.0, we have decided to develop this release in two phases: Alpha. The alpha release will be compris
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.
Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜 で発表させていただいたスライドです フラットコンフィグへの移行は最近新卒の方に一部やっていただきました 新卒エンジニアがESLintのFlat Config移行と格闘した話 - ドワンゴ教育サービス開発者ブログ ドワンゴ教育事業採用サイト
Deprecation of formatting rules - ESLint - 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 post, this is the right decision for ESLint going forward. However, to understand how we got here, it’s h
ESLint を eslintrc から Flat Config に移行する、ハマりポイントを添えて。 - Qiita
ESLint の Flat Config は v9 でデフォルトとなり、 v10 で eslintrc は完全に削除されるため、徐々に移行していく方が増えてくる頃合いでしょうか。 私が移行する上でわからなかったこと、ハマったポイントなど残しておこうと思います。 これが誰かの助けになれば幸いです。 ESLint の Flat Config とは ESLint の新しい設定システムです。 今まで ESLint の設定は eslintrc に記述していましたが、Flat Config では eslint.config.js というファイルに記述していく形になります。 eslintrc で書いていたものとの違いは主に以下のものがあります。 plugin や perser の読み込み方が変わった extends が廃止された glob pattern で対象のファイルを毎に設定を書くことができるよう
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TSKaigi 2024 Prettierの未来を考える スピーカーノート
「実装例から見る React のテストの書き方」をアップデートする
2024-04-11のJS: zx 8.0.0、ESLint 9.0.0、Flowの`component`構文
anonymous default export はやめたほうがいいかもね
ESLintのFlat Config移行でやって良かったこと
ESLint v9.0.0 released - ESLint - Pluggable JavaScript Linter
初めてESLintのカスタムルールを作ったらチームで使われるようになった話
アクセシビリティを担保するためにESLintの独自ルールを作っている話 - SmartHR Tech Blog
ESLint v8.57.0 released - ESLint - Pluggable JavaScript Linter
注目したいクライアントサイドの脆弱性2選/ Security.Tokyo #3
2024-02-20のJS: ES2024 RC、typescript-eslint v7、React Compiler
Announcing typescript-eslint v7 | typescript-eslint
【Next.js】eslint + pretteirをやめてBiomeにした話
Migrate to v9.x - ESLint - Pluggable JavaScript Linter
Biome の 2024年のロードマップの公開と v1.5.0 のリリース
2024-01-02のJS: Vue 3.4、Vue 2.xのEOL、quick-lint-js 3.0.0、AstroとDenoの2023年まとめ
TypeScript Clearly & Quickly
ESLint v8.56.0 の `reportUnusedDisableDirectives` とは何か？
ESLintのローカルルールで独自のコーディング規約を実装する - ドワンゴ教育サービス開発者ブログ
The JavaScript Oxidation Compiler
VueFes Japan 2023イベントレポート | gihyo.jp
ESLint の Suggestions から学ぶ、コードの自動修正の奥深さ - mizdra's blog
ESLintのローカルルールで独自のコーディング規約を実装する