ESLint

こんにちは。私は主にReactでWEBフロントエンド開発を行っています。 ESLint v9.0.0のリリースブログによるとESLint v9.0.0以降はFlat configと呼ばれる書き方がデフォルトになるようです。 そこでESLint Flat config時代における、VS Codeを使ったVite × React環境にESLintとPrettierを組み込み、保存時に自動的にフォーマットしてくれる設定をご紹介します。 2024年9月現在、Viteを使ったReactプロジェクトを立ち上げる方法についてです。 ViteによるReact環境構築 パッケージのインストール ESLintの設…

社内 AI にお願いして描いてもらった ESLint flat config のイメージ図 こんにちは。kickflow エンジニアの芳賀と申します。 今回は入社後初めて行った「ESLint の flat config 移行」についてお話します。 自身も久しぶりにガッツリ ESLint と向き合う機会だったので初心に帰り、調べ調べ行いました。

JavaScriptで最も使われているバグ発見ツールであるESLintをインストールします。 eslint.org シンプルなNode.jsファイルに対して、ターミナル上からESLintを実行することを想定しています。 まずは公式サイトに書いてある通りに、プロジェクトディレクトリ配下で、何も考えずインストールコマンドを実行します。 npm init @eslint/config@latest いくつか初期化のための質問をされるので答えて、インストール完了。 早速使うぞ！とコマンドを打ってみたところ、コマンドが見つからないと言われました。 eslint -v zsh: command not f…

こんにちは。KENTEM第１開発部のS.Eです。 私はクラウドサービスのフロントエンドエンジニアとしてプロジェクト業務に携わっています。 現在のプロジェクトは新規で立ち上げ、既に２年ほど経過したような状況です。 プロジェクトメンバーの入れ替えも何度か発生している中で挙がってきた意見があります。 それは『コーディング規約（ルール）がわかりづらい』といったものです。 コーディング規約といっても「末尾にセミコロンを付ける」とか「文字列はシングルクォートで括る」とか単純なものが多いです。 プロジェクトの運用等についてはWikiで示していたりしたのですが、 明確な取り決め等はできておらず、レビュー時の指…

プロジェクトを長い期間メンテナンスしていると、あれ？これなんでこんな書き方になってるんだっけ？という実装に時々出会います。他の人が書いたソースならともかく、自分で書いたにも関わらず、あれ？あれれ？と思うことが良くあります。 ロジックに対するあれれ？ならば、コメントを読んだり、設計ドキュメントを読んだり、実装の前後を読んだりすることで解消することもあるのですが、細かな実装方法に関してはなんだかさっぱりわからなくて、まぁいいか、このままにしちゃえ、ということもままあります。 最近特に気になっているのが、TypeScript で本来必要でないところに現れる謎の optional chain。動作には…

Typescriptのリンタとフォーマッタ リンタ (Linter): フォーマッタ (Formatter): yarnによるリンタとフォーマッタのインストール例 コミットのタイミングでフォーマッタを起動させる方法 Typescriptのリンタとフォーマッタ TypeScriptのコードを保守しやすくし、品質を向上させるためには、適切なリンタとフォーマッタの使用が重要です。 以下は、TypeScriptのリンタとフォーマッタについての基本的な情報です。 リンタ (Linter): リンタは、コード内の潜在的な問題やスタイル違反を検出するツールです。 TypeScriptのリンタとしてよく使われ…

はじめに この記事は、every Tech Blog Advent Calendar 2023 の21日目の記事です！ 男梅シート、あのクセになるしょっぱさと噛めば噛むほど溢れ出てくる旨さは悪魔的ですよね。僕の推しです。 初めまして！エブリーで内定者インターンをしている @きょー です！ インターンでは業務でサーバーやフロントをタスクベースで開発しています。 現在フロントのコードをリプレイスしていて、Eslintの設定ファイルを見直す機会をもらったのでその際に得た知見を共有していきたいと思います！ 導入に至った背景 We expect the first alpha release of ES…

はじめに こんにちは！株式会社リンクアンドモチベーションの中上です。 10月19日（土）に開催される Vue Fes Japan 2024、皆さんも楽しみにしていることでしょう。 弊社リンクアンドモチベーションは、今年のVue Fes Japan 2024にプラチナスポンサーとして協賛しております。当日は私も、「AIとともに歩んだライブラリアップデートの道のり」というセッションで登壇いたします！さらに、PRブースも出展予定ですので、ぜひお立ち寄りください。 すでに公開されているタイムテーブルを確認しましたが、今回のVue Fes Japanには、Vue.js関連エコシステムのコアメンバーが国内…

