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" }工作区会提示报错
之前我的代码中没有配置rules,我以为是eslint会有默认的规则，以是不绝感觉没有收效，假如想要不自己设置规则，可以利用其他项目标一些代码校验规则
测试script中配置的下令，pnpm lint 默认只会检测.js文件，须要利用--ext下令指定扩展名eslint commond选项参考
初始化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中双引号没有主动变为单引号
添加代码提交检测
husky git中的钩子，常见的有pre-push pre-commit用来共同git利用，安装后可以在我们提交接码时添加一些hook，用来在团队提交接码时先辈行一些利用，比方查抄eslint
pnpm install husky -D
package.json中添加
"scripts": { "prepare": "husky install" },运行pnpm run perpare会主动在我们的项目中添加.husky目次
pnpm husky add .husky/pre-commit "npm lint"添加提交前钩子，提交接码前运行pnpm run lint，分析在commit的时间已经运行了eslint校验的下令了
pnpm install husky lint-staged -w -D
lint-staged是干啥用的？让工具只查抄&修复修改过的文件，可以让这些插件只扫描暂存区的文件而不是通盘扫描
上面这篇文章对eslint husky lint-staged prettier表明都比力清晰可以进行参考。
项目中利用配置文件是为了写代码的时间提示格式校验和代码格式化信息，在vscode中安装插件是为了可以让工具直接资助我们更换掉格式错误的代码，同一个团队可以利用共享vccode的配置文件，这样就可以包管团队内部规范的划一。
终于有一点明确为什么偶然候在配置文件中配了干系的格式校验信息，但是不收效的题目了，由于假如我们用vscode设置生存的时间主动格式化文件，假如项目中配置的代码格式和插件中的有辩说就会出现你生存期间码被修复了，但是生存完后又被复原的情况。 |
