ESLint を MCP サーバーとして実行する ESLint v9.26.0 から MCP サーバーとして実行できるようになりました。この機能により LLM（大規模言語モデル）は ESLint のルールを使用してコードを修正することができるようになります。 音声による概要 この音声概要は AI によって生成されており、誤りを含む可能性があります。 ESLint v9.26.0 から、ESLint を[MCP（Model Context Protocol](feat: Add MCP server by nzakas · Pull Request #19592 · eslint/eslint) サーバーとして実行できるようになりました。この機能により LLM（大規模言語モデル）は ESLint のルールを使用してコードを修正できるようになります。 ESLint を MCP サーバーとして実
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
JavaScript Plugin Architecture この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていくことを目的としたものです。 次の形式で読むことができます。 Web版 PDF形式 ePub形式 Mobi形式 この書籍のソースコードは、次のGitHubリポジトリに公開されています。 azu/JavaScript-Plugin-Architecture: JavaScriptプラグインアーキテクチャの本 Twitterのハッシュタグは#js_plugin_book 更新情報はRSSやリリースノートから見ることができます。 はじめに JavaScriptの世界では1つの大きなライブラリよりも小さなライブラリを組み合わせていくようなスタイルが多く見られます。小さなものを組み合わせて作るためには、プラグインと呼ばれる拡張の仕組みが必要とな
何もしないでそのままでも十分かもしれない。 先にまとめ 最近の react-scripts は ESLint を含んでいるので別途インストール不要 設定は .eslintrc.js を作成して extends: ['react-app'] する Airbnb のルール設定を使う場合はもうちょい頑張る 元々 create-react-app してない場合も同じ Airbnb ルール利用時の手順概要 ESLint 初期化 ESLint の設定を更新 コードを recommended な状態へ対応 想定環境 Node.js v10.16 react-scripts v3.1 TypeScript v3.5 ESLint v6.1 @typescript-eslint/eslint-plugin v1.13 React アプリの準備 create-react-app でテンプレートから作成します。
こんにちは、エンジニアの@sota1235です。 タイトルの通り、今回は愚直に改善をした話をします。 メルカリのJavaScript メルカリにおけるJavaScriptの活用場面は以下のようなものがあります。 メルカリWeb アプリ内Webview 社内ツール React Native Node.js製のbotやGoogle App Scripts etc… いずれもサービスにとって重要なものであり、サーバサイドエンジニアであってもJavaScriptに触る機会は少なくありません。 かくいう私も普段はサーバサイドエンジニアですが、JavaScriptコードを書いたりレビューする場面が多くあります。 そんな中でWebチームにおいて、JavaScript開発でいくつか問題がありました。 課題その1: JavaScriptのレビューコスト問題 1つ目の課題としてJavaScriptのコードをレ
フロントエンドエンジニアの渡辺です。 業務委託で働いてる身ですが記事書くことになりました。懐深い。 先日「ESLintのルール設定を全て確認して設定をする」ということをしました。 （ESLintはv4.0.0時点で240以上の設定項目があります。） 普段はルール設定が膨大なので必要な項目しか見ないのですが、 全てに目を通してみると得られた知見が多くあったので共有します。 設定方針 まず、ESLintの膨大なルール設定をどう設定するかを決めます。 やり方は大体3パターンに分類できます。 緩いルール設定（eslint:recommendedなど）を元に、設定を足して厳しくする。 厳しいルール設定（airbnbなど）を元に、設定を引いて緩くする。 既存のソースコードを解析し、ESLintの機能でルール設定を自動生成する。 今回は「入れたいルールに絞って設定したい」という思いがあり、 eslint
概要 React 含む Javascript の開発現場では、Airbnb スタイルは人気が高いですね。 そこで、SonarQube で Airbnb スタイルを適用し、CI に組み込むことを考えます。 難しいポイントは、SonarQube では Javascript はデフォルト(無料) で使えるのですが、以下の理由で Sonar 社が考えるオリジナルスタイル(Sonar way)が適用されてしまうことにあります。 http://stackoverflow.com/questions/32519522/sonarqube-integrate-eslint-for-javascript-in-sonarqube 悩んでいたところ、偶然、二日前(2017/02/02) に sleroy という方が SonarQube の ESLint プラグインをリリースしてくれていました！ Thank y
最初に: 「Functional Programming 最高！」という話ではないです JSは通信やストレージに保存するデータの扱いの関係で、JSONにシリアライズできることが至上命題になるケースが多いので、クラスベースの設計で自身に副作用を起こすメソッドより、イミュータブルな T => T なstatic methodとして切り離しておくと扱いやすいケースが多い— 現場の声 (@mizchi) 2016年9月6日 複雑なオブジェクトのシリアライズは簡単だけど、逆にシリアライズされたオブジェクトからビルダを構築するのが難しいので、JSONの構造体自身とは別に独立して独立したメソッドとしてビルダが切り離されている方が扱いやすい— 現場の声 (@mizchi) 2016年9月6日 一応コンストラクタ名を保存してシリアライズ/復元する方法はあって、RPGツクールMVのコードを読むとそういう感じに
ES2015の構文チェックと言えば ESLint ですね。 ESLint は "The pluggable linting utility" というだけあって、Rules と呼ばれる膨大なチェック項目の中から 自分がチェックしたい項目を取捨選択し、最終的に .eslintrc という設定ファイルを用意する必要があります。 ただ、さすがに一から自分でルールを構築するのは面倒なので、通常は Shareable Configs と呼ばれる機能を使い、他の人が大体いい感じにセットアップしたものを共有することができます。 eslint-config-airbnb もこの Shareable Configs の1つで、React に関する lint も含まれているのでとりあえずはここから始めるのが良さそうです。 インストールと設定 （package.json は作成済みとします） eslint-con
ESlint is a pluggable linting utility for JavaScript and JSX. On a today’s real world JavaScript web app, the complexity tends to grow, refactors will be needed, and although you probably know what you are doing, linting your code can save you a lot of headaches. Besides styling, 2 spaces vs 4 spaces vs tabs, semicolon vs no semicolon, and so on, with just this configuration, you can catch the mos
こんにちは。花粉症に悩まされているエンジニアの安達(@ry0_adachi)です。 前回は運用中のサービスへのwebpackの導入についてお話しさせていただきましたが、今回はESLintの導入と運用方法について話していきたいと思います。 Linterを途中から導入したときの課題 複数人の開発メンバーがいる状況下でLinterがあるとコードの書き方が統一できたり、定義忘れなどでの不要なエラーを未然に防ぐことができます。 便利なツールなのでプロジェクトの途中からでも入れたい！と思う方は少なくないかと思いますが、その際に高確率で発生する問題があります。 既存のコードでエラーが出る 全く出ないということはほぼ無いかな、と。行末にスペースが紛れてしまったりとか気をつけていてもたまにやってしまったりします。 そんなわけでLinterを途中から導入した際に発生したエラーとどう向き合って、今後エラーを無く
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 先日、定期的に開催しているフロントエンド技術に関する勉強会、SCRIPTYをヤフーで開催しました。 http://scripty.connpass.com/event/22663/ 本勉強会で発表されたセッションのスライドを発表者のコメントとともに公開いたします！ 発表セッションまとめ 1.Single-page application Zero to One （React/Redux/ES6/Firebase） 発表者：山中 悠 バックエンド専門だったエンジニアが、最新のフロントエンド技術を使ってシングルページアプリケーション（SPA）を作るまでに四苦八苦した話と、実際に作ったサンプルアプリケーションを発表しました。 SPA開発
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 12月から福岡勤務の穴井（@pirosikick）です。 私が所属しているリッチラボ株式会社（以下、リッチラボ）では、スマートフォン向けのリッチ広告の企画・開発と、ヤフー・ソニーと協業のクラウドファンディングサイト「First Flight」の開発・運用を行っています。 今回は、リッチ広告の開発で利用しているESLintのルールを自作する方法について書きたいと思います。 サンプルの動作環境について 本記事に登場するサンプルは、下記の環境で実行しましたので、適宜ご自身の環境に置き換えてご覧ください。 Mac OS Node.js 4系（4.2.1） npm 3.3.9 サンプルのJavaScriptは一部ES6で書いておりますので、
html5j-begin.doorkeeper.jp javascriptの勉強が一通り終わったので、参加してきました！ javascriptの勉強会に参加するまでの道のりが長かったぜ...(T_T) 話の内容 4名のJSオジサンからのありがたきお話＋質問タイムって感じでした。 一つずつ、つらつら書いていきます（※長文注意ですぞ！） 1.ソースレビューから学ぶ Javascript + 1 株式会社サイバーエージェントの、宗定 洋平さんのお話です。 speakerdeck.com ざっくりまとめると、以下の4点についてのお話でした。 レビューでみているポイント 「バグがない」という言葉の定義 関数名のつけ方 ステップアップするために必要なこと 印象的だったのが...ステップアップするために必要なこと...それは... 「情報処理技術者試験を勉強する」です。 な、なんじゃそりゃー！初耳です。
Nicholas C. Zakas started looking for a way to automatically detect incorrect patterns. He couldn’t get the idea of a linter with pluggable runtime rules out of his head. He had just spent a bunch of time learning about Esprima and abstract syntax trees (ASTs), and he thought to himself, “It can’t be all that hard to create a pluggable JavaScript linter using an AST.” It was from those initial tho
こんにちは。kintone 開発チームの天野 (@ama_ch) です。すっかり春らしくなりましたね。 少し前に JS の自動レビューツール jswatchdog をオープンソースで公開しましたので、こちらで紹介させていただきます。 使い方 https://kintone.github.io/jswatchdog/ 上記の URL を開き、左側のエディタに JS コードを貼り付けるだけです。 右側に修正が必要な箇所が表示されるので、適宜修正します。 特徴 バリバリの開発者じゃなくても使いやすい一画面完結の Web インターフェース lint ツールでお馴染みの構文チェックの他、知らずに脆弱性を作り込むことを避けるため、XSS の可能性がある箇所にも警告を表示 内部的には、JS の静的構文チェックツールとして ESLint と JSHint を組み込んでいます。 さらに XSS の可能性があ
Highlights This is a summary of the major changes you need to know about for this version of ESLint. More Language Options 0.15.0 adds more language options for parsing JavaScript, including: Spread operator Rest parameters Destructuring All of these options are off by default, and you can enable them in your configuration file. See Configuring ESLint for more information. Note: The AST structure
こんにちは。 アメーバピグでNode.jsを使って開発をしている中村と申します。 平日はエンジニア、土日は主夫として働いています。 さて、早速ですが、この記事ではESLintを使って、JavaScriptのソースコードのバグを発見する手順をご紹介したいと思います。 ESLintとは ESLintはNicholas C. Zakas氏が中心となって開発しているJavaScriptのLintツールです。 JavaScriptのLintツールといえば、最近ではJSHintが定番だと思います。 ESLintはJSHint同等の機能を持つ他、解析ルールが完全にプラガブルになっており、独自ルールを自由に追加できるという特徴があります。 例えば、JSHintでいうところの、strict（strict modeで実行されるかをチェック）というオプションは下記のURLのように個別のルールとして実装されていま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
