ESLint 和 Babel 配置答案

【问题标题】：ESLint and Babel ConfigESLint 和 Babel 配置
【发布时间】：2021-10-29 08:49:28
【问题描述】：

目前，我正在尝试将 ESLint 用于我的项目，我正在使用 Airbnb 样式指南和 ESLint，并且我还使用 Husky 来运行预提交检查。我遇到了一个问题，因为 ESLint 报告了import/no-unresolved 的错误，我无法提交代码。我正在使用路径别名，所以我的导入语句是这样的。

import foo from '@foo`

相对

import foo from '../foo'

我已经用谷歌搜索了我能做什么，我发现使用eslint-plugin import 的选项。但这并没有解决问题。我不知道还能做什么，这里分别是我的 ESLint 文件和 Babel 文件的 sn-p。

eslintrc.js

module.exports = {
    env: {
        browser: true,
        es2021: true,
    },
    extends: [
        'airbnb-base',
        'prettier',
    ],
    plugins: ['import', '@babel', 'prettier'],
    parser: '@babel/eslint-parser',
    parserOptions: {
        ecmaVersion: 12,
        sourceType: 'module',
        requireConfigFile: 'false',
        babelOptions: { configFile: './Backend/babel.config.js' },
    },
    settings: {
        'import/resolver': {
            'babel-module': { allowExistingDirectories: true },
        },
    },
    rules: {
        'prettier/prettier': 'error',
        'arrow-body-style': 'off',
        'no-console': ['error', { allow: ['warn', 'error', 'log'] }],
        'prefer-const': ['error'],
        'no-var': ['error'],
        'no-new-object': ['error'],
        'object-shorthand': ['error'],
        'quote-props': ['error', 'as-needed'],
        'prefer-object-spread': ['error'],
        'array-callback-return': ['error'],
        'prefer-destructuring': [
            'error',
            {
                array: true,
                object: true,
            },
            {
                enforceForRenamedProperties: false,
            },
        ],
        quotes: [2, 'single', { allowTemplateLiterals: true }],
        'prefer-template': ['error'],
        'no-useless-escape': ['error'],
        'prefer-rest-params': ['error'],
        'no-new-func': ['error'],
        'no-param-reassign': ['error'],
        'prefer-spread': ['error'],
        'function-paren-newline': ['error'],
        'prefer-arrow-callback': ['error'],
        'implicit-arrow-linebreak': ['error'],
        'no-useless-constructor': ['error'],
        semi: ['error', 'never'],
        'eol-last': 0,
        'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0 }],
    },
}

babel.config.js

const TARGETS_NODE = '12.13.0'
const CORE_JS_VERSION = '3.6'

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                targets: { node: TARGETS_NODE },
                useBuiltIns: 'usage',
                corejs: {
                    version: CORE_JS_VERSION,
                    proposals: true,
                },
            },
        ],
    ],
    plugins: [
        [
            'babel-plugin-module-resolver',
            {
                alias: {
                    '@modules': './src/modules',
                    '@utils': './src/utils',
                    '@shared': './src/shared',
                    '@config': './src/config',
                    '@validations': './src/validations',
                    '@controllers': './src/controllers',
                    '@models': './src/models',
                    '@routes': './src/routes',
                },
            },
        ],
        [('@babel/plugin-proposal-class-properties', { loose: true })],
        [
            '@babel/plugin-transform-runtime',
            {
                corejs: { version: 3, proposals: true },
                version: '^7.8.3',
            },
        ],
        ['@babel/plugin-proposal-private-methods', { loose: true }],
        ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
    ],
}

我在转译时使用babel-plugin-module-resolver 来解析路径。

非常感谢。

【问题讨论】：

标签： javascript node.js express eslint

【解决方案1】：

你可以给ignore case添加一个选项：

"rules": {
   "import/no-unresolved": [
      2, 
      { "caseSensitive": false }
   ]
}

github 的这个线程还描述了 linter 如何检查包含 package.json 的文件夹之前的部分路径的大小写。例如，如果您有路径：C:/Workspace/app 并使用 cd C:/workspace/app（小写工作区）导航到它，则 linter 也会在导入时出错。看起来它现在应该已修复，但也许您仍在使用旧版本。

【讨论】：