ESlintをv9に上げるためにFlatConfig化をしていたら下記のエラーに遭遇した TypeError: Key "languageOptions": Key "globals": Global "AudioWorkletGlobalScope " has leading or trailing whitespace. 結論としては、自分のプロジェクトではglobalsを個別にインストールすることで解消できた 実はnpmのglobalsにも下記の記載がある www.npmjs.com This package is used by ESLint 8 and earlier. For ES…

「TypeScriptではじめる型システム」という記事をn月刊ラムダノートに寄稿しました。 新刊を発売しました "『n月刊ラムダノート』Vol.4 No.3（2024）発行のお知らせ https://t.co/PGppk1aRRA— lambdanote (@lambdanote) 2024年10月4日 どんな内容？ TypeScriptの極小サブセットに対する型検査器を書き、それを通して型システムを体感してみよう、という内容です。 詳しく言うと、boolean型とnumber型と関数型しかないTypeScriptサブセット言語がターゲットです。 型検査器の実装言語にもTypeScript（処…

swfz (ver 0.37.0) がリリースされました、更新内容は次のとおりです 技術 やったこと Renovateの対応色々 til react to v16 sassのdeprecation warning 対応 eslintのflat config対応 tools storybook to v8 octicons-react to v19.11.0 kusa-image add to parameterの追加 toパラメータに最終日の日付を指定できるようにした これにより指定した日時点の草画像はこれというのを残せるようになった dark mode対応 theme=darkでダークモード…

はじめに Rules of Reactという安全で効果的なReactアプリケーションを記述するためのルールがReact公式から公開されました。 Writing idiomatic React code can help you write well organized, safe, and composable applications. These properties make your app more resilient to changes and makes it easier to work with other developers, libraries, and tools.…

目次 環境と使用ライブラリ、フレームワーク 設定方法 終わりに おはこんにちばんわ。 今回は、Vue.jsのフォームライブラリであるFormKitをStorybookで使う（表示させる）方法を共有させていただきます。 formkit.com storybook.js.org 内容は非常に簡単なものですが、調べても公式ドキュメントにも無く、ちょっとだけ詰まったので。。。 追記）この辺りを見れば分かったのかな。。。 ※ FormKitやStorybookについての詳しい説明は割愛させていただきます。 環境と使用ライブラリ、フレームワーク macOS Sequoia: 15.0 Google Chr…

kintone のアップロードツールがあるのはありがたいのですが、再度、開発環境でローカルサーバーを使おうとすると、いちいち設定を変更するのが、なかなかかったるいです。 ということで、こちらの記事で、ローカルサーバーへの切り替え処理を書いた（最終的には無駄になった）のですが、その際に package.json に type を追加してプロジェクト全体を ESModuleに指定しました。 package.json { （略） "type": "module", （略） } すると、 webpack を実行した際に、 PS D:\work\tmp\kintone_tutorial\revert_l…

こんにちは。kubell(旧 Chatwork)の工藤です。 kubellでは先日、エンジニアサマーインターンシップ2024を実施しました！ インターンシップの中では運営の用意したGitHubリポジトリを使って開発していただくシーンがあるのですが、その際の環境構築の方法として初めてGitHub Codespacesを採用してみました。 今回はその理由や使ってみた感想を書いていきたいと思います。 ※ インターンシップの内容についても多少触れますが、来年以降も同じコンテンツを提供するとは確定していないのでご注意ください。

音楽フェスの相次ぐ中止 2024年は「フェスがオワコンになった年」 | 「フェス不況」の要因は何？ 開発者に訊きました : ゼルダの伝説 知恵のかりもの｜任天堂 中選挙区の時代に自民党内で派閥が入れ替わってたのは日本的民主主義の一.. 幻の大学院構想、突然チーム解散 「使い捨てだ」研究者ら大学を提訴 | 毎日新聞 これが日本のAIデータセンターだ、GPUサーバーを稼働できる18社・32施設 映画を観ていつも思う→作中の異常者とか変質者ってクラシックやオペラを聴きがちでは?「何故かそうなんですよね」 「日本人を殺すことが我々の規律」中国の地方政府幹部がSNS上に書き込みか | TBS NEWS …