The basic environment of pnpm + monorepo has been built above . This article initializes the configuration of workspace-root , including: common configuration files, public dependencies, and ESLint.
1 Common configuration file
Add the following configuration file in the project root directory .
- Add .editorconfig editor format configuration file
[*.{js,cjs,ts,jsx,tsx,vue,html,css,scss,md}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
- Add .gitignore git ignore files
logs
*.log*
node_modules
dist
lib
dist-ssr
*.local
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
Description :
In some articles, a .npmrc file will be created and shapefully-hoist is configured as true . The purpose of this operation is to improve dependencies, but pnpm does not recommend this, so we will not configure it:
2 Install public dependencies
The dependencies specified in the root directory can be used in sub-modules, so in order to avoid installing the same dependencies in different modules, we extract the same dependencies into the root project.
pnpm install vue -w
pnpm install @types/node sass typescript vite vue-tsc @vitejs/plugin-vue @vitejs/plugin-vue-jsx -D -w
Since our project is configured with monorepo , you need to specify -w when installing dependencies in the root directory ( workspace-root ) , otherwise the installation will fail.
3 ESLint configuration
All our modules require ESLint verification, so ESLint can be configured in the root directory .
The ESLint configuration process is basically the same as the previously written "Create vite + vue3 project" steps. There are slight differences in the monorepo . I will repeat it here.
- Install development dependencies:
pnpm install eslint -D -w
- Initialize ESLint configuration
npx eslint --init
After executing the above command, the following steps will appear in the console:
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
After selecting pnpm and pressing Enter, the .eslintrc.cjs file will be generated in the project root directory , but the console will report an ERR_PNPM_ADDING_TO_ROOT error, as shown below:
This is because the automatically installed dependencies do not carry -w , so you need to copy the dependencies in the red box and reinstall them:
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
- Install vite-plugin-eslint plug-in:
pnpm install vite-plugin-eslint -D -w
Since different packages and vite configurations are different, the plug-in is configured only when each module is developed later.
- Modify the ESLint configuration file .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'
}
}
- Add ESLint ignore files and ignore the directories dist and lib generated by packaging . Create .eslintignore in the project root directory with the following content:
lib/
dist/
- Configure ESLint in the IDE. I use WebStorm and the configuration is as follows:
This article completes the initial configuration of workspace-root. The next step will be to build the development environment for the component library.
Thank you for reading this article. If this article has given you a little help or inspiration, please support it three times in a row, like, follow, and collect. Programmer Elegant Brother will continue to share more useful information with you.