In the last article, we set up the infrastructure for the Vite plug-in, so let’s talk about continuing to improve the development environment.

Improve the development environment

Generate the d.ts file

Let’s change the lib/index.ts file first

export interface userOptions { name: string; age: number; base? : string; } export function handleOptions(options? : userOptions) : string {return ` ${options. The name | | "Ming"} ${options. The age} this year, the home page ${options?. Base | | "/"} `; }

In yarn build, as expected, the package works and a new file, a.js, is imported into dist/index.js, which works just fine, but there is a problem with the options that can be passed in. The @vitejs/plugin-vue sign is a hint.

The reason can be as simple as that tsup does not generate.d.ts class files when it is packaged. TSUP comes with the ability to generate class files. One of the parameters is DTS

So come and reshape the command

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

Run the file that will post an extra index.d.ts file, test it, and create any new JS file

Found also has a hint, perfect 🤩 nadeh

Create a Git repository

There are also a few things configured here, the latter things also need Git repository support, so first set up a Git repository to lift the code.

It seems that.gitignore has not been configured yet. Move.gitignore from example to the root directory

node_modules
.DS_Store
dist
dist-ssr
*.local

Configuration development specification

Although I don’t have anything yet, I can’t reduce my pretend bility. If more people use it, I will give you a PR or something. Without a strict standard, it will be very uncomfortable. Moreover, it is unrealistic to only rely on documents to standardize, so the code must be verified before submission. If unqualified, submission will not be allowed directly.

Commit specification

Start with a simple commit specification, and see how this article regulates your Git Commit.

CommitLint is now used as a commitLint plugin, so it’s easy to install without any fuss

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

Note that this is installed in the outer monorepo repository, because we need to verify the COMMIT MSG whenever we change any file

Add a command in the SCIPTS

{
    "prepare": "husky install"
}
NPX husky add. Husky /commit-msg 'NPX --no-install commitlint --edit $1'

Git Commit -m ‘XXX’ will throw an exception if you don’t follow the specification

Let’s enumerate what plug-ins do

  • COMMITLint checks whether the COMMIT MSG is compliant
  • Husky git hooks, which are used to complete the following code, automatically format the code before committing, and check whether the code is normal or not

Completed a small goal again, perfect 😆 at home

Code specification

The code specification has two parts, one for ESLint to check for code exceptions, and the other for prettier code format checks.

Now there are 2 packages for the project. I originally wrote ESLint and PRETTIER respectively
example.
vue-docsInside, think of a VUE file, a pure TS, so that different projects can use different solutions. Finished-after discovery I be a han han, write in outermost layer, when doing code check directly did together, and it is to be able to support: be aimed at different file type to carry out different check scheme.

Let’s first configure ESLint

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

Configuration. Eslintrc

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

Because the core code is TS, you need to use plug-ins for S. These two are easy to copy down on the @typescript-eslint/eslint-plugin website. @typescript-eslint/eslint-plugin

To verify this, write some error code in vue-docs/lib/index.ts

The editor is wrong. Don’t get excited. It’s not over yet. There is a hole here. If your editor is not using the.eslintrc configuration in your project, this test will not work, so you need to perform the next step

npx eslint packages/vue-docs/lib

Let’s see if I get an error

If this talent is seen as a sign of success, another feature point is completed 🤙 nix

Configuration is prettier

This one is easy to copy from the website eslint-plugin-prettier

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

Modify.eslintrc and add the following

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

To install a recommended configuration

yarn add eslint-config-prettier -D -W

The complete.eslintrc configuration

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

Finally, let’s take a test, and this test is very simple just take your notepad and reformat it, and run it

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

Is the format back to a familiar look?

Finally, add the two commands to the script

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

Here, the basic code specification has. So how do you combine code specifications with Git? See you next time.

And then the last wave of generalizations

  • Warehouse link: vite-plugin-vue-docs
  • Online experience: parse.vue files and generate documents automatically