fix: eslint formatter path error (#6134)

Co-authored-by: Binwei Fang <[email protected]>

Author: githoniel

packages/@vue/cli-plugin-eslint/__tests__/eslintPlugin.spec.js

@@ -1,4 +1,4 @@
-jest.setTimeout(35000)
+jest.setTimeout(300000)
 
 const path = require('path')
 const { linkBin } = require('@vue/cli/lib/util/linkBin')
@@ -225,3 +225,46 @@ test('should persist cache', async () => {
 
   expect(has('node_modules/.cache/eslint/cache.json')).toBe(true)
 })
+
+test(`should use formatter 'codeframe'`, async () => {
+  const project = await create('eslint-formatter-codeframe', {
+    plugins: {
+      '@vue/cli-plugin-babel': {},
+      '@vue/cli-plugin-eslint': {
+        config: 'airbnb',
+        lintOn: 'save'
+      }
+    }
+  })
+  const { read, write, run } = project
+  const main = await read('src/main.js')
+  expect(main).toMatch(';')
+
+  let done
+  const donePromise = new Promise(resolve => {
+    done = resolve
+  })
+  // remove semicolons
+  const updatedMain = main.replace(/;/g, '')
+  await write('src/main.js', updatedMain)
+
+  const server = run('vue-cli-service serve')
+
+  let isFirstMsg = true
+  server.stdout.on('data', data => {
+    data = data.toString()
+    if (isFirstMsg) {
+      expect(data).toMatch(/Failed to compile with \d error/)
+      isFirstMsg = false
+    } else if (data.match(/semi/)) {
+      // check the format of output
+      // https://eslint.org/docs/user-guide/formatters/#codeframe
+      expect(data).toMatch(`error: Missing semicolon (semi) at src${path.sep}main.js`)
+
+      server.stdin.write('close')
+      done()
+    }
+  })
+
+  await donePromise
+})

packages/@vue/cli-plugin-eslint/index.js

@@ -52,7 +52,7 @@ module.exports = (api, options) => {
           resolveModule('eslint/package.json', cwd) ||
             resolveModule('eslint/package.json', __dirname)
         ),
-        formatter: loadModule('eslint/lib/formatters/codeframe', cwd, true)
+        formatter: 'codeframe'
       }
       webpackConfig.plugin('eslint').use(eslintWebpackPlugin, [eslintWebpackPluginOptions])
     })