Eslint and prettier don't work in .ts files in Serverless project

Viewed 13

I work with Serverless project that was wroten on TypeScrips. I added configuration for eslint and prettier with some dependencies for it, but eslint and prettiern don't work in .ts files. It works correct for .js files.

The project has .babel config and webpack, maybe something conflicts with them? Please help me run eslint in this project, It will decrease my pain

My packege.json

    {
    "name": "serverless-webpack-typescript-example",
    "version": "1.0.0",
    "description": "Serverless webpack example using Typescript",
    "license": "ISC",
    "main": "lambda.ts",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "debug": "./scripts/debug.sh",
        "lint": "eslint . --ext .js,.ts",
        "deploy:sandbox": "./node_modules/.bin/sls deploy --stage sandbox",
        "deploy:prod": "./node_modules/.bin/sls deploy --stage prod"
    },
    "dependencies": {
        "@hapi/boom": "8.0.1",
        "@sendgrid/mail": "^7.6.2",
        "@types/pdfkit": "^0.10.6",
        "aws-xray-sdk": "2.5.0",
        "axios": "^0.21.1",
        "body-parser": "^1.19.0",
        "clone-buffer": "^1.0.0",
        "cors": "2.8.5",
        "express": "4.17.1",
        "express-session": "^1.17.2",
        "lodash": "4.17.15",
        "moment": "2.24.0",
        "node-fetch": "2.6.0",
        "pdfkit": "^0.11.0",
        "pg": "^8.8.0",
        "plaid": "^9.0.0",
        "serverless-bundle": "^4.3.1",
        "serverless-http": "2.3.0",
        "slonik": "^28.2.0",
        "slonik-interceptor-query-logging": "1.3.7",
        "source-map-support": "0.5.16",
        "stripe": "^8.154.0",
        "uuid": "^8.0.0",
        "xlsx": "^0.16.4"
    },
    "devDependencies": {
        "@babel/core": "^7.5.5",
        "@babel/plugin-proposal-class-properties": "^7.18.6",
        "@babel/plugin-proposal-optional-chaining": "^7.14.5",
        "@babel/preset-env": "^7.5.5",
        "@babel/preset-typescript": "^7.3.3",
        "@serverless/eslint-config": "^5.0.1",
        "@types/aws-lambda": "^8.10.34",
        "@types/cors": "^2.8.6",
        "@types/express": "^4.17.2",
        "@types/jest": "^25.2.1",
        "@types/node": "^12.12.6",
        "@types/pg": "^7.11.2",
        "@types/slonik": "^21.4.0",
        "@types/socket.io": "^2.1.4",
        "@types/stripe": "^7.13.5",
        "aws-lambda": "^0.1.2",
        "aws-sdk": "^2.575.0",
        "babel-loader": "^8.0.6",
        "babel-plugin-source-map-support": "^2.1.1",
        "cache-loader": "^4.1.0",
        "copy-webpack-plugin": "^5.0.5",
        "eslint": "^7.32.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-webpack-plugin": "^2.7.0",
        "fork-ts-checker-webpack-plugin": "^1.4.3",
        "jest": "^25.3.0",
        "prettier": "^2.7.1",
        "serverless": "^1.58.0",
        "serverless-dotenv-plugin": "^2.1.1",
        "serverless-offline": "^5.12.0",
        "serverless-webpack": "^5.7.1",
        "ts-jest": "^25.4.0",
        "ts-node": "^8.4.1",
        "typescript": "^3.5.3",
        "webpack": "^4.38.0",
        "webpack-bundle-analyzer": "^3.6.0",
        "webpack-node-externals": "^1.7.2"
    }
 }

.eslintrc

{
    "root": true,
    "env": {
        "es6": true,
        "browser": true,
        "node": true
    },
    "parserOptions": {
        "project": ["./tsconfig.json"],
        "tsconfigRootDir": "./"
    },
    "settings": {
        "import/parsers": {
            "@typescript-eslint/parser": [".ts", ".tsx"],
            "paths": "./src"
        },

        "import/resolver": {
            "typescript": {}
        }
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "@serverless/eslint-config/node"
    ],
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint", "prettier"]
}

.prettierrc

{
    "singleQuote": true,
    "useTabs": true,
    "semi": true,
    "printWidth": 130,
    "trailingComma": "all",
    "tabWidth": 4
}

.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "node": "current"
                }
            }
        ],
        ["@babel/preset-typescript"]
    ],
    "plugins": ["source-map-support", "@babel/plugin-proposal-optional-chaining", "@babel/plugin-proposal-class-properties"]
}

webpack.config.ts

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');
const slsw = require('serverless-webpack');
const nodeExternals = require('webpack-node-externals');
const CopyWebpackPlugin = require('copy-webpack-plugin');
// const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const isLocal = slsw.lib.webpack.isLocal;

module.exports = {
    mode: isLocal ? 'development' : 'production',
    entry: slsw.lib.entries,
    externals: [nodeExternals()],

    devtool: 'source-map',
    resolve: {
        modules: [path.resolve(__dirname, 'src'), 'node_modules'],
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
    },
    output: {
        libraryTarget: 'commonjs2',
        path: path.join(__dirname, '.webpack'),
        filename: '[name].js',
    },
    target: 'node',
    module: {
        rules: [
            {
                // Include ts, tsx, js, and jsx files.
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'cache-loader',
                        options: {
                            cacheDirectory: path.resolve('.webpackCache'),
                        },
                    },
                    'babel-loader',
                ],
            },
        ],
    },
    plugins: [
        // new ForkTsCheckerWebpackPlugin(),
        new CopyWebpackPlugin([
            {
                from: './build.yarnclean',
                to: './.[ext]',
                toType: 'template',
            },
        ]),
        new BundleAnalyzerPlugin({ analyzerMode: 'disabled' }),
    ],
};

0 Answers
Related