「実装例から見る React のテストの書き方」をアップデートする
社内の人から、自分が以前書いた次の記事が「便利で助かった！書いた時から何かアップデートある？」ってメッセージがきた。 そんな便利だなんてどうもありがとうございますウフフ、と思いながら書いた日を見てみると 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:
ESLint を使って JSDoc / TSDoc の記述を必須化する
これはなに コードベースに対し JSDoc の記述を必須化するための ESLint 設定手順をまとめたものです。 JSDoc を始めとする Doc コメントはコードに最も近いドキュメントであり、これがあるのと無いのとではコードベースの保守性に天と地ほどの差が生まれます。そんな JSDoc ですが、OSS ならともかく（内製・受託を問わず）商業ソフトウェア開発の現場では軽視されがちです。後からコーディング規約を定めたところで開発メンバーにドキュメントを書く習慣が備わっていなければ書き漏れが頻発するのが関の山です。 コードレビューで都度指摘するにはあまりにコストがかかるため、ESLint に委ねるのが望ましいです。 前提 フレームワークは React（or Next.js）を使っている。 TypeScript を主体としている。 ビルドスクリプトや設定ファイルは JavaScript も併用し
eslintとprettierを併用する時の設定 - すな.dev
業務でeslintとprettierの設定をいじることがあって、そういえばこの2つってどう設定するのがベストなんだっけってなって調べた時のメモ 公式推奨の形もいつのまにやら変わっていて自分が知っている方法ではなかった あと副業でhuskyを設定する機会もあったが、バージョンアップで仕様が変わっていたのでまとめる これらについてはすでにいくつか記事が見られるが、備忘録も兼ねてここでアウトプットしておく 結論、今はeslint-config-prettierのみ設定するのが公式推奨の形 eslint-plugin-prettierとeslint-config-prettier 2020年6月まではeslintとprettierを両方使う場合はeslint-plugin-prettierとeslint-config-prettierの両方を使うのが推奨されていたらしい ただ、今はeslint-p
typescript-eslint v6 アップデートガイド
typescript-eslint v6 リリース！ 2023/07/10 に typescript-eslint の v6 がリリースされました。 メジャーバージョンアップということで多くの BreakingChange があるのですが、その中でもReworked Configuration Namesと呼ばれる変更は利用者に大きな影響を与えそうです。 Reworked Configuration Namesはざっくり言うと「config に書くrecommendedのようなルールセットの名前や枠組みが変わるよ」という変更です。 ルールセットの名前だけでなく、含まれるルールや分類自体に変更があるので、設定ファイルを v5 のままアップデートしてしまうと意図したルールセットと異なる設定になってしまいます。 ここでは上記の記事にある変更点を紹介しつつ、なるべく既存の設定のままアップデートする
storybook-vite
2020/05/20 こんだけdevDependencies で インストールされた。 babel 入るんがやだなぁ @babel/core: v7.18.0, @storybook/addon-actions: v6.5.3, @storybook/addon-essentials: v6.5.3, @storybook/addon-interactions: v6.5.3, @storybook/addon-links: v6.5.3, @storybook/builder-vite: v0.1.35, @storybook/react: v6.5.3, @storybook/testing-library: v0.0.11, babel-loader: v8.2.5, eslint-plugin-storybook: v0.5.12, package.json の scripts に
【Typescript】baseUrlからインポートしたときのESLintエラーUnable to resolve path to module~ を解決する方法 - Qiita
. ├── dist/ ├── node_modules/ ├── src │ ├── │ ├── │ ├── routes/ │ │ ├── │ │ └── foo/ │ │ └── hoge.ts │ └── types/ │ └── index.d.ts │ ├── .eslintrc.js ├── tsconfig.json └── 他
TypeScirptのプロジェクトにエイリアスを設定して絶対パスでimportするメモ
TypeScriptのプロジェクトを作る度に設定すると思うのでメモ。 前提 Link to heading Webpackでプロジェクトを管理している Linterはeslintを使用している tsconfig.jsonの設定 Link to heading tsconfig.jsonのcompilerOptionsを設定してsrc以下のディレクトリに対してエイリアスを貼る。 エイリアスになる文字は何でも良いが、私はnpm経由でimportするmoduleと混同しないように @/ を使用している。 { "compilerOptions": { ~~~ "baseUrl": "./", "paths": { "@/*": ["src/*"] }, ~~~ } } import { Configuration } from 'webpack'; const config: Configurat
TypeScript CDN の jQuery を使いたい - かもメモ
テンプレートエンジンで直接 script を呼ぶ古代の環境の開発をしています。 前回 TypeScript を babel + webpack でトランスパイルできるようにしたのですが、なんとこのプロジェクトでは古の jQuery が使われていました！！！！ CDN から読み込まれている jQuery を使用している箇所で TypeError になってしまうので TypeScript で CDN で読み込まれている jQuery を扱えるようにしたメモ (レガシー環境過ぎて誰得なんだ…) Webpack で bundle しないための設定 Externals The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the cre
kintoneのアクセシビリティ改善とESLintルールの整備 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。Poca11y（ポカリ）チームのSUGI(@blindsoup2p1)と小林(@sukoyakarizumu)です。 わたしたちPoca11yチームは「kintone」のアクセシビリティ改善活動に参加しています。この記事ではkintoneのアクセシビリティを改善するチーム体制について解説します。さらにPoca11yチームとkintone開発チームが協力して整備したアクセシビリティを強化するためのESLintルールについても解説します。 Poca11y（アクセシビリティ）チームとkintoneのアクセシビリティ改善 Poca11yチームとは Poca11yチームはサイボウズ全体の「アクセシビリティ」向上を目的としたチームです。Poca11yチームでは主に以下3種類の活動を行なっています。 社内啓発：アクセシビリティの社内研修・勉強会・ガイドライン作成などを行います。 製品改善：サ
【React / TypeScript】ESLint + Prettier を設定する（ESLint 編）
とはいえ, まるっと設定を実施するのでいずれ上記は別の箇所に移動していきます。 ESLint の初期設定 公式の Getting Started を参考に実施していきます。 簡単に eslint --init を使って, 構成ファイル生成とライブラリのインストールをやります。（eslint をグローバルインストールしたくないので, 公式通りに便利な npx で実施していきます） ちなみに, 公式の Getting Started の先頭の npm install eslint --save-dev を飛ばしているのは, eslint --init の最後で npm install に誘導してくれるからです。 ? What type of modules does your project use? … ❯ JavaScript modules (import/export) CommonJ
TypeScript / JavaScript の import を自動でソートする - Sansan Tech Blog
こんにちは。Eight でエンジニアをしている鳥山（@pvcresin）です。 マイブームはコンビニで買える GODIVA のベルギーダークチョコレート（アイス）を食べることです。 濃厚で甘すぎず、量も多すぎないところが気に入っています。 今回は TypeScript や JavaScript の import を自動でソートする話をしたいと思います。 といっても、TypeScript でソートがうまく行けば JavaScript でも大抵うまくいくので、主に TypeScript にフォーカスした話になるかと思います。 背景 import をソートしようと思ったきっかけは、チームのメンバーが出した 1 つの PR（プルリクエスト）でした。 新規作成したファイルの import が、ライブラリからの import とその他のファイルからの import でそれぞれまとめられており、見やすい
React+TSプロジェクトで便利だったLint/Format設定紹介
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「linter/formatter」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいて便利だったLint/Format関連の設定についてご紹介していきます。 使っているのは、TSのlintのためにESLint, CSSのlintのためにStylelint, 主なファイルのformatのためにPrettierです。 ESLint pluginsとextendsだけどんなもの入れてるか載せておきます。 "plugins": [ "strict-dependencies", // 後述 "unused-imports", // 後述 ], "extends": [ "a
Next.js (TypeScript) に ESLint と Prettier を導入し、コードを綺麗に保とう | fwywd（フュード）powered by キカガク
どーも、入田 / ぐるたか @guru_taka です！ 本記事では Next.js (TypeScript) を環境構築し、ESLint（読み方：イーエスリント）と Prettier（読み方：プリティア）を導入する方法を紹介します。Next.js のバージョン 11 に対応しており、デフォルトで搭載されている ESLint の設定ファイルをベースとしています。 ESLint と Prettier を駆使することで、コードが綺麗になるため、導入することを強くオススメしたいです。本記事では、VS Code 上で、ESLint で構文解析しながら、ファイル保存時に ESLint + Prettier によるコード整形する方法をハンズオン形式でまとめています。
ESLint 設定を作成する技術
ESLint は関連するパッケージが多く、また、活発に開発されていることもあり、設定するのに一苦労ということも多いツールです。そういった方向けに ESLint の設定を作るための基礎的な説明を書いてみました。 設定ファイルの拡張子 設定用のファイルとしてプロジェクトのルートディレクトリーに .eslintrc.yml もしくは .eslintrc.json を作成しましょう。一般的な開発用途であれば YAML か JSON で事足りるからです。 YAML と JSON のどちらを選ぶかはお好みでどうぞ。ちなみに ESLint は .eslintrc.* もしくは package.json 内の eslintConfig 設定を読んでくれます。 また、 package.json 内に設定を書くのは避けましょう。様々な理由で package.json は変更されるため、 Git 管理下において
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js で Props をソートすると gzip 時のビルドサイズを少しだけ減らせる
Preactをはじめる - Qiita
TypeScript + Gatsby + Storybook環境でimport aliasを利用する | tamalog
ESLintで Parsing error: Unexpected token = となる場合の対処法 - Qiita
GitHub - jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements.
