Merge pull request #9 from bence-toth/4-stylelint

Stylelint and Prettier

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.
 

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 ."
     }
   }
 }

template/.prettierrc.json

@@ -0,0 +1 @@
+{}

template/.stylelintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "plugins": ["stylelint-prettier"],
+  "rules": {
+    "prettier/prettier": true
+  }
+}

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);

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";

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"]
+}