vue2项目如何在运行时通过prettier格式化代码
今天遇到一个问题，老vue2项目由于之前没有使用
eslint和prettier进行代码检查和格式化，随着开发人员增加，每个开发人员使用的编辑器不同、格式化插件不同，提交代码时候老会冲突，调研了几个方案，具体如下：
- 团队统一使用
vscode，添加vscode中的prettier插件，添加.vscode文件夹，统一设置配置文件。 - 项目安装
perttier，提交代码前通过命令进行代码格式化。 - 项目安装
perttier，同时使用vscode中的prettier插件，运行时也可以进行格式化。 - 项目安装
perttier和eslint，配合vscode中的两个插件进行处理。
方案1和方案3比较依赖编辑器，如果开发人员不用vscode进行开发，那么就无法进行格式化；方案2每次提交之前都需要运行命令，不够方便；方案4也比较依赖编辑器，而且如果使用eslint，之前的代码肯需要进行一些处理，或者把大部分eslint规则关闭，不够灵活，且折腾下来比较耗时。
那么有没有一种方案，配置简单，且不依赖编辑器上的插件，在运行时只要保存代码即可进行格式化呢？
vue-prettier-plugin
在项目初始化生命周期中启动插件，使用chokidar对整个目录的文件进行监听，发现文件有变化就使用prettier进行格式后进行覆盖保存。
安装插件
npm install vue-prettier-plugin --save-dev
在vue.config.js或webpack.js中引入插件，并初始化：
const VuePrettierPlugin = require('vue-prettier-plugin')
module.exports = {
// ...其他配置
configureWebpack: {
plugins: [
new VuePrettierPlugin(
{
// Prettier 格式化选项
printWidth: 100,
tabWidth: 4,
// ...其他选项
},
'src/',//格式化文件路径，默认 src/
),
],
},
};
运行项目，如果代码有更改，插件就会根据配置项自动格式化文件。
结尾
通过这个插件，我们即可不依赖编辑器、在运行时修改文件即可进行格式化代码。
插件npm地址： vue-prettier-plugin 插件github地址： vue-prettier-plugin
