fix: broken eslint, prettier and tailwindcss intellisense

Author: AnotiaWang

.eslintrc

@@ -0,0 +1,3 @@
+# 由于使用了 @nuxtjs/tailwindcss，tailwindcss 不是直接依赖，
+# 需要将依赖平铺在 node_modules 中，否则 VS Code 插件不会启用语法支持
+shamefully-hoist=true

.npmrc

@@ -2,6 +2,6 @@
   <div
     class="w-screen h-screen bg-white dark:bg-black dark:text-white transition-all"
   >
-    <slot></slot>
+    <slot />
   </div>
 </template>

app/layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col items-center py-10 gap-y-8">
-    <span class="text-[30px]">Nuxt & TDesign Vue Next</span>
+  <div class="flex flex-col items-center px-4 py-10 gap-y-8 h-full">
+    <h1 class="text-[26px]">Nuxt & TDesign Vue Next</h1>
     <div class="space-x-2">
       <TButton
         ghost
@@ -22,33 +22,44 @@
       <TButton @click="theme.setTheme('default')">默认主题</TButton>
       <TButton @click="theme.setTheme('test')">主题 1</TButton>
     </div>
-    <div class="flex items-center gap-x-5">
+    <div class="grid grid-cols-2 sm:flex flex-row items-center gap-2">
       <TButton>按钮示例</TButton>
       <TButton theme="warning" loading>按钮示例</TButton>
       <TButton theme="danger" disabled>按钮示例</TButton>
       <TButton theme="success" variant="outline">按钮示例</TButton>
     </div>
 
-    <div class="flex items-center gap-x-4">
+    <div class="flex flex-col sm:flex-row items-center gap-4">
       <!-- tag-name 和 TagName 写法都可以 -->
-      <t-switch class="flex-none" v-model="isLoading" size="large">
+      <t-switch v-model="isLoading" class="flex-none" size="large">
         <template #label> 加载中 </template>
       </t-switch>
       <TTagInput v-model="tags" drag-sort clearable>
         <template #label> 你喜欢的前端框架： </template>
       </TTagInput>
     </div>
     <TAlert :theme="alertTheme" close>{{ date }}</TAlert>
+
+    <div class="mt-auto">
+      <a
+        href="https://zeabur.com?referralCode=AnotiaWang&utm_source=AnotiaWang&utm_campaign=oss"
+      >
+        <img
+          src="https://zeabur.com/deployed-on-zeabur-dark.svg"
+          alt="Deployed on Zeabur"
+        />
+      </a>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
   const theme = useThemeStore()
 
   const tags = ref(['Vue', 'React', 'Angular'])
+  const isLoading = ref(true)
+  const alertTheme = ref<'success' | 'warning' | 'error' | 'info'>('success')
   let date: Date
-  let isLoading = ref(true)
-  let alertTheme = ref<'success' | 'warning' | 'error' | 'info'>('success')
 
   onMounted(() => {
     date = new Date()

app/pages/index.vue

@@ -0,0 +1,7 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+// @ts-ignore
+import configPrettier from 'eslint-config-prettier'
+import pluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+
+export default withNuxt(pluginPrettierRecommended, configPrettier)

eslint.config.mjs

@@ -8,10 +8,11 @@ export default defineNuxtConfig({
 
   modules: [
     '@pinia/nuxt',
-    'nuxt-simple-robots',
+    '@nuxtjs/robots',
     '@nuxtjs/tailwindcss',
     '@nuxtjs/color-mode',
     '@nuxtjs/sitemap',
+    '@nuxt/eslint',
   ],
 
   plugins: [],
@@ -27,7 +28,7 @@ export default defineNuxtConfig({
 
   // Sitemap module configuration: https://nuxtseo.com/site-config/getting-started/how-it-works
   site: {
-    url: 'https://tdesign-vue-nuxt-starter.vercel.app', // FIXME: Your website URL
+    url: 'https://tdesign-vue-nuxt-starter.ataw.top', // FIXME: Your website URL
   },
 
   vite: {

nuxt.config.ts

@@ -5,28 +5,27 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "devDependencies": {
-    "@nuxt/devtools": "1.3.9",
-    "@nuxtjs/color-mode": "^3.4.2",
-    "@nuxtjs/sitemap": "^5.3.5",
-    "@nuxtjs/tailwindcss": "^6.12.1",
     "@types/node": "^20.14.11",
-    "@typescript-eslint/eslint-plugin": "^7.16.1",
-    "@typescript-eslint/parser": "^7.16.1",
     "eslint": "^9.7.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-vue": "^9.27.0",
-    "nuxt": "^3.12.4",
-    "nuxt-simple-robots": "4.0.1",
-    "unplugin-auto-import": "^0.18.0",
-    "unplugin-vue-components": "^0.27.3",
-    "vue-eslint-parser": "^9.4.3"
+    "eslint-plugin-prettier": "^5.2.1"
   },
   "dependencies": {
+    "@nuxt/devtools": "1.3.9",
+    "@nuxt/eslint": "^0.3.13",
+    "@nuxtjs/color-mode": "^3.4.2",
+    "@nuxtjs/robots": "^4.0.2",
+    "@nuxtjs/sitemap": "^5.3.5",
+    "@nuxtjs/tailwindcss": "^6.12.1",
     "@pinia/nuxt": "^0.5.1",
-    "tdesign-vue-next": "^1.9.7"
+    "nuxt": "^3.12.4",
+    "tdesign-vue-next": "^1.9.7",
+    "unplugin-auto-import": "^0.18.0",
+    "unplugin-vue-components": "^0.27.3"
   }
-}
+}