“

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

”

說(shuō)干就干，然后就開(kāi)始讀各種文檔，從 0 開(kāi)始，一步一步搭完這個(gè)項(xiàng)目到可以正常開(kāi)發(fā)

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

初始化項(xiàng)目

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

啟動(dòng)項(xiàng)目

執(zhí)行 npm run dev，大概率會(huì)直接報(bào)錯(cuò)，因?yàn)轫?xiàng)目默認(rèn)啟動(dòng)在3000端口，可能會(huì)被拒絕。

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

修改完成后重新啟動(dòng)項(xiàng)目，就可以訪問(wèn)了。

添加ESLint支持

安裝ESLint

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

npm install eslint --save-dev

• 在VS Code中安裝eslint插件，以在開(kāi)發(fā)中自動(dòng)進(jìn)行eslint校驗(yàn)

配置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ī)范團(tuán)隊(duì)成員代碼格式，以及保持統(tǒng)一的代碼風(fēng)格，項(xiàng)目采用當(dāng)前業(yè)界最火的 Airbnb規(guī)范^[1] ，并引入代碼風(fēng)格管理工具 Prettier^[2] 。

eslint-plugin-vue

ESLint官方提供的Vue插件，可以檢查 .vue文件中的語(yǔ)法錯(cuò)誤

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', // ++
],
...

這個(gè)時(shí)候就應(yīng)該可以看到一些項(xiàng)目原有代碼的eslint報(bào)錯(cuò)信息了，如果沒(méi)有的話，可以嘗試重啟編輯器的eslint服務(wù)。

eslint-plugin-prettier

本次項(xiàng)目不單獨(dú)引入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', // ++
},
...

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

這時(shí)候就需要另一個(gè)eslint的插件 eslint-config-prettier，這個(gè)插件的作用是禁用所有與格式相關(guān)的eslint規(guī)則，也就是說(shuō)把所有格式相關(guān)的校驗(yà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 的配置需要注意的是，一定要放在最后。因?yàn)?code style="font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(255, 93, 108);">extends中后引入的規(guī)則會(huì)覆蓋前面的規(guī)則。

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

// .prettierrc.js
module.exports = {
  singleQuote: true, // 使用單引號(hào)
}

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

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

原文地址

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

?? 看完三件事