在 Gatsby / Typescript 项目中设置导入别名

Question

我尝试在我的 Gatsby 和 Typescript 项目中创建导入别名。我使用 npm 包eslint-import-resolver-alias。

所以我能够使用：

import Layout from '@components/Layout';

在gatsby-node.js我有：

const 路径 = require('路径');

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        @components: path.resolve(__dirname, 'src/components'),
        @static: path.resolve(__dirname, 'static'),
      },
    },
  });
};

在.eslintrc.js我有：

alias: [['@components', './src/components']]

在我有：

"baseUrl": "./src",
    "paths": {
      "@components": ["/components"]

现在我在 VSCode 中收到此错误：

无法解析模块“组件/布局”的路径。eslintimport/no-unresolved

Answer 1

paths: ['./src'],我通过添加到import/resolver内部使其工作.eslintrc.js：

'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        paths: ['./src'],
      },
      alias: [['components', './src/components']],
    },