【Angular】ESLint設定時のesbuildエラー解消方法！

2024年10月17日

当ページのリンクには広告が含まれています。

この記事で解決できる悩み

AngularでESLint設定時のesbuildエラー解消方法は？

いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴8年）で、資格は13個保有しています。

「AngularでESLint設定時にesbuildエラーが発生したから解消したい」とお考えではありませんか？

Angularに限った話ではないんですが、特定のPCだけesbuildエラーが出ることがあって困ったちゃんだったんです。

いずみ

会社から支給されるPCあるあるですね。

今回はVSCodeを使っている前提で解説します。

本記事を読めば、AngularでESLint設定時のesbuildエラー解消方法について分かるので早速見ていきましょう！

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいませ。

執筆者／監修者

フリーランスエンジニア（保有資格13個）
ブログ・アフィリエイト歴5年
ブランドせどりで月利50万円⇨脱サラ
投資歴5年（仮想通貨・FXが得意）
Twitterフォロワー約2,000人
運営者情報はこちら

いずみです

【Angular】ESLint設定時のesbuildエラー内容

esbuildのエラー内容は以下のとおりです。

npm ERR! code EPERM
npm ERR! syscall unlink
npm ERR! path C:\Users\〇〇\Documents\git\project\node_modules\esbuild-windows-64\esbuild.exe
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, unlink 'C:\Users\〇〇\Documents\git\project\node_modules\esbuild-windows-64\esbuild.exe'
npm ERR!  [Error: EPERM: operation not permitted, unlink 'C:\Users\〇〇\Documents\git\project\node_modules\esbuild-windows-64\esbuild.exe'] {
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'unlink',
npm ERR!   path: 'C:\\Users\\〇〇\\Documents\\git\\project\\node_modules\\esbuild-windows-64\\esbuild.exe'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\〇〇\AppData\Local\npm-cache\_logs\2024-09-18T07_14_57_777Z-debug-0.log

added 1291 packages, and audited 1292 packages in 33s

196 packages are looking for funding
  run `npm fund` for details

25 vulnerabilities (13 moderate, 10 high, 2 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

【Angular】ESLint設定時のesbuildエラー解消方法

AngularでESLint設定時のesbuildエラー解消方法を解説します。

STEP

package.jsonに追記

"overrides": {
  "esbuild": "npm:esbuild-wasm@latest"
}

上記を「package.json」に追記します。

STEP

VSCodeのsetting.jsonに追記

  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },

上記をVSCodeの「setting.json」に追記します。

これでOK！

参考サイト

esbuildのwasmを使う Windowsではコード署名が付いていないEXEを実行できない環境があります。esbuildのexeファイルはコード署名がありません。そしてコード署名には対応しないことがIssueでや…