prettier

.eslintrc

@@ -1,6 +1,10 @@
 {
-  "extends": ["@antfu", "plugin:tailwindcss/recommended"],
+  "extends": ["@antfu", "prettier", "plugin:tailwindcss/recommended"],
+  "plugins": ["prettier"],
   "rules": {
+    "prettier/prettier": "error",
+    "antfu/if-newline": "off",
+    "no-console": "off",
     "tailwindcss/classnames-order": "error",
     "tailwindcss/no-custom-classname": "off"
   }

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 80,
+  "semi": false,
+  "singleQuote": true
+}

.vscode/extensions.json

@@ -4,7 +4,10 @@
     "ZixuanChen.vitest-explorer",
     "bradlc.vscode-tailwindcss",
     "vue.volar",
+    "vue.vscode-typescript-vue-plugin",
     "dbaeumer.vscode-eslint",
-    "EditorConfig.EditorConfig"
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode",
+    "gruntfuggly.todo-tree"
   ]
 }

.vscode/settings.json

@@ -3,12 +3,10 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "css.lint.unknownAtRules": "ignore",
   "i18n-ally.dirStructure": "file",
-  "i18n-ally.localesPaths": [
-    "src/i18n"
-  ],
+  "i18n-ally.localesPaths": ["src/i18n"],
   "i18n-ally.keystyle": "nested",
   "i18n-ally.sourceLanguage": "ru"
 }

package.json

@@ -27,10 +27,13 @@
     "@vue/test-utils": "^2.3.2",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.38.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-tailwindcss": "^3.11.0",
     "happy-dom": "^9.8.0",
     "lint-staged": "^13.2.1",
     "postcss": "^8.4.22",
+    "prettier": "^2.8.8",
     "simple-git-hooks": "^2.8.1",
     "tailwindcss": "^3.3.1",
     "taze": "^0.9.1",

src/App.vue

@@ -16,36 +16,46 @@ function toggleLocale() {
 
   if (!(indexOfCurrentLocale < availableLocales.length - 1))
     localeStore.value = availableLocales[0]
-
-  else
-    localeStore.value = availableLocales[indexOfCurrentLocale + 1]
+  else localeStore.value = availableLocales[indexOfCurrentLocale + 1]
 }
 </script>
 
 <template>
-  <div class="m-auto flex min-h-[100vh] max-w-2xl flex-col items-center justify-center p-4 text-center font-sans">
+  <div
+    class="m-auto flex min-h-[100vh] max-w-2xl flex-col items-center justify-center p-4 text-center font-sans"
+  >
     <header class="flex flex-wrap items-center justify-center gap-4">
-      <h1>
-        Tailvue
-      </h1>
+      <h1>Tailvue</h1>
     </header>
     <main class="flex flex-col items-center gap-4">
       <section>
         <p data-testId="aboutParagraph">
-          {{ $t("about") }}
+          {{ $t('about') }}
         </p>
       </section>
 
       <div class="flex gap-4">
-        <a href="https://github.com/SeryiBaran/tailvue-starter" target="_blank" class="btn icon-button">
+        <a
+          href="https://github.com/SeryiBaran/tailvue-starter"
+          target="_blank"
+          class="btn icon-button"
+        >
           <IconMdiGithub class="icon" />
         </a>
 
-        <button class="btn icon-button" data-testId="toggleDarkBtn" @click="toggleDark()">
+        <button
+          class="btn icon-button"
+          data-testId="toggleDarkBtn"
+          @click="toggleDark()"
+        >
           <IconMdiThemeLightDark class="icon" />
         </button>
 
-        <button data-testId="toggleLocaleBtn" class="btn icon-button" @click="toggleLocale()">
+        <button
+          data-testId="toggleLocaleBtn"
+          class="btn icon-button"
+          @click="toggleLocale()"
+        >
           <IconMdiTranslate class="icon" />
         </button>
       </div>

src/__tests__/i18n.spec.ts

@@ -16,13 +16,21 @@ describe('I18n', async () => {
       },
     })
 
-    const locales = Object.keys(config.messages) as Array<keyof typeof config.messages>
+    const locales = Object.keys(config.messages) as Array<
+      keyof typeof config.messages
+    >
 
     for (let index = 0; index < locales.length + 1; index++) {
       if (index !== 0)
-        await wrapper.find('button[data-testId="toggleLocaleBtn"]').trigger('click')
+        await wrapper
+          .find('button[data-testId="toggleLocaleBtn"]')
+          .trigger('click')
 
-      expect(wrapper.find('p[data-testId="aboutParagraph"]').text()).toBe(config.messages[index > locales.length - 1 ? locales[0] : locales[index]].about)
+      expect(wrapper.find('p[data-testId="aboutParagraph"]').text()).toBe(
+        config.messages[
+          index > locales.length - 1 ? locales[0] : locales[index]
+        ].about
+      )
     }
   })
 })

tailwind.config.cjs

@@ -2,10 +2,7 @@
 
 module.exports = {
   darkMode: 'class',
-  content: [
-    './index.html',
-    './src/**/*.{vue,js,ts,jsx,tsx}',
-  ],
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {
       fontFamily: {

tsconfig.json

@@ -3,10 +3,7 @@
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2016",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "strict": true,
     "jsx": "preserve",
     "esModuleInterop": true,
@@ -18,18 +15,9 @@
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   },
-  "include": [
-    "env.d.ts",
-    "./src/**/*"
-  ],
-  "exclude": [
-    "dist",
-    "node_modules",
-    "*.cjs"
-  ]
+  "include": ["env.d.ts", "./src/**/*"],
+  "exclude": ["dist", "node_modules", "*.cjs"]
 }

vite.config.ts

@@ -10,10 +10,7 @@ export default defineConfig({
       '@/': `${path.resolve(__dirname, 'src')}/`,
     },
   },
-  plugins: [
-    Vue(),
-    Icons({ compiler: 'vue3' }),
-  ],
+  plugins: [Vue(), Icons({ compiler: 'vue3' })],
   test: {
     environment: 'happy-dom',
   },