Как верно настроить webpack.config и линтер?

Question

[Kir03]

Хочу сделать для себя небольшой шаблон для сборки проекта c помощью Webpack. Хочу попробовать использовать react hook, typescript. Конфиг выглядит так

const path = require("path");
const webpack = require("webpack");

module.exports = {
    entry: "./src/index",
    output: {
        path: path.resolve(__dirname, "public", "build"),
        filename: "bundle.js",
        publicPath: "/build/"
    },

    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: ["babel-loader"]
            }
        ]
    },

    devServer: {
        contentBase: path.join(__dirname, "public"),
        compress: true,
        port: 9000,
        host: "0.0.0.0",
        historyApiFallback: true
    }
};

.babelrc

{
    "presets": [
        "@babel/env",
        "@babel/typescript",
        "@babel/react"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}

.eslintrc

{
  "extends": [
    "react-app",
    "prettier"
  ],
  "rules": {
    "no-console": 2,
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
  },
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "react-hooks",
    "prettier"
  ]
}

tsconfig.json

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "noFallthroughCasesInSwitch": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "noUnusedLocals": true,
        "noImplicitAny": true,
        "target": "es2015",
        "module": "es2015",
        "strict": true,
        "jsx": "react"
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}

Проблема в том, что с ошибками в написании кода TS проект собирается, а не выдает ошибку, а так же не работает линтер с TS. Как это исправить? Если идти по туториалу https://www.typescriptlang.org/docs/handbook/react... то в этом случае не поддерживаются хуки.

Comments

[Александр]

Eslint и Prettier лучше прописать в git хуки (см. huskey и lint-staged) и scripts.
Так нагрузка будет ниже.