Intellij IDEA eslint とエイリアスの解析問題解決方法

私は日常の開発に Intellj IDEA Ultimate の永久フォールバック ライセンス バージョンを使用していますが、最近、JavaScript 開発環境で ESLint とモジュール エイリアスの解析に関連する 2 つの問題に気付きました。幸運なことに、どちらの問題も解決策を見つけることができました。

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

🇨🇳 🇯🇵 📍 ⌚