vue2项目如何在运行时通过prettier格式化代码

今天遇到一个问题，老vue2项目由于之前没有使用eslint和prettier进行代码检查和格式化，随着开发人员增加，每个开发人员使用的编辑器不同、格式化插件不同，提交代码时候老会冲突，调研了几个方案，具体如下：

1. 团队统一使用vscode，添加vscode中的prettier插件，添加.vscode文件夹，统一设置配置文件。
2. 项目安装perttier，提交代码前通过命令进行代码格式化。
3. 项目安装perttier，同时使用vscode中的prettier插件，运行时也可以进行格式化。
4. 项目安装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