Typescript: Document quick fix (or whatever it's officially called)

Created on 15 Dec 2018  路  10Comments  路  Source: microsoft/TypeScript


TypeScript Version: 3.3.0-dev.201xxxxx


Search Terms:
code fix
quick fix
suggestion

Code
not entirely applicable, but this is what I had which caused me to get confused

const fs = require("fs");

Expected behavior:
Commandline tsc should behave the same as editor integrations

Actual behavior:
The "quick fix" feature, which appears to be called "code fixes" in the codebase and googling the messages led me to the json file which refers to them as "suggestions", only appears to exist in the typescript server.

As a newcomer this had me extremely confused. I was running tsc on the commandline and getting no errors, but seeing squiggly lines and messages in my editor (atom, in this case).

I was unable to find any documentation about where the message 'require' call may be converted to an import was coming from, or that this was a hint that typescript was able to fix my code for me.

It would also be helpful if the tsc client was able to list the code fix suggestions, even if giving it a way to apply them would be too complex.

Playground Link:
n/a

Related Issues:
none that I could find

In Discussion Suggestion

Most helpful comment

After reporting typescript-eslint/typescript-eslint#1786 I was lead here. As I do not use vscode, I was completely unaware that TypeScript has built-in autofix capabilities outside of the language server. Would be very useful to have a tsc --fix command-line option similar to eslint, as these can be run in git hooks and other places.

All 10 comments

cc @DanielRosenwasser

What exactly were you trying to find when you started searching for quick fixes?

Also

seeing squiggly lines and messages in my editor (atom, in this case).

it sounds like this is a bug with how Atom's TypeScript integration is displaying suggestion diagnostics. If you're using ide-typescript you may want to file an issue there. CCing @damieng.

I was seeing a list of suggestions in atom, that were coming from the typescript compiler - but that weren't showing up in the CLI, even though I thought I had the same settings enabled.

When I googled the error message, i only got results for the messages JSON.

The items in atom were showing up with a different colour line, so it was clear that they were suggestions rather than errors - but I didn't understand what configuration was producing them.

I was poking around the CLI docs and --help output trying to see how to enable suggestions.

For comparison, here's atom and vscode. If anything the vscode display is a bit off, as the squiggly line doesn't extend to the full expression.

screenshot 2018-12-17 at 21 54 39
screenshot 2018-12-17 at 21 55 12

Oh, and the wording of may be converted read to me like "the compiler might do something unpredictable" rather than "this is advice you should follow".

"can be converted" is probably better.

If anything the vscode display is a bit off, as the squiggly line doesn't extend to the full expression.

That's the intent - it's supposed to appear as a subtle hint that you can take action on some code. We're not trying to surface these as something like linter warnings.

Is there any way to get the list of quick fixes via the CLI yet?

While these do show up when opening a file in VSCode, I am yet to find a way to list all possible fixes across a project

The quick fixes are generated by the language service API, which currently isn't even a part of the cli build. So while you can write a program yourself against the TypeScript API that finds (and applies) all quickfixes, tsc under our current architecture cannot. @DanielRosenwasser was trying to make the case, long ago, that we should invest in a mode editor-like command line experience, however the idea hasn't really taken off yet.

For anyone who interested

import ts from 'typescript'
import { join } from 'path'
import { existsSync, readFileSync } from 'fs'

const compilerOptions: ts.CompilerOptions = {}
const host = ts.createCompilerHost(compilerOptions)
const program = ts.createProgram({
    host: host,
    rootNames: [join(__dirname, '../../my-project/src/index.ts')],
    options: compilerOptions
})
const allFiles = program.getSourceFiles().map(x => x.fileName)
const languageService = ts.createLanguageService(
    {
        getCompilationSettings: () => compilerOptions,
        getScriptFileNames: () => allFiles,
        getScriptVersion: () => '0',
        getCurrentDirectory() {
            return join(__dirname, '../../my-project/src')
        },
        getDefaultLibFileName: options => ts.getDefaultLibFilePath(options),
        fileExists: ts.sys.fileExists,
        readFile: ts.sys.readFile,
        readDirectory: ts.sys.readDirectory,
        getScriptSnapshot: fileName => {
            if (!existsSync(fileName)) {
                return undefined
            }
            return ts.ScriptSnapshot.fromString(readFileSync(fileName).toString())
        }
    },
    ts.createDocumentRegistry(true, '../../my-project/src')
)
for (const file of allFiles) {
    const diags = languageService.getSuggestionDiagnostics(file)
    for (const diag of diags) {
        console.log(
            `TS${diag.code}: ${ts.flattenDiagnosticMessageText(diag.messageText, ', ', 2)} | ${diag.file.fileName}`
        )
    }
}

After reporting typescript-eslint/typescript-eslint#1786 I was lead here. As I do not use vscode, I was completely unaware that TypeScript has built-in autofix capabilities outside of the language server. Would be very useful to have a tsc --fix command-line option similar to eslint, as these can be run in git hooks and other places.

Was this page helpful?
0 / 5 - 0 ratings