上文曾经搭建了 pnpm + monorepo 的根底环境，本文对 workspace-root 进行初始化配置，包含：通用配置文件、公共依赖、ESLint。

1 通用配置文件

在我的项目 根目录 下增加上面的配置文件。

  1. 增加 .editorconfig 编辑器格局配置文件
[*.{js,cjs,ts,jsx,tsx,vue,html,css,scss,md}]indent_style = spaceindent_size = 2trim_trailing_whitespace = trueinsert_final_newline = true
  1. 增加 .gitignore git 疏忽文件
logs*.log*node_modulesdistlibdist-ssr*.local.vscode/*!.vscode/extensions.json.idea.DS_Store*.suo*.ntvs**.njsproj*.sln*.sw?

阐明：

在有些文章中还会创立一个 .npmrc 文件，配置 shamefully-hoist 为 true，该操作的目标是进行依赖晋升，但 pnpm 不倡议这么做，所以咱不配置它：

2 装置公共依赖

在根目录下依照的依赖，在子模块外面都能够应用，所以为了防止在不同的模块中装置雷同的依赖，雷同的依赖咱们都提取到根我的项目中。

pnpm install vue -wpnpm 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 中稍有差别，这里再反复一遍。

  1. 装置依赖开发依赖：
pnpm install eslint -D -w
  1. 初始化 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.js5）我的项目是否应用 TypeScript：Yes6）我的项目运行在什么环境：Browser7）如何定义我的项目的代码格调：Use a popular style guide 应用风行的格调8）在风行的格调中抉择其中一种：Standard9）ESLint 配置文件的格局：JavaScript10）依据下面抉择的，提醒须要装置一大堆依赖，是否装置？Yes11）抉择应用什么包管理工具装置：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
  1. 装置 vite-plugin-eslint 插件：
pnpm install vite-plugin-eslint -D -w

因为不同的 package，vite 的配置不同，所以该插件在前面开发各个模块时才去配置。

  1. 批改 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'  }}
  1. 增加 ESLint 疏忽文件，疏忽打包生成的目录 dist 和 lib。在我的项目根目录下创立 .eslintignore，内容如下：
lib/dist/
  1. 在 IDE 中配置 ESLint。我应用 WebStorm，配置如下图：

本文实现 workspace-root 的初始化配置，下一步将进行组件库的开发环境搭建。