vue-cli-plugin-format

基于 @vue/cli，整合 eslint 和 prettier 的 vue-cli 脚手架插件。

具有如下特点：

1. eslint 采用 prettier 规则；

2. prettier 全局格式化代码；

3. 开启 lintOnSave 和 lintOnCommit；

4. .editorconfig 统一编辑器配置；

5. 添加包含内网仓库的 .npmrc 和 .yarnrc 文件。

1.安装

利用 @vue/cli 的指令，注册该插件：

vue add @cbibank/format

上述命令运行成功之后，如果项目中已存在 @vue/cli-plugin-eslint，则会自动执行一次 vue-cli-service format:lint 指令。

1-1.scripts

如果选择的项目打包器类型是 vue-cli-service，则在 package.json 中的 scripts 中会增加如下脚本：

{
	"scripts": {
		"format": "npm run format:lint && npm run format:pretty",
    "format:lint": "vue-cli-service format:lint",
    "format:pretty": "prettier . --write"
	}
}

其中：

1. format:lint 脚本与 vue-cli-service lint 行为一致。默认只会检测 src/、tests 以及根目录下 *.js 、.*.js 文件。

2. format:pretty 会格式化当前项目下的所有可识别文件（不包含 .prettierignore 内声明范围）。

1-2.lint-staged

项目中的 package.json 会额外添加如下字段：

{
	"devDependencies": {
		"lint-staged": "^11.1.2"
	},
	"gitHooks": {
		"pre-commit": "lint-staged"
	},
	"lint-staged": {
		"*.{js,jsx,vue}": "eslint --fix"
	}
}

在使用 git commit 提交暂存区代码时，会对这部分代码进行 lint 格式化。

2.本地调试

如果要在本地开发调试此项目，请参考以下内容和Vue CLI插件开发指南。

2-1.安装依赖

以 yarn 为例，首先在项目根目录下，执行：

npm install ./packages/vue-cli-plugin/format --save-dev

执行完毕之后，node_modules 中会出现 @cbibank/vue-cli-plugin-format 插件。

注意，这里相比 yarn add，更推荐使用 npm install 时，npm install 会生成软连接。

也就是意味着，后续更改项目中的代码，会自动同步到 node_modules 中。

如果使用 yarn add 结合 yarn link，最终的效果也比不上 npm install <folder>。

实际上 npm link 创建的软连接，与 npm install <folder> 创建的软连接，在效果上是有区别的。

2-2.调用依赖

安装完毕依赖后，需要借助 vue-cli ，执行：

vue invoke @cbibank/format

后续依赖的更新，不断调用此命令进行调试即可。

FAQ

1.依赖冲突

当 npm >= 8 时，执行 npm install 有可能出现如下错误：

dev eslint-plugin-vue@"^8.0.3" from the root project

Could not resolve dependency:

npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/[email protected]

这是因为 devDependencies 与 peerDependencies 冲突导致。

可以看做是 @vue/cli-plugin-eslint 的 bug。（另一层原因是，npm 在 v8 及以上版本，增加了 dependencies 与 peerDependencies 的严格判断）

解决方案是添加 --force 或者 --legacy-peer-dep：

npm install --force

# or

npm install --legacy-peer-dep

可以参考这个issue

2.Progress Plugin Invalid Options

如果在使用 npm run start 或者 yarn start 启动项目的过程中，有如下错误：

ValidationError: Progress Plugin Invalid Options

Progress Plugin Invalid Options归根结底，是 webpack 版本不一致导致的（依然是 npm 的锅）。

譬如，vue-cli 依赖的是 webpack@5，但实际安装的是 webpack@4。

解决办法是，删除 node_modules，使用 yarn 重新解析依赖即可。