npm create vite@latest <project-name> -- --template <react|react-ts>
# npm 7+, extra double-dash is needed

cd <project-name>
npm install
npm run dev

{
    "emmet.excludeLanguages": [],
    "emmet.includeLanguages": {
        "markdown": "html",
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
    },
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "files.exclude": {
        "**/*.js.map": {
            "when": "$(basename)"
        },
        "**/node_modules": true,
    },
    "html.autoClosingTags": true,
    "javascript.autoClosingTags": true,
    "javascript.suggest.completeFunctionCalls": true,
    "typescript.suggest.completeFunctionCalls": true,
    "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
    "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
    "javascript.inlayHints.parameterNames.enabled": "all",
    "typescript.inlayHints.parameterNames.enabled": "all",
    "javascript.suggest.autoImports": true,
    "search.exclude": {
        "**/coverage": true,
        "**/node_modules": true
    },
    "typescript.autoClosingTags": true,
    "typescript.suggest.autoImports": true,
}

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

{ 
+    "editor.formatOnSave": true,
+    "javascript.format.enable": false,
+    "javascript.validate.enable": true,
+    "typescript.format.enable": false,
+    "typescript.validate.enable": true,
}

npm install -D eslint
npx eslint --init

Use: To check syntax, find problems, and enforce code style
Type of modules: JavaScript modules (import/export)
Framework: React
Typescript: No #or Yes if the project uses it
Run: Browser #and Node if use Next.js
Style guide: Popular -> Standard #JS without semi-colon ;
Format: JSON

{
    "rules": {
+     "no-console": "warn",
+     "react/prop-types": "off",
+     "react/self-closing-comp": "warn",
    },
+   "settings": {
+     "react": {
+       "version": "detect"
+     }
+   }
}

{
    "parserOptions": {
+     "project": ["tsconfig.json"],
+     "createDefaultProgram": true
    },
    "rules": {
      "no-console": "warn",
      "react/prop-types": "off",
      "react/self-closing-comp": "warn",
+     "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+     "@typescript-eslint/explicit-function-return-type": "off",
  },
}

build
coverage
dist

{
  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix --ext .js,.jsx,.ts,.tsx"
  }
}

{
    "extends": [
      "plugin:react/recommended",
      "standard-with-typescript",
+     "plugin:react/jsx-runtime",    
    ],
}

{
    "rules": {
+       "padding-line-between-statements": [
+           "error",
+           {
+               "blankLine": "always",
+               "prev": "*",
+               "next": "return"
+           },
+           {
+               "blankLine": "always",
+               "prev": [
+                   "const",
+                   "let",
+                   "var"
+               ],
+               "next": "*"
+           },
+           {
+               "blankLine": "any",
+               "prev": [
+                   "const",
+                   "let",
+                   "var"
+               ],
+               "next": [
+                   "const",
+                   "let",
+                   "var"
+               ]
+           }
+       ]
    },
}

{
    "rules": {
+       "import/order": [
+           "warn",
+           {
+               "pathGroups": [
+                   {
+                       "pattern": "~/**",
+                       "group": "external",
+                       "position": "after"
+                   }
+               ],
+               "newlines-between": "always-and-inside-groups"
+           }
+       ],
+       "react/jsx-sort-props": [
+           "warn",
+           {
+               "callbacksLast": true,
+               "shorthandFirst": true,
+               "noSortAlphabetically": false,
+               "reservedFirst": true
+           }
+       ]
    },
}

{ 
+    "eslint.alwaysShowStatus": true,
+    "eslint.probe": [
+        "javascript",
+        "javascriptreact",
+        "typescript",
+        "typescriptreact"
+    ],
+    "[javascript][typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+        "editor.formatOnSave": false,
         // Runs Prettier, then ESLint
+        "editor.codeActionsOnSave": [
+            "source.formatDocument",
+            "source.fixAll.eslint"
+        ],
+    }
}

npm install -D prettier 

npm install -D eslint-config-prettier

npm install -D tslint-config-prettier

build
coverage
dist
package-lock.json

{
    "semi": false,
    "singleQuote": true
}

{
    "extends": [
        "plugin:react/recommended",
        "standard-with-typescript",
        "plugin:react/jsx-runtime",
+       "prettier", //at last
    ],
}

{
  "scripts": {
+    "format": "prettier . --check",
+    "format:fix": "prettier . --write"
  }
}

npm install --global htmlhint

npm install -D eslint-plugin-html

{
    "plugins": [
        "react",
+       "html"
    ],
}

npm install -D stylelint stylelint-config-standard

{
  "extends": "stylelint-config-standard",
  "rules": {
    "declaration-colon-newline-after": "always-multi-line",
    "property-no-unknown": [ true, {
      "ingnoreProperties": ["content-visibility"] 
    }]
  },
  "ignoreFiles": [
    "build/**",
    "coverage/**",
    "dist/**",
    "**/*.js",
    "**/*.jsx", 
    "**/*.ts",
    "**/*.tsx" 
  ] 
}

