vue2項目如何在運行時通過prettier格式化代碼

今天遇到一個問題，老vue2項目由于之前沒有使用eslint和prettier進行代碼檢查和格式化，隨著開發(fā)人員增加，每個開發(fā)人員使用的編輯器不同、格式化插件不同，提交代碼時候老會沖突，調(diào)研了幾個方案，具體如下：

1. 團隊統(tǒng)一使用vscode，添加vscode中的prettier插件，添加.vscode文件夾，統(tǒng)一設(shè)置配置文件。
2. 項目安裝perttier，提交代碼前通過命令進行代碼格式化。
3. 項目安裝perttier，同時使用vscode中的prettier插件，運行時也可以進行格式化。
4. 項目安裝perttier和eslint，配合vscode中的兩個插件進行處理。

方案1和方案3比較依賴編輯器，如果開發(fā)人員不用vscode進行開發(fā)，那么就無法進行格式化；方案2每次提交之前都需要運行命令，不夠方便；方案4也比較依賴編輯器，而且如果使用eslint，之前的代碼肯需要進行一些處理，或者把大部分eslint規(guī)則關(guān)閉，不夠靈活，且折騰下來比較耗時。

那么有沒有一種方案，配置簡單，且不依賴編輯器上的插件，在運行時只要保存代碼即可進行格式化呢？

vue-prettier-plugin

在項目初始化生命周期中啟動插件，使用chokidar對整個目錄的文件進行監(jiān)聽，發(fā)現(xiàn)文件有變化就使用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/
      ),
    ],
  },
};

運行項目，如果代碼有更改，插件就會根據(jù)配置項自動格式化文件。

結(jié)尾

通過這個插件，我們即可不依賴編輯器、在運行時修改文件即可進行格式化代碼。

插件npm地址： vue-prettier-plugin 插件github地址： vue-prettier-plugin