From fbd44286d887f7d67d98196de59fea53c6cb494a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bence=20A=2E=20T=C3=B3th?= Date: Sat, 16 Jul 2022 21:45:10 +0200 Subject: [PATCH 1/7] Added stylelint to dependencies --- template.json | 1 + 1 file changed, 1 insertion(+) diff --git a/template.json b/template.json index bb91d6d..d23d519 100644 --- a/template.json +++ b/template.json @@ -10,6 +10,7 @@ "@types/react-dom": "^18.0.0", "classnames": "^2.3.1", "react-router-dom": "^6.3.0", + "stylelint": "^14.9.1", "typescript": "^4.4.2", "web-vitals": "^2.1.0" }, From 26de0a4ad7e7d1f6b0e2080880375d561f033070 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bence=20A=2E=20T=C3=B3th?= Date: Sat, 16 Jul 2022 21:45:38 +0200 Subject: [PATCH 2/7] Updated readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 5dea1e8..cf1e470 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ In addition to [the official TypeScript template](https://github.com/facebook/cr - [classnames](https://www.npmjs.com/package/classnames) - [react-router-dom](https://www.npmjs.com/package/react-router-dom) +- [stylelint](https://www.npmjs.com/package/stylelint) Furthermore, there are the following additions: From f2ee0c10cb1790b2cec07d713d11d8ebcfaf0f65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bence=20A=2E=20T=C3=B3th?= Date: Sat, 16 Jul 2022 21:51:21 +0200 Subject: [PATCH 3/7] Added prettier and stylelint configs --- template.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/template.json b/template.json index d23d519..c6ff956 100644 --- a/template.json +++ b/template.json @@ -9,8 +9,12 @@ "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "classnames": "^2.3.1", + "prettier": "^2.7.1", "react-router-dom": "^6.3.0", "stylelint": "^14.9.1", + "stylelint-config-prettier": "^9.0.3", + "stylelint-config-standard": "^26.0.0", + "stylelint-prettier": "^2.0.0", "typescript": "^4.4.2", "web-vitals": "^2.1.0" }, From c689d07342290b2c97d3c37e365226d51d093014 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bence=20A=2E=20T=C3=B3th?= Date: Sat, 16 Jul 2022 21:53:25 +0200 Subject: [PATCH 4/7] Added npm scripts for linting and prettier --- template.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/template.json b/template.json index c6ff956..abbadb2 100644 --- a/template.json +++ b/template.json @@ -20,6 +20,12 @@ }, "eslintConfig": { "extends": ["react-app", "react-app/jest"] + }, + "scripts": { + "lint": "npm run lint-js; npm run lint-css", + "lint-js": "eslint ./src", + "lint-css": "stylelint \"**/*.css\"", + "prettier": "prettier --check ." } } } From 706c6739a5384f4b1982d51039eecf777b57998a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bence=20A=2E=20T=C3=B3th?= Date: Sat, 16 Jul 2022 22:11:47 +0200 Subject: [PATCH 5/7] Added RC files for prettier and stylelint --- template/.prettierrc.json | 1 + template/.stylelintrc.json | 7 +++++++ 2 files changed, 8 insertions(+) create mode 100644 template/.prettierrc.json create mode 100644 template/.stylelintrc.json diff --git a/template/.prettierrc.json b/template/.prettierrc.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/template/.prettierrc.json @@ -0,0 +1 @@ +{} diff --git a/template/.stylelintrc.json b/template/.stylelintrc.json new file mode 100644 index 0000000..79757b1 --- /dev/null +++ b/template/.stylelintrc.json @@ -0,0 +1,7 @@ +{ + "extends": ["stylelint-config-standard", "stylelint-config-prettier"], + "plugins": ["stylelint-prettier"], + "rules": { + "prettier/prettier": true + } +} From f79cd8f9fec5c69e9a01db3d05a93c3176414196 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bence=20A=2E=20T=C3=B3th?= Date: Sat, 16 Jul 2022 22:12:49 +0200 Subject: [PATCH 6/7] Fixed prettier violations --- template/src/reportWebVitals.ts | 4 ++-- template/src/setupTests.ts | 2 +- template/tsconfig.json | 20 ++++++++++++++++++++ 3 files changed, 23 insertions(+), 3 deletions(-) create mode 100644 template/tsconfig.json diff --git a/template/src/reportWebVitals.ts b/template/src/reportWebVitals.ts index 49a2a16..5fa3583 100644 --- a/template/src/reportWebVitals.ts +++ b/template/src/reportWebVitals.ts @@ -1,8 +1,8 @@ -import { ReportHandler } from 'web-vitals'; +import { ReportHandler } from "web-vitals"; const reportWebVitals = (onPerfEntry?: ReportHandler) => { if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { getCLS(onPerfEntry); getFID(onPerfEntry); getFCP(onPerfEntry); diff --git a/template/src/setupTests.ts b/template/src/setupTests.ts index 8f2609b..1dd407a 100644 --- a/template/src/setupTests.ts +++ b/template/src/setupTests.ts @@ -2,4 +2,4 @@ // allows you to do things like: // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; +import "@testing-library/jest-dom"; diff --git a/template/tsconfig.json b/template/tsconfig.json new file mode 100644 index 0000000..9d379a3 --- /dev/null +++ b/template/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["src"] +} From d18416e7bb1e38826f48eca7cce3d3fd25041680 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bence=20A=2E=20T=C3=B3th?= Date: Sat, 16 Jul 2022 22:19:49 +0200 Subject: [PATCH 7/7] Updated readme --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index cf1e470..072f0f6 100644 --- a/README.md +++ b/README.md @@ -7,12 +7,22 @@ No spinning logo, no unnecessary boilerplate code. In addition to [the official TypeScript template](https://github.com/facebook/create-react-app/tree/main/packages/cra-template-typescript), the following dependencies are included by default: - [classnames](https://www.npmjs.com/package/classnames) +- [prettier](https://www.npmjs.com/package/prettier) - [react-router-dom](https://www.npmjs.com/package/react-router-dom) - [stylelint](https://www.npmjs.com/package/stylelint) +- [stylelint](https://www.npmjs.com/package/stylelint) +- [stylelint-config-prettier](https://www.npmjs.com/package/stylelint-config-prettier) +- [stylelint-config-standard](https://www.npmjs.com/package/stylelint-config-standard) +- [stylelint-prettier](https://www.npmjs.com/package/stylelint-prettier) Furthermore, there are the following additions: - HTTPS is enabled in development and test mode +- Some additional npm scripts are available: + - `npm run lint-js` to run ESLint + - `npm run lint-css` to run Stylelint + - `npm run lint` to run both ESLint and Stylelint + - `npm run prettier` to run a Prettier check To use this template, add `--template typescript-blank` when creating a new app.