The base TypeScript template for Create React App with StandardJS/Prettier and some essential libs.
npm install cra-template-typescript-standard-prettierTypeScript 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:
``sh
yarn create react-app my-app --template typescript-standard-prettier
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:
`sh
yarn setup
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
`bash`
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:
`typescript`
import { Home, Page } from 'pages'
Instead:
`typescript`
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)git add .
3. Add changes ()git commit -m 'add some feature
4. Commit ()git push origin feat/new-feature`)
5. Push (
6. Open a PR :D
cra-template-typescript-standard-prettier is open source software licensed as MIT.