上文已經搭建了 pnpm + monorepo 的基礎環境，本文對 workspace-root 進行初始化配置，包括：通用配置文件、公共依賴、ESLint。 1 通用配置文件 在項目 根目錄 下添加下麵的配置文件。 添加 .editorconfig 編輯器格式配置文件 [*.{js,cjs,ts, ...
上文已經搭建了 pnpm + monorepo 的基礎環境，本文對 workspace-root 進行初始化配置，包括：通用配置文件、公共依賴、ESLint。
1 通用配置文件
在項目 根目錄 下添加下麵的配置文件。
- 添加 .editorconfig 編輯器格式配置文件
[*.{js,cjs,ts,jsx,tsx,vue,html,css,scss,md}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
- 添加 .gitignore git 忽略文件
logs
*.log*
node_modules
dist
lib
dist-ssr
*.local
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
說明：
在有些文章中還會創建一個 .npmrc 文件，配置 shamefully-hoist 為 true，該操作的目的是進行依賴提升，但 pnpm 不建議這麼做，所以咱不配置它：
2 安裝公共依賴
在根目錄下按照的依賴，在子模塊裡面都可以使用，所以為了避免在不同的模塊中安裝相同的依賴，相同的依賴咱們都提取到根項目中。
pnpm install vue -w
pnpm install @types/node sass typescript vite vue-tsc @vitejs/plugin-vue @vitejs/plugin-vue-jsx -D -w
由於咱們項目配置了 monorepo，在根目錄（workspace-root）下安裝依賴需要指定 -w，否則安裝失敗。
3 ESLint 配置
咱們所有模塊都需要 ESLint 校驗，所以可以在根目錄下配置 ESLint。
ESLint 配置過程與之前寫的「創建 vite + vue3 工程」步驟基本一致，在 monorepo 中稍有差異，這裡再重覆一遍。
- 安裝依賴開發依賴：
pnpm install eslint -D -w
- 初始化 ESLint 配置
npx eslint --init
執行上述命令後，控制臺中會有如下步驟：
1）需要安裝 @eslint/create-config，問是否繼續： 當然需要繼續，直接回車；
2）使用 ESLint 來幹嘛：我選最後一個 To check syntax, find problems, and enforce code style（檢查語法、尋找問題、強制代碼風格）
3）使用哪種模塊化的方式：肯定選 JavaScript modules (import/export) （幾乎我參與的 vue 項目都是 ESModule）
4）項目使用什麼框架：Vue.js
5）項目是否使用 TypeScript：Yes
6）項目運行在什麼環境：Browser
7）如何定義項目的代碼風格：Use a popular style guide 使用流行的風格
8）在流行的風格中選擇其中一種：Standard
9）ESLint 配置文件的格式：JavaScript
10）根據上面選擇的，提示需要安裝一大堆依賴，是否安裝？Yes
11）選擇使用什麼包管理工具安裝：pnpm
選擇 pnpm 回車後，項目根目錄下會生成 .eslintrc.cjs 文件，但控制台會報 ERR_PNPM_ADDING_TO_ROOT 的錯誤，如下圖：
這是因為自動安裝依賴沒有攜帶 -w，所以需要將紅框中的依賴複製出來，重新安裝：
pnpm install eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 @typescript-eslint/parser@latest -D -w
- 安裝 vite-plugin-eslint 插件：
pnpm install vite-plugin-eslint -D -w
由於不同的 package，vite 的配置不同，所以該插件在後面開發各個模塊時才去配置。
- 修改 ESLint 配置文件 .eslintrc.cjs：
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:vue/vue3-essential',
'standard'
],
parserOptions: {
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser',
sourceType: 'module'
},
plugins: [
'vue',
'@typescript-eslint'
],
rules: {
'vue/multi-word-component-names': 'off'
}
}
- 添加 ESLint 忽略文件，忽略打包生成的目錄 dist 和 lib。在項目根目錄下創建 .eslintignore，內容如下：
lib/
dist/
- 在 IDE 中配置 ESLint。我使用 WebStorm，配置如下圖：
本文完成 workspace-root 的初始化配置，下一步將進行組件庫的開發環境搭建。
感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，點贊、關註、收藏，程式員優雅哥會持續與大家分享更多乾貨
