Frontend Boilerplate with React, TypeScript


react (with Hooks)	^16.11
react-dom	^16.11
react-router	^5.1
react-scripts	3.3
styled-components	^4.4
typescript	3.6
antd	4.1.5

title

index.html React-TypeScript-Boilerplate .

<meta
  name="apple-mobile-web-app-title"
  content="React-TypeScript-Boilerplate"
/>

<title>React-TypeScript-Boilerplate</title>

favicon

asset . ( .)

FAVIC-O-MATIC Every damm size,sir! Upload Your Image .

.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "env": {
    "browser": true,
    "jasmine": true,
    "jest": true
  },
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect"
    }
  },
  "parser": "@typescript-eslint/parser"
}

tsconfig.json

tsconfig.json TypeScript .

 `tsconfig.json`   .

$ npx tsc --init

 `tsconfig.json` .

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "noImplicitAny": false,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

tslint.json

{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {
    "quotemark": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "member-access": false
  },
  "rulesDirectory": []
}

.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "always",
  "orderedImports": true
}