5
\$\begingroup\$

I'm trying to build a React Boilerplate Using multiple tools. They are all: React, TypeScript, ESLint, Webpack, Babel, Prettier, VSCode and with Airbnb's code style guide.

Actually, this is my first Boilerplate. I don't know if there's a redundant dependency or unnecessary codes inside. Can you please review it? The devDependencies looks so many compared to my previous projects.

All I want to do is create a boilerplate that uses the stacks I mentioned above, so that I can use it whenever I want to start a new project. Something like a handmade create-react-app. The content of the App doesn't really matter, as long as it follows the rules, just like create-react-app. I came here to find out the quality of my configurations, since sometimes, those tools are fighting each other and I want know when and why are they fighting again. Just like 1 hour ago, I added the Airbnb style guide and it collided with prettier's indentation. I resolved it using the last 3 eslint rules below, but I don't know if there's any hidden conflict left.

Here's the link to my boilerplate: https://github.com/SnekNOTSnake/react-typescript-boilerplate

And here's my quick .eslintrc.json file:

{
    "parser": "@typescript-eslint/parser",
    "extends": [
        "plugin:@typescript-eslint/recommended", // Typescript rules
        "plugin:prettier/recommended", // Sets the prettier/prettier rule to "error"
        "plugin:react/recommended", // React rules
        "plugin:react-hooks/recommended", // React Hooks rules
        "airbnb-typescript" // Airbnb code stylings
    ],
    "parserOptions": {
        "ecmaVersion": 2020, // ES11 New features are enabled!
        "sourceType": "module", // Tell ESLint that everything is a module
        "project": "./tsconfig.json" // Location of the Parser config file
    },
    // Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
    "plugins": ["prettier"],
    "rules": {
        "@typescript-eslint/no-var-requires": "off", // Off for webpack config files
        "react/jsx-indent": [2, "tab"], // Use tabs
        "@typescript-eslint/indent": "off", // Use prettier indentation instead
        "no-tabs": "off" // Use tabs
    }
}

Another quick package.json file:

{
    "scripts": {
        "build": "NODE_ENV=production webpack --config webpack.prod.js",
        "start": "webpack-dev-server --open --config webpack.dev.js",
        "check-types": "tsc"
    },
    "dependencies": {
        "@hot-loader/react-dom": "^16.13.0",
        "react": "^16.13.1",
        "react-dom": "^16.13.1"
    },
    "devDependencies": {
        "@babel/core": "^7.11.1",
        "@babel/preset-env": "^7.11.0",
        "@babel/preset-react": "^7.10.4",
        "@babel/preset-typescript": "^7.10.4",
        "@types/react": "^16.9.45",
        "@types/react-dom": "^16.9.8",
        "@types/webpack-env": "^1.15.2",
        "@typescript-eslint/eslint-plugin": "^3.8.0",
        "@typescript-eslint/parser": "^3.8.0",
        "babel-loader": "^8.1.0",
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^4.2.1",
        "eslint": "^7.6.0",
        "eslint-config-airbnb-typescript": "^9.0.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-plugin-import": "^2.22.0",
        "eslint-plugin-jsx-a11y": "^6.3.1",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-react": "^7.20.5",
        "eslint-plugin-react-hooks": "^4.0.8",
        "file-loader": "^6.0.0",
        "html-loader": "^1.1.0",
        "html-webpack-plugin": "^4.3.0",
        "prettier": "^2.0.5",
        "style-loader": "^1.2.1",
        "typescript": "^3.9.7",
        "webpack": "^4.44.1",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0",
        "webpack-merge": "^5.1.1"
    },
    "engines": {
        "node": "^12.16.3"
    }   
}

For the sake of completeness: .babelrc.json

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "edge": 17,
                    "firefox": 60,
                    "chrome": 67,
                    "safari": "11.1"
                },
                "corejs": "3",
                "useBuiltIns": "usage"
            }
        ],
        "@babel/preset-react",
        "@babel/preset-typescript"
    ]
}

tsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "Utils/*": ["src/utils/*"]
        },

        "allowSyntheticDefaultImports": true,
        "noImplicitAny": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "module": "esnext",
        "target": "esnext",
        "jsx": "react",
        "allowJs": true,
        "noEmit": true,
        "noImplicitThis": true,
        "strictNullChecks": true,
        "lib": ["es6", "dom"]
    }
}

.prettier.json

{
  "useTabs": true,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "arrowParens": "avoid",
  "bracketSpacing": true
}
\$\endgroup\$
  • \$\begingroup\$ Maybe you missed the text on the right side when typing your question : "Your question must contain code that is already working correctly, and the relevant code sections must be embedded in the question." Questions must include the code to be reviewed. Links to code hosted on third-party sites are permissible, but the most relevant excerpts must be embedded in the question itself. \$\endgroup\$ – cliesens Aug 13 at 15:41
  • \$\begingroup\$ Should I put all of the files inside this question? There's like 12 of them. And I think those two are what I need the most to be reviewed. \$\endgroup\$ – SnekNOTSnake Aug 13 at 15:46
  • \$\begingroup\$ I'm not sure, you're the one asking the question; only include all the files you want to be reviewed, and only those. If the two files you've put in your question are the only ones, then you're fine. You can look at some other questions to have a better idea of what is/isn't acceptable, but in general, more code is better, so don't be afraid to add more. \$\endgroup\$ – cliesens Aug 13 at 15:51
  • \$\begingroup\$ Ahh, got it. I'll include all of the config files only. \$\endgroup\$ – SnekNOTSnake Aug 13 at 15:51
  • 1
    \$\begingroup\$ All I want to do is create a boilerplate that uses the stacks I mentioned above, so that I can use it whenever I want to start a new project. Something like a handmade create-react-app. The content of the App doesn't really matter, as long as it follows the rules, just like create-react-app. I came here to find out the quality of my codes, since sometimes, those tools are fighting each other and I want know when and why are they fighting again. Just like 1 hour ago, I added the Airbnb style guide and it collided with prettier's indentation. \$\endgroup\$ – SnekNOTSnake Aug 13 at 16:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.