chore: add prettier config

Author: jason89521

.prettierrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  tabWidth: 2,
+  semi: true,
+  arrowParens: 'avoid',
+  singleQuote: true,
+  jsxSingleQuote: true,
+  bracketSameLine: true,
+  importOrder: ['^node:', '<THIRD_PARTY_MODULES>', '^~', '^[./]'],
+  importOrderSeparation: true,
+  plugins: [
+    'prettier-plugin-tailwindcss',
+    '@trivago/prettier-plugin-sort-imports',
+  ],
+};

package.json

@@ -19,6 +19,7 @@
     "prepublishOnly": "pnpm build:lib"
   },
   "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "3.3.0",
     "@types/jest": "^29.0.3",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
     "@typescript-eslint/parser": "^5.37.0",
@@ -28,20 +29,15 @@
     "eslint-plugin-react": "^7.31.8",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.0.3",
+    "prettier": "2.7.1",
+    "prettier-plugin-tailwindcss": "0.1.13",
     "typescript": "^4.8.3"
   },
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
-  "prettier": {
-    "tabWidth": 2,
-    "semi": true,
-    "singleQuote": true,
-    "jsxSingleQuote": true,
-    "printWidth": 80
-  },
   "pnpm": {
     "overrides": {
       "@types/react": "^18.0.20",

pnpm-lock.yaml

@@ -1,5 +1,6 @@
 import Head from 'next/head';
 import Image from 'next/image';
+
 import styles from '../styles/Home.module.css';
 
 const Home = () => {
@@ -34,16 +35,14 @@ const Home = () => {
 
           <a
             href='https://github.com/vercel/next.js/tree/canary/examples'
-            className={styles.card}
-          >
+            className={styles.card}>
             <h2>Examples &rarr;</h2>
             <p>Discover and deploy boilerplate example Next.js projects.</p>
           </a>
 
           <a
             href='https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
-            className={styles.card}
-          >
+            className={styles.card}>
             <h2>Deploy &rarr;</h2>
             <p>
               Instantly deploy your Next.js site to a public URL with Vercel.
@@ -56,8 +55,7 @@ const Home = () => {
         <a
           href='https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
           target='_blank'
-          rel='noopener noreferrer'
-        >
+          rel='noopener noreferrer'>
           Powered by{' '}
           <span className={styles.logo}>
             <Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} />