Intellij IDEA eslint 和別名問題解決方法

我正在使用 Intellj IDEA Ultimate 的永久回退授權版本進行日常開發,但最近我注意到 JavaScript 開發環境中存在與 ESLint 和模組別名解析相關的兩個問題。幸運的是,對於任何一個問題我都找到了解決方案。

ESLint issue

TypeError: this.cliEngineCtor is not a constructor

The root cause to this issue was due to that a breaking change was introduced in ESLint 8.0 which causes project being developed with an older version of IDEA (older than 2021.2.2(IDEA Build 212.5284.40)) without the fix/support for ESLint 8+ not to be able to enable the ESLint plugin.

The solution/workaround is from this link by manually modifying:

{IDEA_NSTALLATION_PATH}/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugins.js

as this comment suggested. Make sure to back up the original version to avoid breaking something with for example this command:

cd {IDEA_NSTALLATION_PATH}/plugins/JavaScriptLanguage/languageService/eslint/bin
cp eslint-plugins.js eslint-plugins.js.bak

Module alias resolution issue

For alias import such as:

import SomeComponent from '@/components/SomeComponent';

When hover the component path, IDEA/WebStorm pops up a message saying Module is not installed , which indicates the IDE cannot find/resolve the component file because it does not understand the @ module alias.

Solution:

As this gist suggests, for project using WebPack, add the alias config to resolve; for project not using webpack, add a dummy config file such as:

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      '@': require('path').resolve(__dirname, 'src')
    }
  }
};

then go to Preferences | Languages & Frameworks | JavaScript | Webpack in IDEA, choose Automatically if the file is placed under the root of project, or choose Manually and specify the above config file if placed somewhere else. After this, the @ import should be able to be resolved successfully.

參考文獻

javascript