{ 
+    "stylelint.enable": true,
+    "css.validate": false,
+    "less.validate": false,
+    "scss.validate": false,
+    "[css][scss]": {
+        "editor.defaultFormatter": "stylelint.vscode-stylelint"
+    }
}

npm install -D stylelint-config-prettier

{
  "extends": 
+  [
    "stylelint-config-standard",
+   "stylelint-config-prettier"
+  ]
}

git init

npx mrm@3 lint-staged

npm install -D vitest

- import { defineConfig } from 'vite'
+ import { defineConfig } from 'vitest/config'

export default defineConfig({
+  test: {
+    globals: true,
+  },
})

{ 
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+  }
}

import { it, expect, describe } from "vitest";

{
  "scripts": {
+    "test":    "vitest --run --reporter verbose",
+    "test:w":  "vitest",
+    "test:ui": "vitest --ui",
  }
}

npm install -D @vitest/coverage-c8

{
  "scripts": {
+    "test:c":  "vitest run --coverage",
+    "test:cw": "vitest watch --coverage"
  }
}

import { defineConfig } from 'vitest/config'

export default defineConfig({
+  test: {
+    reporters: ['verbose'],
+    coverage: {
+     all: true,
+      reporter: ['text', 'html', 'lcov'],
+      include: ['**/src/**/*.{js,jsx,ts,tsx}'],
+      exclude: [
+        '**/src/main.{js,jsx,ts,tsx}',
+        '**/*.types.{ts,tsx}',
+        '**/*.test.{js,jsx,ts,tsx}',
+        '**/src/vite-env*',
+      ],
+      statements: 0,
+      branches: 0,
+      functions: 0,
+      lines: 0,
+    },
  },
})

npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event

npm install -D jsdom

import { defineConfig } from 'vitest/config'

export default defineConfig({
   test: {
     globals: true,
+    environment: 'jsdom',
   },
})

+ /* Extend Matchers */
+ import '@testing-library/jest-dom'

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
+   setupFiles: './test/setup.ts',
  },
})

npm install --D eslint-plugin-testing-library eslint-plugin-jest-dom

{
    "extends": [
        "plugin:react/recommended",
        "standard-with-typescript",
        "plugin:react/jsx-runtime",
        "prettier",
+       "plugin:testing-library/react",
+       "plugin:jest-dom/recommended"
    ],
    "plugins": [
        "react",
        "html",
+       "testing-library",
+       "jest-dom"
    ],
    "rules": {
+       "testing-library/await-async-query": "error",
+       "testing-library/no-await-sync-query": "error",
+       "testing-library/no-debugging-utils": "warn",
+       "testing-library/no-dom-import": "off",
+       "jest-dom/prefer-checked": "error",
+       "jest-dom/prefer-enabled-disabled": "error",
+       "jest-dom/prefer-required": "error",
+       "jest-dom/prefer-to-have-attribute": "error"
    },
}

/* Extend Matchers */
import '@testing-library/jest-dom'
+ import '@testing-library/jest-dom/extend-expect'

npm install -D msw cross-fetch

+ /* Mock Service Worker */
+ import { afterAll, afterEach, beforeAll } from 'vitest'
+ import { fetch } from 'cross-fetch'
+ import { server } from './mocks/server'

+ // Add `fetch` polyfill.
+ global.fetch = fetch

+ // Establish API mocking before all tests
+ beforeAll(() => server.listen({ onUnhandledRequest: `error` }))

+ // Reset any request handlers that we may add during the tests,
+ // so they don't affect other tests
+ afterEach(() => server.resetHandlers())

+ // Clean up after the tests are finished
+ afterAll(() => server.close())

npm install -S click-to-react-component

import React from "react"
import ReactDOM from "react-dom/client"
+import { ClickToComponent } from "click-to-react-component"

import App from "./App"
import "./index.css"

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
+   <ClickToComponent />
  </React.StrictMode>
)

npm install -D postcss

npm install -D postcss-nesting
npm install -D autoprefixer

{
  "plugins": {
    "postcss-nesting": true,
    "autoprefixer": true
  }
}

npm install --D postcss-lit

{
  "extends": "stylelint-config-standard",
+  "customSyntax": "postcss-lit"
}

npm install -D sass

npm remove stylelint-config-standard stylelint-config-prettier
npm install --D stylelint-config-standard-scss stylelint-config-prettier-scss

{
  "extends": [
-    "stylelint-config-standard",
+    "stylelint-config-standard-scss",
-    "stylelint-config-prettier",
+    "stylelint-config-prettier-scss",
  ]
}