[筆記] 在Vite專案安裝還原自己常用的開發環境

這篇文章用來記錄自己在用Vite 重新改寫自已的Vue2.6版本的專案的時候, 如何重新安裝自己所有原本所需的工具與環境

因為Vite 目前還沒辦法像Vue CLI 一樣方便, VueCLI提供安裝選項(lint, sass/scss loader, router, testing. ..), 然後由CLI自己來安裝專案所需要的套件

但Vite 目前還沒提供這樣的服務 ‵

目前只有提供你想要安裝哪一種Framework(Vue, React, Selvet…)

所以安裝完之後, 如果是選Vue, 那專案裡面只會幫你裝好Vue, 設定環境的vite.config.js, 以及簡單的範例HelloWord.vue頁面

新專案建立

首先安裝指令很簡單

npm init @vitejs/app [專案名稱]

Vite.config.js 自動引入Vue

初始的package.json

Vue Router

Vue的router 工具. v4的版本只能用在Vue 3.02

npm install vue-router@4 -S

Vuex

Vue 的 狀態管理工具

npm install vuex@next -S

Tailwind CSS(or Windi CSS)

Tailwind CSS 是目前我常用的CSS 管理工具. 最大的優點就是不需要再另外想class 名稱. Tailwind css 的所有class 名稱只會包含一種樣式, 並且可以從class名稱就能知道該樣式為何. 另外我認為有一個優點是可以直接從HTML 上就能知道頁面上的排版, 位置 或顏色等等, 不需要再找寫在CSS檔案的樣式, 必須HTML跟CSS 互相切換對應class名稱, 才能 知道HTML 元素上的樣式為何. 這個功能最主要的優點是可以在看code的時候就能夠知道該頁面/元件的樣式或排版, 而不用再切到開發者工具上才需要知道(當然有時候還是需要開發者工具來debug)

目前Tailwind CSS 跟Windi CSS都有支援跟Vite整合

Tailwind CSS + Vite 安裝方式

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

建立 tailwind.config.js 跟 postcss.config.js

// tailwind.config.js

