125.搭建element-plus开发环境

125.搭建element-plus开发环境.jpeg

element-plus

搭建element-plus开发环境

创建element-plus-hp目录

初始化项目

pnpm init

定义工作空间根目录，根目录创建pnpm-workspace.yaml文件指定工作目录为根目录下的components目录（如果定义了工作空间需要在安装包时加上-w的参数，表明是在当前的工作目录下）

packages:
  - "components/**"

初始化typescript环境

• 安装typescript pnpm install typescript -D -w
• 初始化ts配置文件tsc --init

 {
  "compilerOptions": {
    "rootDir": ".",
    "target": "es2016" ,
    "module": "ESNext",
    "esModuleInterop": true,
    "strict": true,
  }
}

初始化eslint

• 安装eslintpnpm install eslint -D -w
• 初始化.eslintrc.json文件或者使用npx eslint --init使用eslint的配置脚手架来初始化更快，会自动帮我们添加好插件和parser这两个包 @typescript-eslint/eslint-plugin @typescript-eslint/parser，以下是用npx eslint --init生成的配置文件

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "no-console": "error"
  }
}

• @typescript-eslint/parser 将ts转成estree兼容的形式。

• 配置script命令

  "scripts": {
    "lint": "eslint . --ext .ts,.js"
  },

eslint只能默认只校验js，如果需检测ts需要引入插件eslint-plugin,和一个解释器eslint-parser

为了方便，我们也可以省事，直接安装@element-plus/eslint-config然后在vscode中使用继承该配置，就可以按照element-plus的代码规范来开发了。

验证eslint配置：rules：{"no-console": "error" }工作区会提示报错

1670052197925.png

之前我的代码中没有配置rules,我以为是eslint会有默认的规则，所以一直感觉没有生效，如果想要不自己设置规则，可以使用其他项目的一些代码校验规则

测试script中配置的命令，pnpm lint 默认只会检测.js文件，需要使用--ext命令指定扩展名eslint commond选项参考

1670052690148.png 1670052873919.png

初始化prettier

• 新建.prettierrc.json 配置文件
• 安装prettierpnpm install prettier -D -w
• 安装eslint-config-prettier eslint和prettier集成pnpm install eslint-config-prettier -D -w

测试配置prettierrc规则

{
  "singleQuote": true
}

发现如果不配置

代码格式校验prettierrc代码保存时console.log中双引号没有自动变为单引号

1670053359653.png

添加代码提交检测

husky git中的钩子，常见的有pre-push pre-commit用来配合git使用，安装后可以在我们提交代码时添加一些hook，用来在团队提交代码时先进行一些操作，例如检查eslint

pnpm install husky -D

package.json中添加

  "scripts": {
    "prepare": "husky install"
  },

运行pnpm run perpare会自动在我们的项目中添加.husky目录

1670054839951.png
pnpm husky add .husky/pre-commit "npm lint"添加提交前钩子，提交代码前运行pnpm run lint，说明在commit的时候已经运行了eslint校验的命令了
1670055174892.png
pnpm install husky lint-staged -w -D

lint-staged是干啥用的？让工具只检查&修复修改过的文件，可以让这些插件只扫描暂存区的文件而不是全盘扫描

上面这篇文章对eslint husky lint-staged prettier解释都比较清楚可以进行参考。

项目中使用配置文件是为了写代码的时候提示格式校验和代码格式化信息，在vscode中安装插件是为了可以让工具直接帮助我们替换掉格式错误的代码，同一个团队可以使用共享vccode的配置文件，这样就可以保证团队内部规范的一致。

终于有一点理解为什么有时候在配置文件中配了相关的格式校验信息，但是不生效的问题了，因为如果我们用vscode设置保存的时候自动格式化文件，如果项目中配置的代码格式和插件中的有冲突就会出现你保存时代码被修复了，但是保存完后又被复原的情况。