feat: add ability to Disable formatting a region of code using ts directives 🚀

ref microsoft/TypeScript#18261

Author: zardoy

src/extension.ts

@@ -14,6 +14,7 @@ import apiCommands from './apiCommands'
 import onCompletionAccepted from './onCompletionAccepted'
 import specialCommands from './specialCommands'
 import vueVolarSupport from './vueVolarSupport'
+import moreCompletions from './moreCompletions'
 
 export const activateTsPlugin = (tsApi: { configurePlugin; onCompletionAccepted }) => {
     let webWaitingForConfigSync = false
@@ -65,6 +66,7 @@ export const activateTsPlugin = (tsApi: { configurePlugin; onCompletionAccepted
     }
 
     experimentalPostfixes()
+    moreCompletions()
     void registerEmmet()
     webImports()
     apiCommands()

src/moreCompletions.ts

@@ -0,0 +1,29 @@
+import * as vscode from 'vscode'
+import { defaultJsSupersetLangsWithVue } from '@zardoy/vscode-utils/build/langs'
+
+export default () => {
+    vscode.languages.registerCompletionItemProvider(
+        defaultJsSupersetLangsWithVue,
+        {
+            provideCompletionItems(document, position, token, context) {
+                const regex = /\/\/@?[\w-]*/
+                let range = document.getWordRangeAtPosition(position, regex)
+                if (!range) return
+                const rangeText = document.getText(range)
+                if (rangeText !== document.lineAt(position).text.trim()) {
+                    return
+                }
+
+                range = range.with(range.start.translate(0, 2), range.end)
+                const tsDirectives = ['@ts-format-ignore-line', '@ts-format-ignore-region', '@ts-format-ignore-endregion']
+                return tsDirectives.map((directive, i) => {
+                    const completionItem = new vscode.CompletionItem(directive, vscode.CompletionItemKind.Snippet)
+                    completionItem.range = range
+                    completionItem.sortText = `z${i}`
+                    return completionItem
+                })
+            },
+        },
+        '@',
+    )
+}

typescript/src/decorateFormatFeatures.ts

@@ -0,0 +1,59 @@
+import { GetConfig } from './types'
+import { patchMethod } from './utils'
+
+export default (proxy: ts.LanguageService, languageService: ts.LanguageService, c: GetConfig) => {
+    // const oldGetAllRules = tsFull.formatting.getAllRules;
+    // tsFull.formatting.getAllRules = () => {
+    // }
+
+    const isFormattingLineIgnored = (sourceFile: ts.SourceFile, position: number) => {
+        // const sourceFile = languageService.getProgram()!.getSourceFile(fileName)!
+        const fullText = sourceFile.getFullText()
+        // check that lines before line are not ignored
+        const linesBefore = fullText.slice(0, position).split('\n')
+        if (linesBefore[linesBefore.length - 2]?.trim() === '//@ts-format-ignore-line') {
+            return true
+        }
+
+        let isInsideIgnoredRegion = false
+        for (const line of linesBefore) {
+            if (line.trim() === '//@ts-format-ignore-region') {
+                isInsideIgnoredRegion = true
+            }
+            if (line.trim() === '//@ts-format-ignore-endregion') {
+                isInsideIgnoredRegion = false
+            }
+        }
+        return isInsideIgnoredRegion
+    }
+    // proxy.getFormattingEditsAfterKeystroke = (fileName, position, key, options) => {
+    //     // if (isFormattingLineIgnored(fileName, position)) {
+    //     //     return []
+    //     // }
+    //     return languageService.getFormattingEditsAfterKeystroke(fileName, position, key, options)
+    // }
+    // proxy.getFormattingEditsForDocument = (fileName, options) => {
+    //     return []
+    // }
+    const toPatchFormatMethods = ['formatSelection', 'formatOnOpeningCurly', 'formatOnClosingCurly', 'formatOnSemicolon', 'formatOnEnter']
+    for (const toPatchFormatMethod of toPatchFormatMethods) {
+        patchMethod(tsFull.formatting, toPatchFormatMethod as any, oldFn => (...args) => {
+            const result = oldFn(...args)
+            const sourceFile = args.find(arg => ts.isSourceFile(arg as any))
+            return result.filter(({ span }) => {
+                if (isFormattingLineIgnored(sourceFile as ts.SourceFile, span.start)) {
+                    return false
+                }
+                return true
+            })
+        })
+    }
+    // proxy.getFormattingEditsForRange = (fileName, start, end, options) => {
+    //     return languageService.getFormattingEditsForRange(fileName, start, end, options).filter(({ span }) => {
+    //         if (isFormattingLineIgnored(fileName, span.start)) {
+    //             return false
+    //         }
+    //         return true
+    //     })
+    // }
+}

typescript/src/decorateProxy.ts

@@ -12,6 +12,7 @@ import completionEntryDetails from './completionEntryDetails'
 import { GetConfig } from './types'
 import lodashGet from 'lodash.get'
 import decorateWorkspaceSymbolSearch from './workspaceSymbolSearch'
+import decorateFormatFeatures from './decorateFormatFeatures'
 
 /** @internal */
 export const thisPluginMarker = '__essentialPluginsMarker__'
@@ -113,6 +114,7 @@ export const decorateLanguageService = (
     decorateReferences(proxy, languageService, c)
     decorateDocumentHighlights(proxy, languageService, c)
     decorateWorkspaceSymbolSearch(proxy, languageService, c, languageServiceHost)
+    decorateFormatFeatures(proxy, languageService, c)
     proxy.findRenameLocations = (fileName, position, findInStrings, findInComments, providePrefixAndSuffixTextForRename) => {
         if (overrideRequestPreferences.rename) {
             try {

typescript/src/utils.ts

@@ -185,3 +185,15 @@ export function approveCast<T2 extends Array<(node: ts.Node) => node is ts.Node>
     if (!oneOfTest) throw new Error('Tests are not provided')
     return oneOfTest.some(test => test(node))
 }
+
+export const patchMethod = <T, K extends keyof T>(obj: T, method: K, overriden: (oldMethod: T[K]) => T[K]) => {
+    const oldValue = obj[method]
+    Object.defineProperty(obj, method, {
+        value: overriden(oldValue),
+    })
+    return () => {
+        Object.defineProperty(obj, method, {
+            value: oldValue,
+        })
+    }
+}

typescript/test/completions.spec.ts

@@ -12,6 +12,9 @@ import { createRequire } from 'module'
 import { findChildContainingPosition } from '../src/utils'
 import handleCommand from '../src/specialCommands/handle'
 import _ from 'lodash'
+import decorateFormatFeatures from '../src/decorateFormatFeatures'
+
+// TODO rename file to plugin.spec.ts or move other tests
 
 const require = createRequire(import.meta.url)
 //@ts-ignore plugin expect it to set globallly
@@ -499,3 +502,30 @@ test('In Keyword Completions', () => {
       }
     `)
 })
+
+test('Format ignore', () => {
+    decorateFormatFeatures(languageService, { ...languageService }, defaultConfigFunc)
+    const [pos] = newFileContents(/* ts */ `
+      const a = {
+        //@ts-format-ignore-region
+        a:   1,
+        a1:  2,
+        //@ts-format-ignore-endregion
+        b:  3,
+        //@ts-format-ignore-line
+        c:  4,
+    }
+    `)
+    const edits = languageService.getFormattingEditsForRange(entrypoint, 0, files[entrypoint]!.length, {}).filter(x => !!x.newText)
+    expect(edits).toMatchInlineSnapshot(/* json */ `
+      [
+        {
+          "newText": " ",
+          "span": {
+            "length": 2,
+            "start": 134,
+          },
+        },
+      ]
+    `)
+})