Template for ReactJS project with TypeScript, StandardJS, ESLint, Prettier, EditorConfig, axios, react-router-dom, react-icons and styled-components.
MIT License
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!):
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.
git checkout -b feat/new-feature
)git add .
)git commit -m 'add some feature
)git push origin feat/new-feature
)cra-template-typescript-standard-prettier is open source software licensed as MIT.