ろぼいんブログ
更新:

ESLintでTypeScriptベースの設定ファイル(`eslint.config.ts`)を使えるようになった

2024年8月10日、TypeScriptで書かれた設定ファイルを実験的にサポートするESLint v9.9.0がリリースされました。

4月にリリースされたESLint v9.0.0では従来のeslintrcによる設定が非推奨となり、JavaScriptベースのFlat Config(eslint.config.js)に移行しました。

今回のリリースでは、TypeScriptベースの設定ファイル(eslint.config.tseslint.config.mtseslint.config.cts)を実験的にサポートするようになりました。

これにより、TypeScriptによる入力補完の恩恵を受けながら、ESLintの設定ファイルを書けるようになります。

TypeScriptで設定ファイルを書く方法

TypeScriptベースの設定ファイルを利用するには、いくつかの設定が必要です。

まずは、軽量なTypeScriptのランタイム「 jiti 」をインストールします。jitiはESLintの依存関係に含まれていないため、手動でインストールする必要があります。

try{(()=>{function a(e){if(!e)return;let t=e.getAttribute("tabindex")!==null,n=e.scrollWidth>e.clientWidth;n&&!t?e.setAttribute("tabindex","0"):!n&&t&&e.removeAttribute("tabindex")}var u=window.requestIdleCallback||(e=>setTimeout(e,1)),i=window.cancelIdleCallback||clearTimeout;function l(e){let t=new Set,n,r;return new ResizeObserver(c=>{c.forEach(o=>t.add(o.target)),n&&clearTimeout(n),r&&i(r),n=setTimeout(()=>{r&&i(r),r=u(()=>{t.forEach(o=>e(o)),t.clear()})},250)})}function d(e,t){e.querySelectorAll?.(".expressive-code pre > code").forEach(n=>{let r=n.parentElement;r&&t.observe(r)})}var s=l(a);d(document,s);var b=new MutationObserver(e=>e.forEach(t=>t.addedNodes.forEach(n=>{d(n,s)})));b.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{d(document,s)});})();}catch(e){console.error("[EC] tabindex-js-module failed:",e)}try{(()=>{function i(o){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=o,document.body.appendChild(e);let a=document.createRange();a.selectNode(e);let n=getSelection();if(!n)return!1;n.removeAllRanges(),n.addRange(a);let r=!1;try{r=document.execCommand("copy")}finally{n.removeAllRanges(),document.body.removeChild(e)}return r}async function l(o){let e=o.currentTarget,a=e.dataset,n=!1,r=a.code.replace(/\u007f/g,` `);try{await navigator.clipboard.writeText(r),n=!0}catch{n=i(r)}if(!n||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(a.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}function s(o){o.querySelectorAll?.(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))}s(document);var u=new MutationObserver(o=>o.forEach(e=>e.addedNodes.forEach(a=>{s(a)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();}catch(e){console.error("[EC] copy-js-module failed:",e)}
Terminal window
npm install -D jiti

次に、従来のFlat Configのファイル(eslint.config.jsなど)の拡張子を、TypeScript(eslint.config.tsなど)に変更します。記事執筆時点では、.ts.mts.ctsの拡張子がサポートされています。

必要であれば、設定ファイルに型定義を追加します。

実際にTypeScriptベースの設定ファイルを利用するには、ESLintの実行時にフラグを有効化する必要があります。

Terminal window
npx eslint --flag unstable_ts_config

これで、TypeScriptベースの設定ファイルを利用できるようになりました。

なお、ESLintが実行時に設定ファイルの型チェックを実施しない(型定義を単にコメントとして無視する)ことと、現時点ではjitiがtop-level awaitをサポートしていないことに注意してください。

Node.js v22.10.0以降ではjitiは不要(2025年4月12日追記)

Node.js v22.10.0以降では、TypeScriptファイルの実行がサポートされているため、 jitiは不要 です。

Node.js v22.10.0以上v23.6.0未満の場合は、Node.jsのフラグを有効化する必要があります。

Terminal window
npx --node-options='--experimental-strip-types' eslint --flag unstable_native_nodejs_ts_config

Node.js v23.6.0以降では、Node.jsのフラグは不要です。

Terminal window
npx eslint --flag unstable_native_nodejs_ts_config

VS Codeの拡張機能で利用する方法

VS CodeのESLint拡張機能 では、フラグを有効化することでTypeScriptベースの設定ファイルを利用できます。

VS Codeのsettings.jsonを開き、次の設定を追加します。

settings.json
{
// ...その他の設定
"eslint.options": {
"flags": [
"unstable_ts_config"
]
}
}

設定を変更したあとは、VS Codeを再起動するかコマンドパレットから[ESLint: Restart ESLint Server]を実行してください。

参考

更新履歴

  • 2025年1月21日:ESLint v9.18.0でフラグの有効化が不要になった旨を追記
  • 2025年4月12日:Node.js v22.10.0以降ではjitiが不要になった旨を追記

おすすめアイテム

※このリンクを経由して商品を購入すると、当サイトの運営者が報酬を得ることがあります。詳細はこちら

このサイトを支援する

Buy Me a CoffeeまたはGitHub Sponsorsで支援していただけると、サイトの運営やコンテンツ制作の励みになります。定期的な支援と一度限りの支援がありますので、お間違いのないようにお願いします。

Buy me a coffee

著者のアイコン画像

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。

最新記事