“

最近鬼哥也在使用Vue3.0，項目架構(gòu)也是Vue3.0+vite2.0+Ele UI,剛好發(fā)現(xiàn)這篇寶藏文章。文章一共五篇，推薦大家一起學(xué)習(xí)，記得關(guān)注公眾號，把這個系列學(xué)習(xí)完整，完全掌握這套架構(gòu)。

”

說干就干，然后就開始讀各種文檔，從 0 開始，一步一步搭完這個項目到可以正常開發(fā)

今天是第一篇文章主要是項目初始化和ESLint導(dǎo)入，廢話不多說，開整。

初始化項目

按照自己需要的框架選擇就可以了，我這里用的Vue3+TS。初始化完成后的目錄結(jié)構(gòu)如下：

啟動項目

執(zhí)行 npm run dev，大概率會直接報錯，因為項目默認(rèn)啟動在3000端口，可能會被拒絕。

解決這個問題，我們需要在根目錄下的 vite.config.ts 文件中修改開發(fā)服務(wù)器的配置，手動指定端口號。

修改完成后重新啟動項目，就可以訪問了。

添加ESLint支持

安裝ESLint

• eslint只有開發(fā)階段需要，因此添加到開發(fā)階段的依賴中即可

npm install eslint --save-dev

• 在VS Code中安裝eslint插件，以在開發(fā)中自動進行eslint校驗

配置ESLint

創(chuàng)建 .eslintrc.js 文件

添加基礎(chǔ)配置

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,
  },
}

引入規(guī)則

為了規(guī)范團隊成員代碼格式，以及保持統(tǒng)一的代碼風(fēng)格，項目采用當(dāng)前業(yè)界最火的 Airbnb規(guī)范^[1] ，并引入代碼風(fēng)格管理工具 Prettier^[2] 。

eslint-plugin-vue

ESLint官方提供的Vue插件，可以檢查 .vue文件中的語法錯誤

npm install eslint-plugin-vue

// .eslintrc.js
...
extends: [
    'plugin:vue/vue3-recommended' // ++
]
...

eslint-config-airbnb-base

Airbnb基礎(chǔ)規(guī)則的eslint插件

// npm version > 5
npx install-peerdeps --dev eslint-config-airbnb-base

// .eslintrc.js
...
extends: [
    'plugin:vue/vue3-recommended',
    'airbnb-base', // ++
],
...

這個時候就應(yīng)該可以看到一些項目原有代碼的eslint報錯信息了，如果沒有的話，可以嘗試重啟編輯器的eslint服務(wù)。

eslint-plugin-prettier

本次項目不單獨引入prettier，而是使用eslint插件將prettier作為eslint規(guī)則執(zhí)行。

npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier

// .eslintrc.js
...
plugins: ['prettier'], // ++
rules: {
    'prettier/prettier': 'error', // ++
},
...

配置到此時，大概率會遇到 eslint 規(guī)則和 prettier 規(guī)則沖突的情況，比如下圖。eslint告訴我們要使用單引號，但是改為單引號以后，prettier有告訴我們要使用雙引號。

這時候就需要另一個eslint的插件 eslint-config-prettier，這個插件的作用是禁用所有與格式相關(guān)的eslint規(guī)則，也就是說把所有格式相關(guān)的校驗都交給 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中后引入的規(guī)則會覆蓋前面的規(guī)則。

我們還可以在根目錄新建 ``.prettierrc.js文件自定義prettier規(guī)則，保存規(guī)則后，重啟編輯器的eslint`服務(wù)以更新編輯器讀取的配置文件。

// .prettierrc.js
module.exports = {
  singleQuote: true, // 使用單引號
}

到此，我們的ESLint基本配置結(jié)束了，后續(xù)需要時可以對規(guī)則進行調(diào)整。

這篇文章到這里就結(jié)束了，但是只在開發(fā)階段約束代碼風(fēng)格是一件靠自覺性的是，因為我們還需要增強ESLint的約束度。下一篇文章，我們一起研究如果在提交代碼前進行ESLint二次校驗，保證提交到Git的代碼都是符合規(guī)定的~

原文地址

* https://juejin.cn/post/6982529246480564238

?? 看完三件事