Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

最近想要練習 TypeScript,聽說程式寫得愈複雜,要回查資料就愈方便

以下取自朋友的超~簡略分享:

前兩天看人別人的專案,沒有用 typescript,突然覺得自己好像不會寫 code 了。

一直想辦法找這個東西裡面有什麼、在哪裡被定義、在哪裡被用到,才知道我省下了多少時間。

因此,來用用 VUE 作者推薦的 Vite 吧!

安裝 Vite 與 TypeScript

$ npm create vite@latest 專案名稱 -- --template vue-ts
$ cd 專案名稱
$ npm install
$ npm run dev

網址列輸入 https://localhost:5173,出現以下畫面表示安裝完成

安裝 TailwindCSS

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

打開 tailwind.config.cjs,在 content 裡新增設定

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

打開 src/style.css,新增 tailwindCSS 語法

@tailwind base;
@tailwind components;
@tailwind utilities;

到 HelloWorld.vue 輸入以下語法,如果文字變大,也有出現底線,表示安裝成功。恭喜你,可以開心地使用 TailWindCSS 啦

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

安裝 ESLint

$ npm i -D eslint eslint-plugin-vue vite-plugin-eslint @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

新增 .eslintrc.cjs

module.exports = {
  root: true,
  env: {
    node: true,
    es2021: true
  },
  extends: [
    "eslint:recommended",
    "@vue/typescript/recommended",
    "plugin:vue/vue3-essential",
  ],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
  },
  rules: {
    // 這邊可以自訂規則
  },
}

載入 vite-plugin-eslint 模組

打開 vite.config.ts 載入 vite-plugin-eslint 模組,並將 cache 設為 false,就可以在儲存時自動檢查調整你的格式

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from "vite-plugin-eslint" // 新增這行

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({ cache: false }) // 新增這行
  ]
})

安裝 standard 規範

$ npm install -D @vue/eslint-config-standard

修改 .eslintrc.cjs

extends: [
  'eslint:recommended',
  '@vue/typescript/recommended',
  'plugin:vue/vue3-essential',
  '@vue/standard'  // 新增這行
],

直接套用模板

我有將這個 template 上傳到 Github,有興趣的朋友可以直接使用

GitHub - mukiwu/vue3-vite-typescript-tailwind-eslint

GitHub - mukiwu/vue3-vite-typescript-tailwind-eslint

Contribute to mukiwu/vue3-vite-typescript-tailwind-eslint development by creating an account on GitHub.

https://github.com/mukiwu/vue3-vite-typescript-tailwind-eslint

歡迎給我點鼓勵,讓我知道你來過 :)

18
Subscribe
Notify of
guest

0 則留言
Inline Feedbacks
View all comments