Skip to content

Commit 4308a27

Browse files
michielbouwmichielbouw
committed
setup base with all requirements
1 parent c2e249c commit 4308a27

File tree

13 files changed

+1257
-500
lines changed

13 files changed

+1257
-500
lines changed

‎.eslintignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/dist/**
2+
node_modules/
3+
**/*.test.{js,jsx,ts,tsx}

‎.eslintrc.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"parser": "@typescript-eslint/parser",
3+
"parserOptions": {
4+
"project": "./tsconfig.json",
5+
"ecmaFeatures": {
6+
"jsx": true
7+
},
8+
"ecmaVersion": 2018,
9+
"sourceType": "module"
10+
},
11+
"plugins": ["@typescript-eslint"],
12+
"extends": [
13+
"prettier",
14+
"prettier/react",
15+
"react-app",
16+
"eslint:recommended",
17+
"plugin:react/recommended",
18+
"prettier/@typescript-eslint",
19+
"plugin:@typescript-eslint/eslint-recommended",
20+
"plugin:@typescript-eslint/recommended"
21+
],
22+
"rules": {
23+
"@typescript-eslint/explicit-function-return-type": "off",
24+
"@typescript-eslint/explicit-member-accessibility": "off",
25+
"@typescript-eslint/no-explicit-any": "off",
26+
"@typescript-eslint/no-unused-vars": "off",
27+
"@typescript-eslint/no-submodule-imports": "off",
28+
"@typescript-eslint/no-unused-expressions": "warn",
29+
"@typescript-eslint/jsx-no-lambda": "off",
30+
"@typescript-eslint/prefer-interface": "off",
31+
"@typescript-eslint/interface-name-prefix": "off",
32+
"@typescript-eslint/camelcase": "off",
33+
"no-console": "off",
34+
"sort-keys": "off",
35+
"sort-imports": "off"
36+
},
37+
"env": {
38+
"browser": true,
39+
"es6": true
40+
}
41+
}

‎.prettierrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"printWidth": 80,
3+
"singleQuote": true,
4+
"semi": true,
5+
"tabWidth": 2,
6+
"trailingComma": "all",
7+
"arrowParens": "avoid"
8+
}

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"editor.formatOnSave": true
3+
}

‎README.md‎

Lines changed: 60 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,83 @@
1-
# React (v16+) Typescript boilerplate with full setup for ESLint and Prettier
1+
# Typescript React project boilerplate with ESLint and Prettier
22

3-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
3+
Starting point for a Typescript React project with full setup of SASS/SCSS, ESLint and Prettier for linting and formatting.
44

