feat: switch to stylish formatter for eslint (#6748)

Author: cexbrayat

docs/core-plugins/eslint.md

@@ -11,7 +11,7 @@
 
   Options:
 
-    --format [formatter] specify formatter (default: codeframe)
+    --format [formatter] specify formatter (default: stylish)
     --no-fix             do not fix errors
     --max-errors         specify number of errors to make build failed (default: 0)
     --max-warnings       specify number of warnings to make build failed (default: Infinity)

docs/ru/core-plugins/eslint.md

@@ -11,7 +11,7 @@
 
   Опции:
 
-    --format [formatter] определяет форматтер (по умолчанию: codeframe)
+    --format [formatter] определяет форматтер (по умолчанию: stylish)
     --no-fix             отключает автоматическое исправление ошибок
     --max-errors         количество ошибок, по достижению которого сборка заканчивается ошибкой (по умолчанию: 0)
     --max-warnings       количество предупреждений, по достижению которого сборка заканчивается ошибкой (по умолчанию: Infinity)

packages/@vue/cli-plugin-eslint/README.md

@@ -11,7 +11,7 @@
 
   Options:
 
-    --format [formatter] specify formatter (default: codeframe)
+    --format [formatter] specify formatter (default: stylish)
     --no-fix             do not fix errors
     --max-errors         specify number of errors to make build failed (default: 0)
     --max-warnings       specify number of warnings to make build failed (default: Infinity)

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

@@ -227,8 +227,8 @@ test('should persist cache', async () => {
   expect(has('node_modules/.cache/eslint/cache.json')).toBe(true)
 })
 
-test.skip(`should use formatter 'codeframe'`, async () => {
-  const project = await create('eslint-formatter-codeframe', {
+test(`should use formatter 'stylish'`, async () => {
+  const project = await create('eslint-formatter-stylish', {
     plugins: {
       '@vue/cli-plugin-babel': {},
       '@vue/cli-plugin-eslint': {
@@ -259,9 +259,13 @@ test.skip(`should use formatter 'codeframe'`, async () => {
       isFirstMsg = false
     } else if (data.match(/semi/)) {
       // check the format of output
-      // https://eslint.org/docs/user-guide/formatters/#codeframe
+      // https://eslint.org/docs/user-guide/formatters/#stylish
+      // it looks like:
+      // ERROR in .../packages/test/eslint-formatter-stylish/src/main.js
+      // 1:22  error  Missing semicolon  semi
+      expect(data).toMatch(`src${path.sep}main.js`)
       expect(data).toMatch(`error`)
-      expect(data).toMatch(`Missing semicolon (semi) at src${path.sep}main.js`)
+      expect(data).toMatch(`Missing semicolon  semi`)
 
       server.stdin.write('close')
       done()
@@ -282,7 +286,7 @@ test(`should work with eslint v8`, async () => {
     }
   })
   const { read, write, run } = project
-  await run('npm add -D eslint@^8.0.0-0 eslint-formatter-codeframe')
+  await run('npm add -D eslint@^8.0.0-0')
   // should've applied airbnb autofix
   const main = await read('src/main.js')
   expect(main).toMatch(';')

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: 'codeframe'
+        formatter: 'stylish'
       }
       webpackConfig.plugin('eslint').use(eslintWebpackPlugin, [eslintWebpackPluginOptions])
     })
@@ -64,7 +64,7 @@ module.exports = (api, options) => {
       description: 'lint and fix source files',
       usage: 'vue-cli-service lint [options] [...files]',
       options: {
-        '--format [formatter]': 'specify formatter (default: codeframe)',
+        '--format [formatter]': 'specify formatter (default: stylish)',
         '--no-fix': 'do not fix errors or warnings',
         '--no-fix-warnings': 'fix errors, but do not fix warnings',
         '--max-errors [limit]':

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

@@ -124,7 +124,7 @@ module.exports = async function lint (args = {}, api) {
   const reportWarningCount = resultResults.reduce((p, c) => p + c.warningCount, 0)
   process.cwd = processCwd
 
-  const formatter = await eslint.loadFormatter(args.format || 'codeframe')
+  const formatter = await eslint.loadFormatter(args.format || 'stylish')
 
   if (config.outputFile) {
     const outputFilePath = path.resolve(config.outputFile)

packages/@vue/cli-service/types/cli-service-test.ts

@@ -13,7 +13,7 @@ const servicePlugin: ServicePlugin = (api, options) => {
       description: 'lint and fix source files',
       usage: 'vue-cli-service lint [options] [...files]',
       options: {
-        '--format [formatter]': 'specify formatter (default: codeframe)'
+        '--format [formatter]': 'specify formatter (default: stylish)'
       },
       details: 'For more options, see https://eslint.org/docs/user-guide/command-line-interface#options'
     },