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,
+ },
+ },
+ ]
+ `)
+})