diff --git a/README.md b/README.md index 5dea1e8..072f0f6 100644 --- a/README.md +++ b/README.md @@ -7,11 +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. diff --git a/template.json b/template.json index bb91d6d..abbadb2 100644 --- a/template.json +++ b/template.json @@ -9,12 +9,23 @@ "@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" }, "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 ." } } } 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 + } +} 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"] +}