webpack5 ts Expected indentation of 2 spaces but found 4 indent

Question

I'm learning webpack5 and ts recent, and was confused why eslint always throw error in my standard code. I think there may be some configuration problems I don't understand.

that's my code:

import * as React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';
import Home from '@/pages/home';
import Cover from '@/pages/cover';
import Article from '@/pages/article';

const routes = [
  {
    path: '/',
    component: Cover,
    name: 'homepage',
    exact: true
  },
  {
    path: '/home',
    component: Home,
    name: 'main',
    exact: true
  },
  {
    path: '/article/:id',
    component: Article,
    name: 'article',
    exact: true
  }
];

export default function App() {
  return (
    <Router>
      <Switch>
        {routes.map(route => (
          <Route path={route.path} exact={route.exact} key={route.name}>
            <route.component />
          </Route>
        ))}
      </Switch>
    </Router>
  );
}

eslint error:(I'm sure my code has no problem)

   5:1  error  Expected 1 empty line after import statement not followed by another import  import/newline-after-import
   7:1  error  Expected indentation of 2 spaces but found 4                                 indent
   8:1  error  Expected indentation of 4 spaces but found 8                                 indent
   9:1  error  Expected indentation of 4 spaces but found 8                                 indent
  10:1  error  Expected indentation of 4 spaces but found 8                                 indent
  11:1  error  Expected indentation of 4 spaces but found 8                                 indent
  12:1  error  Expected indentation of 2 spaces but found 4                                 indent
  13:1  error  Expected indentation of 2 spaces but found 4                                 indent
  14:1  error  Expected indentation of 4 spaces but found 8                                 indent
  15:1  error  Expected indentation of 4 spaces but found 8                                 indent
  16:1  error  Expected indentation of 4 spaces but found 8                                 indent
  17:1  error  Expected indentation of 4 spaces but found 8                                 indent
  18:1  error  Expected indentation of 2 spaces but found 4                                 indent
  19:1  error  Expected indentation of 2 spaces but found 4                                 indent
  20:1  error  Expected indentation of 4 spaces but found 8                                 indent
  21:1  error  Expected indentation of 4 spaces but found 8                                 indent
  22:1  error  Expected indentation of 4 spaces but found 8                                 indent
  23:1  error  Expected indentation of 4 spaces but found 8                                 indent
  24:1  error  Expected indentation of 2 spaces but found 4                                 indent
  27:1  error  Expected indentation of 2 spaces but found 4                                 indent
  28:1  error  This line has a length of 148. Maximum allowed is 120                        max-len
  28:1  error  Expected indentation of 4 spaces but found 8                                 indent
  29:1  error  Expected indentation of 6 spaces but found 12                                indent

my tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react",
    "strictNullChecks": true, // 不允许将 null, undefined 分配给其他基本数据类型.
    "module": "ES2015",
    "target": "ES2015",
    "sourceMap": true,
    "strict": true,
    "allowJs": true, // 添加了会报无法写入的错误, 无视即可.
    "noImplicitAny": true,
    "moduleResolution": "node", // 不设置的话会找不到 antd 这些模块.
    "outDir": "./",
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "import/resolver": {
    "node": {
      "extensions": [".js", ".jsx", ".ts", ".tsx"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

my webpack.common.js:

const path = require('path');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src/')
    },
    extensions: ['.tsx', '.ts', '.jsx', '.js', '/index.tsx', '/index.ts', '/index.jsx', '/index.js']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: ['babel-loader?cacheDirectory', 'eslint-loader'],
        exclude: path.join(__dirname, '../node_modules')
      },
      {
        test: /\.(ts|tsx)$/,
        use: [{
          loader: 'ts-loader',
          options: {
            // transpileOnly: true
          }
        }],
        exclude: path.join(__dirname, '../node_modules')
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: false
            }
          },
          'css-loader'
        ]
        // exclude: path.join(__dirname, '../node_modules')
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: false
            }
          },
          'css-loader',
          'less-loader'
        ]
        // exclude: path.join(__dirname, '../node_modules')
      },
      {
        test: /\.md$/,
        use: 'raw-loader'
      },
      {
        test: /\.(jpg|png|gif|jpeg|ico|svg)$/,
        use: 'file-loader'
        // options: {
        //   name: 'img/[name][hash:8].[ext]'
        // }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      // filename: './[name]/index.css'
      filename: './index.css'
    }),
    new FriendlyErrorsWebpackPlugin()
    // new HardSourceWebpackPlugin()
  ]
};

my webpack.dev.js:

const webpack = require('webpack');
const path = require('path');
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpackBase = require('./webpack.common');

const port = 4000;

const webpackConfig = merge(webpackBase, {
  entry: path.join(__dirname, '../src/main.js'),
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'index.js',
    publicPath: '/'
  },
  devtool: 'source-map',
  devServer: {
    port,
    hot: true,
    open: true,
    client: {
      logging: 'error',
      overlay: false
    },
    static: {
      directory: '../dist'
    },
    historyApiFallback: true,
    compress: true
  },
  mode: 'development',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, '../src/index.html'),
      favicon: './bighead.ico',
      filename: 'index.html',
      inject: true,
      minify: {
        html5: true,
        collapseWhitespace: true,
        preserveLineBreaks: false,
        minifyCSS: true,
        minifyJS: true,
        removeComments: false
      }
    })
  ]
});

module.exports = webpackConfig;

my package.json:

{
  "name": "personal-website",
  "version": "1.0.0",
  "description": "xuwentao's personal website",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config build/webpack.prod.js",
    "dev": "npm start",
    "start": "webpack-dev-server --config build/webpack.dev.js"
  },
  "keywords": [
    "react",
    "personal",
    "website",
    "javascript",
    "typescript",
    "frontend"
  ],
  "author": "wentao xu",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "@babel/preset-react": "^7.16.0",
    "@types/react": "^16.9.55",
    "@types/react-dom": "^16.9.9",
    "@types/react-router-dom": "^5.1.6",
    "@typescript-eslint/parser": "^4.1.1",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.17.0",
    "file-loader": "^6.2.0",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "mini-css-extract-plugin": "^2.4.3",
    "raw-loader": "^4.0.2",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.2.6",
    "webpack": "^5.61.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.4.0",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "antd": "^4.16.13",
    "npm": "^8.1.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.3.0",
    "typescript": "^4.4.4"
  }
}

Is there anyone can help me?