文章首發於掘金同名帳號，詳情點擊閱讀原文查看。
鑑於發現有公眾號未經允許私自轉發，為方便維權，後續文章將多平臺同步更新。
前段時間領導告知公司將開啟一個全新的項目。
從零開始，如果不嘗試一下最近火熱的 Vue3 + Vite 豈不是白白浪費了這麼好的吃螃蟹的機會。
說幹就幹，然後就開始讀各種文檔，從 0 開始，一步一步搭完這個項目到可以正常開發，這對於我一個第一次搭生產項目的菜雞來說，著實艱難。
到今天，項目已經進入聯調階段，並且已經在環境上部署成功可以正常訪問。這個實驗也算是有了階段性的成功吧，因此來寫文章記錄此次Vue3項目搭建歷險記。
下載.jfif第一篇文章主要是項目初始化和ESLint導入，廢話不多說，開整。
初始化項目按照自己需要的框架選擇就可以了，我這裡用的Vue3+TS。初始化完成後的目錄結構如下：
目錄結構執行 npm run dev，大概率會直接報錯，因為項目默認啟動在3000埠，可能會被拒絕。
錯誤截圖解決這個問題，我們需要在根目錄下的 vite.config.ts 文件中修改開發伺服器的配置，手動指定埠號。
修改開發伺服器修改完成後重新啟動項目，就可以訪問了。
首頁添加ESLint支持eslint只有開發階段需要，因此添加到開發階段的依賴中即可npm install eslint --save-dev
在VS Code中安裝eslint插件，以在開發中自動進行eslint校驗module.exports = {
root: true,
env: {
browser: true, // browser global variables
es2021: true, // adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.
},
parserOptions: {
ecmaVersion: 12,
},
}
引入規則為了規範團隊成員代碼格式，以及保持統一的代碼風格，項目採用當前業界最火的 Airbnb規範 ，並引入代碼風格管理工具 Prettier 。eslint-plugin-vueESLint官方提供的Vue插件，可以檢查 .vue文件中的語法錯誤
npm install eslint-plugin-vue// .eslintrc.js
...
extends: [
'plugin:vue/vue3-recommended' // ++
]
...
eslint-config-airbnb-baseAirbnb基礎規則的eslint插件
// npm version > 5
npx install-peerdeps --dev eslint-config-airbnb-base// .eslintrc.js
...
extends: [
'plugin:vue/vue3-recommended',
'airbnb-base', // ++
],
...這個時候就應該可以看到一些項目原有代碼的eslint報錯信息了，如果沒有的話，可以嘗試重啟編輯器的eslint服務。
eslint-plugin-prettier本次項目不單獨引入prettier，而是使用eslint插件將prettier作為eslint規則執行。
npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier// .eslintrc.js
...
plugins: ['prettier'], // ++
rules: {
'prettier/prettier': 'error', // ++
},
...配置到此時，大概率會遇到 eslint 規則和 prettier 規則衝突的情況，比如下圖。eslint告訴我們要使用單引號，但是改為單引號以後，prettier有告訴我們要使用雙引號。
eslint報錯prettier報錯這時候就需要另一個eslint的插件 eslint-config-prettier，這個插件的作用是禁用所有與格式相關的eslint規則，也就是說把所有格式相關的校驗都交給 prettier 處理。
npm install --save-dev eslint-config-prettier// .eslintrc.js
...
plugins: ['prettier'],
extends: [
'plugin:vue/vue3-recommended',
'airbnb-base',
'plugin:prettier/recommended', // ++
],
rules: {
'prettier/prettier': 'error',
},
...plugin:prettier/recommended 的配置需要注意的是，一定要放在最後。因為extends中後引入的規則會覆蓋前面的規則。
我們還可以在根目錄新建 .prettierrc.js 文件自定義 prettier 規則，保存規則後，重啟編輯器的eslint服務以更新編輯器讀取的配置文件。
// .prettierrc.js
module.exports = {
singleQuote: true, // 使用單引號
}到此，我們的ESLint基本配置結束了，後續需要時可以對規則進行調整。
這篇文章到這裡就結束了，但是只在開發階段約束代碼風格是一件靠自覺性的事，因為我們還需要增強ESLint的約束度。下一篇文章，我們一起研究如果在提交代碼前進行ESLint二次校驗，保證提交到Git的代碼都是符合規定的~
代碼已上傳Git，倉庫地址：https://github.com/YuanDaoDao001/vue3-vite-typescript-eslint