diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 9d43182d05e..d89dc95f667 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -332,7 +332,7 @@ Creates a Webpack compiler instance for WebpackDevServer with built-in helpful m The `args` object accepts a number of properties: - **appName** `string`: The name that will be printed to the terminal. -- **config** `Object`: The webpack configuration options to be provided to the webpack constructor. +- **config** `Object`: The webpack configuration options to be provided to the webpack constructor. - **devSocket** `Object`: Required if `useTypeScript` is `true`. This object should include `errors` and `warnings` which are functions accepting an array of errors or warnings emitted by the type checking. This is useful when running `fork-ts-checker-webpack-plugin` with `async: true` to report errors that are emitted after the webpack build is complete. - **urls** `Object`: To provide the `urls` argument, use `prepareUrls()` described below. - **useYarn** `boolean`: If `true`, yarn instructions will be emitted in the terminal instead of npm. diff --git a/packages/react-dev-utils/formatWebpackMessages.js b/packages/react-dev-utils/formatWebpackMessages.js index 4b0f44acb74..799c92be2c4 100644 --- a/packages/react-dev-utils/formatWebpackMessages.js +++ b/packages/react-dev-utils/formatWebpackMessages.js @@ -16,7 +16,7 @@ function isLikelyASyntaxError(message) { // Cleans up webpack error messages. // eslint-disable-next-line no-unused-vars -function formatMessage(message, isError) { +function formatMessage(message) { let lines = message.split('\n'); // Strip Webpack-added headers off errors/warnings diff --git a/packages/react-dev-utils/typescriptFormatter.js b/packages/react-dev-utils/typescriptFormatter.js index 3a33b37a427..dc2f85d2e3e 100644 --- a/packages/react-dev-utils/typescriptFormatter.js +++ b/packages/react-dev-utils/typescriptFormatter.js @@ -12,48 +12,45 @@ const codeFrame = require('@babel/code-frame').codeFrameColumns; const chalk = require('chalk'); const fs = require('fs'); +const types = { diagnostic: 'TypeScript', lint: 'TSLint' }; + function formatter(message, useColors) { - const hasGetters = typeof message.getFile === 'function'; + const { type, severity, file, line, content, code, character } = + typeof message.getFile === 'function' + ? { + type: message.getType(), + severity: message.getSeverity(), + file: message.getFile(), + line: message.getLine(), + content: message.getContent(), + code: message.getCode(), + character: message.getCharacter(), + } + : message; + const colors = new chalk.constructor({ enabled: useColors }); const messageColor = message.isWarningSeverity() ? colors.yellow : colors.red; - - let source; - - if (hasGetters) { - source = - message.getFile() && - fs.existsSync(message.getFile()) && - fs.readFileSync(message.getFile(), 'utf-8'); - } else { - source = - message.file && - fs.existsSync(message.file) && - fs.readFileSync(message.file, 'utf-8'); - } - - let frame = ''; - - if (source) { - frame = codeFrame( - source, - { start: { line: message.line, column: message.character } }, - { highlightCode: useColors } - ) - .split('\n') - .map(str => ' ' + str) - .join(os.EOL); - } - - const severity = hasGetters ? message.getSeverity() : message.severity; - const types = { diagnostic: 'TypeScript', lint: 'TSLint' }; + const fileAndNumberColor = colors.bold.cyan; + + const source = file && fs.existsSync(file) && fs.readFileSync(file, 'utf-8'); + const frame = source + ? codeFrame( + source, + { start: { line: line, column: character } }, + { highlightCode: useColors } + ) + .split('\n') + .map(str => ' ' + str) + .join(os.EOL) + : ''; return [ - messageColor.bold(`${types[message.type]} ${severity.toLowerCase()}: `) + - (hasGetters ? message.getContent() : message.content) + + messageColor.bold(`${types[type]} ${severity.toLowerCase()} in `) + + fileAndNumberColor(`${file}(${line},${character})`) + + messageColor(':'), + content + ' ' + - messageColor.underline( - (message.type === 'lint' ? 'Rule: ' : 'TS') + message.code - ), + messageColor.underline((type === 'lint' ? 'Rule: ' : 'TS') + code), '', frame, ].join(os.EOL);