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

🇨🇳 🇯🇵 📍 ⌚