eslint 规则是否可以控制 import 文件的后缀名，如不可以 import demo from 'xaaas.js'

Question

近日在做前端代码规范：
我们是 vue 的项目，发现组内的 import 的写的很乱。想禁止".js"后缀

  import 'devextreme/dist/css/dx.light.css';
  import { eventBus } from '@/utils/eventBus.js';
  import DataSource from 'devextreme/data/data_source'
  import { bankFlowList, listCashInSubject } from '@/api/bankFlow'

问题一： 是否可以禁止开发者使用import xx from 'avs.js'这样的语句
问题二：针对 import 语法有没有一些好的最佳实践

Answer 1

建议加

加了后缀，避免编译器对模块路径的猜测(即减轻resolver的工作，减少拼接index，js,jsx,ts,tsx,json等等的逐个匹配)，优化编译速度。

Answer 2

还真没去研究过 ESLint 对后缀的管理。

不过严格的说 ESM 要求加后缀，甚至 TypeScript 也是要加 .js 后缀（不是 .ts）的。不加后缀是 Node 和一些构建工具的处理方式，他们会按一定优先级去补充后缀，或者添加 index.js 等来找到文件。

Answer 3

使用 eslint-plugin-import 插件，配置一下规则:

{
    rules:  {
      'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never', // *.js 不加后缀
        vue: 'always', // *.vue 加后缀
        ts: 'never', // *.ts 不加后缀
      },
    ],
    }
}

建议 js 加上后缀