5-
## Available Scripts
5+
## Stack
6+
7+
This project is initialized with [Create React App](https://github.com/facebook/create-react-app) consisting of:
8+
9+
- TypeScript
10+
- React (16+)
11+
- react-scripts (createReactApp)
12+
- react-testing-library (not Enzyme)
13+
- SASS/SCSS
14+
- ESLint (instead of deprecated TSLint)
15+
- Prettier
16+
17+
## Get Started
18+
19+
### Make sure you run Node.js v10+
20+
21+
To install check ([Node.js installation](https://nodejs.org/en/) or [Node Version Manager installation](https://github.com/nvm-sh/nvm)).
22+
23+
### Clone or copy this repo
24+
25+
```bash
26+
curl -L https://github.com/michielbouw/react-typescript-eslint-prettier-boilerplate/archive/master.zip | tar zx
27+
mv react-typescript-eslint-prettier-boilerplate APP_NAME && cd APP_NAME
28+
```
29+
30+
or
31+
32+
```bash
33+
git clone git@github.com:michielbouw/react-typescript-eslint-prettier-boilerplate.git APP_NAME
34+
```
35+
36+
### `yarn install` (or `npm install`)
37+
38+
Note: this project is initialized with [Yarn]() and it's recommended to use it,<br>
39+
but instead you could also use `npm` for all scripts and please remove the yarn.lock file if you do so.
40+
41+
## Development Scripts
642

743
In the project directory, you can run:
844

9-
### `yarn start`
45+
### `yarn start` (or `npm start`)
1046

11-
Runs the app in the development mode.<br />
47+
Runs the app in the development mode.<br>
1248
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
1349

14-
The page will reload if you make edits.<br />
50+
The page will reload if you make edits.<br>
1551
You will also see any lint errors in the console.
1652

17-
### `yarn test`
53+
### `yarn typecheck` (or `npm run typecheck`)
1854

19-
Launches the test runner in the interactive watch mode.<br />
20-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
55+
Launches the typescript check for code to check for TypeScript compilation errors or warnings.
2156

22-
### `yarn build`
57+
### `yarn lint` (or `npm run lint`)
2358

24-
Builds the app for production to the `build` folder.<br />
25-
It correctly bundles React in production mode and optimizes the build for the best performance.
59+
Launches the linter for code to check for code layout errors or warnings.
2660

27-
The build is minified and the filenames include the hashes.<br />
28-
Your app is ready to be deployed!
61+
### `yarn lint:fix` (or `npm run lint:fix`)
2962

30-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
63+
Launches the linter for code to check for code layout errors or warnings, and fixes the ones that can be fixed automatically.
3164

32-
### `yarn eject`
65+
### `yarn test` (or `npm run test`)
3366

34-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
67+
Launches the test runner in the interactive watch mode.<br>
68+
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
3569

36-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
70+
## Production Scripts
3771

38-
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
72+
### `yarn build` (or `npm run build`)
3973

40-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
74+
Builds the app for production to the build folder.<br>
75+
It correctly bundles React in production mode and optimizes the build for the best performance.
76+
77+
The build is minified and the filenames include the hashes.<br>
78+
Your app is ready to be deployed!
79+
80+
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
4181

4282
## Learn More
4383

‎package.json‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,46 @@
11
{
22
"name": "react-typescript-eslint-prettier-boilerplate",
3+
"author": {
4+
"name": "Michiel Bouw",
5+
"url": "http://michielbouw.nl"
6+
},
37
"version": "0.1.0",
4-
"private": true,
8+
"scripts": {
9+
"start": "react-scripts start",
10+
"build": "react-scripts build",
11+
"test": "react-scripts test",
12+
"typecheck": "tsc --noEmit --skipLibCheck",
13+
"lint": "eslint --ignore-path .gitignore . --ext ts --ext tsx --ext js --ext jsx",
14+
"lint:fix": "eslint --fix --ignore-path .gitignore . --ext ts --ext tsx --ext js --ext jsx"
15+
},
16+
"husky": {
17+
"hooks": {
18+
"pre-push": "yarn lint && yarn typecheck"
19+
}
20+
},
521
"dependencies": {
22+
"react": "^16.13.1",
23+
"react-dom": "^16.13.1",
24+
"react-scripts": "3.4.1"
25+
},
26+
"devDependencies": {
627
"@testing-library/jest-dom": "^4.2.4",
728
"@testing-library/react": "^9.3.2",
829
"@testing-library/user-event": "^7.1.2",
930
"@types/jest": "^24.0.0",
1031
"@types/node": "^12.0.0",
1132
"@types/react": "^16.9.0",
1233
"@types/react-dom": "^16.9.0",
13-
"react": "^16.13.1",
14-
"react-dom": "^16.13.1",
15-
"react-scripts": "3.4.1",
34+
"@typescript-eslint/eslint-plugin": "^2.30.0",
35+
"@typescript-eslint/parser": "^2.30.0",
36+
"eslint-config-prettier": "^6.7.0",
37+
"eslint-plugin-prettier": "^3.1.1",
38+
"eslint-plugin-simple-import-sort": "^5.0.0",
39+
"husky": "^4.2.5",
40+
"node-sass": "^4.14.0",
41+
"prettier": "^2.0.5",
1642
"typescript": "~3.7.2"
1743
},
18-
"scripts": {
19-
"start": "react-scripts start",
20-
"build": "react-scripts build",
21-
"test": "react-scripts test",
22-
"eject": "react-scripts eject"
23-
},
24-
"eslintConfig": {
25-
"extends": "react-app"
26-
},
2744
"browserslist": {
2845
"production": [
2946
">0.2%",

‎src/App.css‎ renamed to ‎src/App.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
flex-direction: column;
2121
align-items: center;
2222
justify-content: center;
23-
font-size: calc(10px + 2vmin);
2423
color: white;
2524
}
2625

‎src/App.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from 'react';
22
import { render } from '@testing-library/react';
3+
34
import App from './App';
45

56
test('renders learn react link', () => {
67
const { getByText } = render(<App />);
7-
const linkElement = getByText(/learn react/i);
8+
const linkElement = getByText(/get more info on create react app/i);
89
expect(linkElement).toBeInTheDocument();
910
});

‎src/App.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,32 @@
11
import React from 'react';
2+
23
import logo from './logo.svg';
3-
import './App.css';
4+
import './App.scss';
45

56
function App() {
67
return (
78
<div className="App">
89
<header className="App-header">
910
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.tsx</code> and save to reload.
12-
</p>
11+
<h1>Typescript React project boilerplate with ESLint and Prettier</h1>
12+
<p>This project is initialized with Create React App</p>
13+
<h2>This project is consisting of:</h2>
14+
<ul>
15+
<li>TypeScript</li>
16+
<li>React (16+)</li>
17+
<li>react-scripts (createReactApp)</li>
18+
<li>react-testing-library (not Enzyme)</li>
19+
<li>SASS/SCSS</li>
20+
<li>ESLint (instead of deprecated TSLint)</li>
21+
<li>Prettier</li>
22+
</ul>
1323
<a
1424
className="App-link"
15-
href="https://reactjs.org"
25+
href="https://github.com/facebook/create-react-app"
1626
target="_blank"
1727
rel="noopener noreferrer"
1828
>
19-
Learn React
29+
Get more info on Create React App
2030
</a>
2131
</header>
2232
</div>

‎src/index.css‎ renamed to ‎src/index.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,8 @@ code {
1111
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
1212
monospace;
1313
}
14+
15+
ul {
16+
padding: 0;
17+
list-style-type: none;
18+
}

0 commit comments

Comments
 (0)