上文曾经搭建了 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 的初始化配置,下一步将进行组件库的开发环境搭建。