【记录】如何造一个vite插件(2)

上一篇已经把vite插件的基础结构搭建起来了,这一次就来聊聊继续完善开发环境。

完善开发环境

前面通过tsup可以将ts文件打包成js,但是有个问题使用的时候没有参数的提示。

生成d.ts文件

先来修改一下lib/index.ts这个文件

export interface userOptions {
  name: string;
  age: number;
  base?: string;
}

export function handleOptions(options?: userOptions): string {
  return `${options.name || "小明"}今年${options.age},主页${
    options?.base || "/"
  }`;
}

在执行 yarn build,不出所料是打包成功了,然后新建一个文件a.js导入dist/index.js这个文件,也能够正常使用,但是又发现一个问题,貌似没有只能提示,完全不知道options可以传入哪些参数,这就有点不满意了,对标一下@vitejs/plugin-vue是有提示的。

image-20210721153650625

原因尼也能简单,就是tsup打包的时候没有生成.d.ts的类文件。翻了下文档tsup自带了生成类文件的功能。有个参数是--dts

所以来改造一下命令

{
    "build": "tsup ./lib/index.ts --dts"
}

运行一下发下会多一个index.d.ts的文件,测试一下,随便新建一个js文件

image-20210721154241271

发现也有提示了,完美

创建一个git仓库

到这里也配置了有点东西了,后面的东西还需要git仓库的支持,所以先搞一个git仓库把代码提上去。

好像还没有配置.gitignore,把example当中的.gitignore移动到根目录来

node_modules
.DS_Store
dist
dist-ssr
*.local

配置开发规范

虽然啥都还没有,但是逼格不能少,万一用的人多了,给你提个pr什么的,没有一个严格的规范就很难受。并且只靠文档去规范是不现实的,所以必须在提交前代码去验证,不合格直接不让提交。

commit规范

先从简单的commit规范开始吧,细致了解可以瞅瞅这篇文章如何规范你的Git commit?

这里就要用到commitlint这个插件了,不啰嗦直接安装没啥难度

yarn add @commitlint/config-conventional @commitlint/cli husky -D -W
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

注意这个是安装在外层的monorepo这个库里面,因为无论改任何文件,只要提交我们都要校验commit msg

在scipts中在添加一条命令

{
    "prepare": "husky install"
}
yarn prepare
# 把commitlint添加到git钩子中
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'

最后提交一下 git commit -m 'xxx' 只要不按照规范,就会抛出异常

列举一下插件的作用

  • commitlint 检测commit msg是否规范
  • husky git hooks,有了才能完善后面的,提交之前自动格式化代码,检测代码是否规范

又完成了一个小目标,完美

代码规范

代码规范有两部分,一个是eslint检查代码异常,另外一个是prettier代码格式的检查。

在配置之前先来避个坑,现在项目的packages有2个,最开始我是把eslint和prettier分别写在examplevue-docs里面的,想的是一个vue的文件多,一个纯ts,这样就可以不同的项目用不同的方案。完了之后发现我就是个憨憨,写在最外层,做代码检查的时候直接就一起做了,并且是可以支持:针对不同的文件类型执行不同的检查方案。

先来配置eslint

yarn add -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint -W

配置.eslintrc

{
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {},
    "extends": [
        "plugin:@typescript-eslint/recommended"
    ]
}

因为核心代码是ts所以要用到s的插件这两部很简单在@typescript-eslint/eslint-plugin的官网上抄下来就行了。@typescript-eslint/eslint-plugin

来验证一下,在vue-docs/lib/index.ts,写点错误代码

image-20210721170336863

编辑器报错了,不要激动,还没完。这里有个坑,如果你的编辑器不是用的项目中的.eslintrc配置,这个测试是没用的,所以还需要执行下一步

npx eslint packages/vue-docs/lib

看下是否报错

image-20210721170602321

如果看到的是这样的才能代表成功,又一个功能点完成了

配置prettier

这个也很简单从官网抄就行了eslint-plugin-prettier

yarn add eslint-plugin-prettier prettier -D -W

修改.eslintrc,新增如下

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

在来安装一个推荐配置

yarn add eslint-config-prettier -D -W

完整的.eslintrc配置

{
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "@typescript-eslint",
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error"
    },
    "extends": [
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
    ]
}

最后来测一测,这个测试就很简单了随便用记事本改一下格式,然后执行

npx prettier --write packages/vue-docs/lib

格式是不是有回到熟悉的样子了。

最后把2条命令加入到scripts中

{
    "lint": "eslint packages/vue-docs/lib",
  "fix": "prettier --write packages/vue-docs/lib "
}

到这里尼,基本的代码规范就有了。那么如何把代码规范和git结合到一起尼,下次再见。

最后再来推广一波

  • 仓库链接: vite-plugin-vue-docs
  • 在线体验: 解析.vue 文件,自动生成文档

你可能感兴趣的:(【记录】如何造一个vite插件(2))