TypeScript template for Create React App with standardjs (eslint), prettier, editorconfig, axios, react-router-dom, react-icons and styled-components.

Please attention with the steps below:

To use this template, add --template typescript-standard-prettier when creating a new app.

For example:

yarn create react-app my-app --template typescript-standard-prettier # or npx create-react-app my-app --template typescript-standard-prettier

Versions to this template:

typescript: ^4.6.4 @typescript-eslint/eslint-plugin: ^5.23.0 @typescript-eslint/parser: ^5.23.0 

IMPORTANT

Due to an eslint config limitation you have to install all dependencies that this config uses manually with:

yarn setup # or npm run setup-npm

To be clear, you need to run, by example:

yarn create react-app my-app --template typescript-standard-prettier cd my-app yarn setup 

my-app ├── src/ │ ├── api/ │ │ └── index.ts │ ├── compoments/ │ ├── pages/ │ │ ├── About/ │ │ │ └── About.tsx │ │ │ └── styles.ts │ │ ├── Home/ │ │ │ └── Home.tsx │ │ │ └── styles.ts │ │ └── Restrict/ │ │ └── Restrict.tsx │ │ └── styles.ts │ ├── routes/ │ │ └── index.tsx │ ├── styles/ │ │ └── global.ts │ ├── App.css │ ├── App.tsx │ ├── App.test.tsx │ └── index.tsx ├── .editorconfig ├── .editorignore ├── .eslintrc.json ├── .gitignore ├── prettier.config.js ├── README.md └── tsconfig.json

You can remove App.css file. This file is generated automatically by cra.

This template is configured with an absolute path, so you can use it like this:

import { Home, Page } from 'pages'

Instead:

import { Home, Page } from '../pages'

I recommend the best editor for JavaScript/TypeScript to use with this template: Visual Studio Code (VSCode).

And these extensions to best integration (Prettier extension it's not necessary!):

• ESLint
• EditorConfig for VS Code

Change your settings.json to fix all:

 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, 

or specific:

 "[typescriptreact]": { "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }, 

That's it. Reload the window or restart your VSCode to load config.

1. Fork it
2. Create a branch (git checkout -b feat/new-feature)
3. Add changes (git add .)
4. Commit (git commit -m 'add some feature)
5. Push (git push origin feat/new-feature)
6. Open a PR :D

cra-template-typescript-standard-prettier is open source software licensed as MIT.