module.exports = {
  // 在production mode下, 會移除在這些檔案內沒有使用的style
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

最後在將tailwind 的 樣式引入到專案的css 入口檔案

Windi CSS + Vite 安裝方式

必須安裝vite-plugin-windicss套件, 透過這個套件可以將windi.config.js 裡面自己定義的樣式載入到vite裡面

npm i -D vite-plugin-windicss windicss

另外在main.js 引入 windicss 的樣式庫

// main.js
import 'virtual:windi.css'

或是也可以寫成像是tailwind css 一樣 (但必須是 v0.14.x)

// main.js
import 'virtual:windi-base.css'
import 'virtual:windi-components.css'
import 'virtual:windi-utilities.css'

這樣就是把Windi CSS的預設class 樣式庫引入

如果要擴充或是覆蓋Windi CSS 預設的class 樣式庫, 需要先在根目錄下建立windi.config.js 檔案, 並將客製的樣式寫在裡面

官方範例如下

結構跟tailwind CSS的config檔差不多

但設定完後, 會發現vite專案仍無法使用這些樣式, 這時候就需要vite-plugin-windicss來引入

引入方式如下

// windi.config.js

import { defineConfig } from 'vite-plugin-windicss'

export default defineConfig({
  // Configuration
})

這樣即可

Proxy Server

因為專案的關係, 很常需要透過proxy server 連到Mock server. 所以先記錄一下如何在vite.config.js設定Proxy server

SCSS

跟據官網的doc

只需要一行就可以

npm install -D sass

測試

建立一個index.scss 檔案, 並將App.vue 裡面的css code移到index.scss裡面

在App.vue 裡面加一行 測試code

<p class="test">Scss test</p>

並在index.scss 裡面將它的文字設定成紅色

測試成功

目前在指定index.scss 的路徑是用絕對路徑, 但如果某個資料夾底下的檔案,要import 另一個在某個資料夾底下的檔案, 這樣在設定路徑的時候就需要指回到跟目錄在往該資料夾下的檔案找. 這路徑設定顯得麻煩而且常常會設定錯路徑。為了以後方便, 設定alias 來省下設定

這樣即可

ESLint

專案必備之一的工具, 用來檢查排版, 沒有用到的變數, 建立專案的coding style, 搭配IDE 之後 可以透過IDE自動排版

安裝指令

npm install -D eslint eslint-plugin-vue

最基本的安裝套件就是這兩樣

如果還要再加上自己偏好的coding style, 例如 airbnb, prettier, 可以在加

npm install -D eslint-config-prettier

再來在跟目錄下新增.eslintrc.js 檔案(eslint 預設讀取的檔名)

ESLint 設定與Rules

先備註一下我常用的rules

{
  // enable using console in dev mode but got err in production
  "no-console": "off",
  "import/no-dynamic-require": 0,

  // limit the maximum attributes in each line
  "vue/max-attributes-per-line": 1,

  // function parameters could be reassign value
  "no-param-reassign": 0,
  indent: ["error", "tab"],
  "vue/html-indent": ["error", "tab"],
  "padding-line-between-statements": [
    "error",
    {
      blankLine: "always",
      prev: "*",
      next: ["if", "for", "return", "switch", "throw", "try"],
    },
  ],
  "no-useless-catch": 0,
}

ESLint 預設只會檢查目前ECMAScript 最新版本的標準語法, 但是experimental 語法就認不得了, 所以為了之後專案可能會用到新的ES 語法需要另外安裝babel plugin: @babel/eslint-parser

註: 該套件需要@babel/core@>=7.2.0 才能用. 舊版的babel-eslint 目前已經不再維護

Babel 安裝指令

npm i -D @babel/core @babel/eslint-parser

安裝完Babel後需要在跟目錄下建立.babel.config.js.

// babel.config.js

module.exports = {}

否則eslint 在檢查的時候可能會遇到這個錯誤

0:0  error  Parsing error: No Babel config file detected for [file path] . Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files

另外需要在eslintrc.js加上這段才能夠讓eslint-parser 生效

parserOptions: {
 parser: "@babel/eslint-parser",
},

.eslintignore

設定路徑, 讓eslint 忽略設定的檔案或資料夾. 預設直接忽略node_modules

node_modules

Stylelint

除了JS 有語法檢查工具之外, CSS 也有。就是Stylelint.

安裝步驟直接依照官網提供的指令

npm install --save-dev stylelint stylelint-config-standard

stylelint-config-standard就是預設的style 格式

我自己常用CSS preprocessor: SCSS 來寫樣式, 所以還需要再加裝

npm i -D stylelint-scss

安裝完後需要在專案的跟目錄下建立.stylelintrc.json 或是.stylelintrc.js 檔案, 這裡可以參考檔名命名方式: https://stylelint.io/user-guide/configure

延續eslint 設定檔檔名的命名方式, 就使用.stylelintrc.js

在設定檔內必須要有

{
  extends: "stylelint-config-standard"
  plugins: ["stylelint-scss"],  //支援SCSS檔案
}

再加上常用的rules

{
  ...,
  rules: {
    ...,
    "indentation": "tab",
    "color-hex-case": "lower",
    "color-hex-length": "long",
    "scss/at-rule-no-unknown": [
     true,
     {
       ignoreAtRules: ["layer"],
     },
    ],
    "declaration-block-trailing-semicolon": null,
  }
}

最後在package.json的script 加上lint指令

"lint:css": "stylelint src/**/*.{vue,html,scss,css}"

驗證CSS, SCSS, Vue 跟html 檔案內的所以CSS跟SCSS

要檢查的時候就可以在command line下

npm run lint:css

就可以看結果

馬上可以知道那些檔案的格式不符

VSCode 也有 stylelint 套件

然後在vscode的setting.json 內加上

"editor.codeActionsOnSave": {
   "source.fixAll.stylelint": true
 }

這樣如果有格式錯誤的時候, 在存檔時就會直接自動修正格式

或是

"editor.codeActionsOnSave": {
  "source.fixAll": true
}

這樣除了stylelint, 其他lint 也會自動修正錯誤的格式(包含eslint)

.stylelintignore

與.eslintignore 一樣, 讓stylelint 忽略檔案或資料夾

Jest

安裝指令

前端常用的單元測試工具之一, 也是個人常用的單元測試工具之一

如果要做components test 的話可以直接用 @testing-library/jest-dom

npm install --save-dev @testing-library/jest-dom

Vue-i18n (Optional)

目前Vue-i18n有8.x 與9.x兩種不同版本, v9 是給Vue3.0使用. 版本的差異可以參考這裡

因為使用Vite 工具必須是Vue 3.0 以上才行(編寫此段時間為2021/6/5, 未來會不會相容2.x版還不確定)

所以用Vite開發可以選擇用Vue-i18n的v9

安裝指令

npm install vue-i18n@next

Vue-i18n (Optional)

Vue 常用的表單驗證工具之一

For Vue 3.x

npm install vee-validate@next --save

Vee-Validation (Optional)