refactor: migrate language-service to prettier formatting (#55405)

Migrate formatting to prettier for language-service from clang-format

PR Close #55405

.ng-dev/format.mts

@@ -22,6 +22,7 @@ export const format: FormatConfig = {
       'packages/docs/**/*.{js,ts}',
       'packages/elements/**/*.{js,ts}',
       'packages/examples/**/*.{js,ts}',
+      'packages/language-service/**/*.{js,ts}',
       'packages/misc/**/*.{js,ts}',
       'packages/private/**/*.{js,ts}',
       'packages/router/**/*.{js,ts}',
@@ -75,6 +76,7 @@ export const format: FormatConfig = {
       '!packages/docs/**/*.{js,ts}',
       '!packages/elements/**/*.{js,ts}',
       '!packages/examples/**/*.{js,ts}',
+      '!packages/language-service/**/*.{js,ts}',
       '!packages/misc/**/*.{js,ts}',
       '!packages/private/**/*.{js,ts}',
       '!packages/router/**/*.{js,ts}',

packages/language-service/api.ts

@@ -44,35 +44,38 @@ export type GetTcbResponse = {
    * The filename is entirely opaque and unstable, useful only for debugging
    * purposes.
    */
-  fileName: string,
+  fileName: string;
   /** The content of the SourceFile this typecheck block belongs to. */
-  content: string,
+  content: string;
   /**
    * Spans over node(s) in the typecheck block corresponding to the
    * TS code generated for template node under the current cursor position.
    *
    * When the cursor position is over a source for which there is no generated
    * code, `selections` is empty.
    */
-  selections: ts.TextSpan[],
+  selections: ts.TextSpan[];
 };
 
 export type GetComponentLocationsForTemplateResponse = ts.DocumentSpan[];
-export type GetTemplateLocationForComponentResponse = ts.DocumentSpan|undefined;
+export type GetTemplateLocationForComponentResponse = ts.DocumentSpan | undefined;
 
 /**
  * `NgLanguageService` describes an instance of an Angular language service,
  * whose API surface is a strict superset of TypeScript's language service.
  */
 export interface NgLanguageService extends ts.LanguageService {
-  getTcb(fileName: string, position: number): GetTcbResponse|undefined;
+  getTcb(fileName: string, position: number): GetTcbResponse | undefined;
   getComponentLocationsForTemplate(fileName: string): GetComponentLocationsForTemplateResponse;
-  getTemplateLocationForComponent(fileName: string, position: number):
-      GetTemplateLocationForComponentResponse;
+  getTemplateLocationForComponent(
+    fileName: string,
+    position: number,
+  ): GetTemplateLocationForComponentResponse;
   getTypescriptLanguageService(): ts.LanguageService;
 }
 
-export function isNgLanguageService(ls: ts.LanguageService|
-                                    NgLanguageService): ls is NgLanguageService {
+export function isNgLanguageService(
+  ls: ts.LanguageService | NgLanguageService,
+): ls is NgLanguageService {
   return 'getTcb' in ls;
 }

packages/language-service/bundles/rollup.config.js

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-
 const {nodeResolve} = require('@rollup/plugin-node-resolve');
 const commonJs = require('@rollup/plugin-commonjs');
 
@@ -44,19 +43,11 @@ module.exports = function(provided) {
 };
 `;
 
-const external = [
-  'os',
-  'fs',
-  'path',
-  'typescript',
-];
+const external = ['os', 'fs', 'path', 'typescript'];
 
 const config = {
   external,
-  plugins: [
-    nodeResolve({preferBuiltins: true}),
-    commonJs(),
-  ],
+  plugins: [nodeResolve({preferBuiltins: true}), commonJs()],
   output: {
     banner: amdFileHeader,
   },

packages/language-service/override_rename_ts_plugin.ts

@@ -51,7 +51,7 @@ const factory: ts.server.PluginModuleFactory = (): ts.server.PluginModule => {
           }
         },
       };
-    }
+    },
   };
 };
 

packages/language-service/src/adapters.ts

@@ -10,7 +10,12 @@
 
 import {ConfigurationHost} from '@angular/compiler-cli';
 import {NgCompilerAdapter} from '@angular/compiler-cli/src/ngtsc/core/api';
-import {AbsoluteFsPath, FileStats, PathSegment, PathString} from '@angular/compiler-cli/src/ngtsc/file_system';
+import {
+  AbsoluteFsPath,
+  FileStats,
+  PathSegment,
+  PathString,
+} from '@angular/compiler-cli/src/ngtsc/file_system';
 import {isShim} from '@angular/compiler-cli/src/ngtsc/shims';
 import {getRootDirs} from '@angular/compiler-cli/src/ngtsc/util/src/typescript';
 import * as p from 'path';
@@ -24,7 +29,7 @@ export class LanguageServiceAdapter implements NgCompilerAdapter {
   readonly entryPoint = null;
   readonly constructionDiagnostics: ts.Diagnostic[] = [];
   readonly ignoreForEmit: Set<ts.SourceFile> = new Set();
-  readonly unifiedModulesHost = null;  // only used in Bazel
+  readonly unifiedModulesHost = null; // only used in Bazel
   readonly rootDirs: AbsoluteFsPath[];
 
   /**
@@ -39,8 +44,10 @@ export class LanguageServiceAdapter implements NgCompilerAdapter {
   }
 
   resourceNameToFileName(
-      url: string, fromFile: string,
-      fallbackResolve?: (url: string, fromFile: string) => string | null): string|null {
+    url: string,
+    fromFile: string,
+    fallbackResolve?: (url: string, fromFile: string) => string | null,
+  ): string | null {
     // If we are trying to resolve a `.css` file, see if we can find a pre-compiled file with the
     // same name instead. That way, we can provide go-to-definition for the pre-compiled files which
     // would generally be the desired behavior.
@@ -69,7 +76,7 @@ export class LanguageServiceAdapter implements NgCompilerAdapter {
     return this.project.fileExists(fileName);
   }
 
-  readFile(fileName: string): string|undefined {
+  readFile(fileName: string): string | undefined {
     return this.project.readFile(fileName);
   }
 
@@ -122,7 +129,7 @@ export class LanguageServiceAdapter implements NgCompilerAdapter {
     return snapshot.getText(0, snapshot.getLength());
   }
 
-  getModifiedResourceFiles(): Set<string>|undefined {
+  getModifiedResourceFiles(): Set<string> | undefined {
     const modifiedFiles = new Set<string>();
     for (const [fileName, oldVersion] of this.lastReadResourceVersion) {
       if (this.project.getScriptVersion(fileName) !== oldVersion) {
@@ -168,7 +175,7 @@ export class LSParseConfigHost implements ConfigurationHost {
   pwd(): AbsoluteFsPath {
     return this.serverHost.getCurrentDirectory() as AbsoluteFsPath;
   }
-  extname(path: AbsoluteFsPath|PathSegment): string {
+  extname(path: AbsoluteFsPath | PathSegment): string {
     return p.extname(path);
   }
   resolve(...paths: string[]): AbsoluteFsPath {

packages/language-service/src/attribute_completions.ts

@@ -7,7 +7,13 @@
  */
 
 import {CssSelector, SelectorMatcher, TmplAstElement, TmplAstTemplate} from '@angular/compiler';
-import {ElementSymbol, PotentialDirective, TemplateSymbol, TemplateTypeChecker, TypeCheckableDirectiveMeta} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
+import {
+  ElementSymbol,
+  PotentialDirective,
+  TemplateSymbol,
+  TemplateTypeChecker,
+  TypeCheckableDirectiveMeta,
+} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
 import ts from 'typescript';
 
 import {DisplayInfoKind, unsafeCastDisplayInfoKindToScriptElementKind} from './display_parts';
@@ -105,8 +111,9 @@ export interface DomEventCompletion {
  * Completion of an attribute which results in a new directive being matched on an element.
  */
 export interface DirectiveAttributeCompletion {
-  kind: AttributeCompletionKind.DirectiveAttribute|
-      AttributeCompletionKind.StructuralDirectiveAttribute;
+  kind:
+    | AttributeCompletionKind.DirectiveAttribute
+    | AttributeCompletionKind.StructuralDirectiveAttribute;
 
   /**
    * Name of the attribute whose addition causes this directive to match the element.
@@ -178,8 +185,12 @@ export interface DirectiveOutputCompletion {
  * Disambiguated by the `kind` property into various types of completions.
  */
 export type AttributeCompletion =
-    DomAttributeCompletion|DomPropertyCompletion|DirectiveAttributeCompletion|
-    DirectiveInputCompletion|DirectiveOutputCompletion|DomEventCompletion;
+  | DomAttributeCompletion
+  | DomPropertyCompletion
+  | DirectiveAttributeCompletion
+  | DirectiveInputCompletion
+  | DirectiveOutputCompletion
+  | DomEventCompletion;
 
 /**
  * Given an element and its context, produce a `Map` of all possible attribute completions.
@@ -196,14 +207,17 @@ export type AttributeCompletion =
  * completion, not the DOM completion for that name.
  */
 export function buildAttributeCompletionTable(
-    component: ts.ClassDeclaration, element: TmplAstElement|TmplAstTemplate,
-    checker: TemplateTypeChecker): Map<string, AttributeCompletion> {
+  component: ts.ClassDeclaration,
+  element: TmplAstElement | TmplAstTemplate,
+  checker: TemplateTypeChecker,
+): Map<string, AttributeCompletion> {
   const table = new Map<string, AttributeCompletion>();
 
   // Use the `ElementSymbol` or `TemplateSymbol` to iterate over directives present on the node, and
   // their inputs/outputs. These have the highest priority of completion results.
-  const symbol: ElementSymbol|TemplateSymbol =
-      checker.getSymbolOfNode(element, component) as ElementSymbol | TemplateSymbol;
+  const symbol: ElementSymbol | TemplateSymbol = checker.getSymbolOfNode(element, component) as
+    | ElementSymbol
+    | TemplateSymbol;
   const presentDirectives = new Set<ts.ClassDeclaration>();
   if (symbol !== null) {
     // An `ElementSymbol` was available. This means inputs and outputs for directives on the
@@ -273,8 +287,9 @@ export function buildAttributeCompletionTable(
 
   // Next, explore hypothetical directives and determine if the addition of any single attributes
   // can cause the directive to match the element.
-  const directivesInScope =
-      checker.getPotentialTemplateDirectives(component).filter(d => d.isInScope);
+  const directivesInScope = checker
+    .getPotentialTemplateDirectives(component)
+    .filter((d) => d.isInScope);
   if (directivesInScope !== null) {
     const elementSelector = makeElementSelector(element);
 
@@ -327,7 +342,7 @@ export function buildAttributeCompletionTable(
                 directive: dirInScope,
                 propertyName: attrName,
                 classPropertyName:
-                    meta.inputs.getByBindingPropertyName(attrName)![0].classPropertyName,
+                  meta.inputs.getByBindingPropertyName(attrName)![0].classPropertyName,
                 twoWayBindingSupported: meta.outputs.hasBindingPropertyName(attrName + 'Change'),
               });
             } else if (meta.outputs.hasBindingPropertyName(attrName)) {
@@ -337,7 +352,7 @@ export function buildAttributeCompletionTable(
                 directive: dirInScope,
                 eventName: attrName,
                 classPropertyName:
-                    meta.outputs.getByBindingPropertyName(attrName)![0].classPropertyName,
+                  meta.outputs.getByBindingPropertyName(attrName)![0].classPropertyName,
               });
             } else {
               // This attribute causes a new directive to be matched, but does not also correspond
@@ -393,7 +408,7 @@ export function buildAttributeCompletionTable(
   return table;
 }
 
-function buildSnippet(insertSnippet: true|undefined, text: string): string|undefined {
+function buildSnippet(insertSnippet: true | undefined, text: string): string | undefined {
   return insertSnippet ? `${text}="$1"` : undefined;
 }
 
@@ -427,9 +442,13 @@ export enum AsciiSortPriority {
  * `insertText` is `(myOutput)="$0"`.
  */
 export function addAttributeCompletionEntries(
-    entries: ts.CompletionEntry[], completion: AttributeCompletion, isAttributeContext: boolean,
-    isElementContext: boolean, replacementSpan: ts.TextSpan|undefined,
-    insertSnippet: true|undefined): void {
+  entries: ts.CompletionEntry[],
+  completion: AttributeCompletion,
+  isAttributeContext: boolean,
+  isElementContext: boolean,
+  replacementSpan: ts.TextSpan | undefined,
+  insertSnippet: true | undefined,
+): void {
   switch (completion.kind) {
     case AttributeCompletionKind.DirectiveAttribute: {
       entries.push({
@@ -566,7 +585,9 @@ export function addAttributeCompletionEntries(
 }
 
 export function getAttributeCompletionSymbol(
-    completion: AttributeCompletion, checker: ts.TypeChecker): ts.Symbol|null {
+  completion: AttributeCompletion,
+  checker: ts.TypeChecker,
+): ts.Symbol | null {
   switch (completion.kind) {
     case AttributeCompletionKind.DomAttribute:
     case AttributeCompletionKind.DomEvent:
@@ -577,9 +598,11 @@ export function getAttributeCompletionSymbol(
       return completion.directive.tsSymbol;
     case AttributeCompletionKind.DirectiveInput:
     case AttributeCompletionKind.DirectiveOutput:
-      return checker.getDeclaredTypeOfSymbol(completion.directive.tsSymbol)
-                 .getProperty(completion.classPropertyName) ??
-          null;
+      return (
+        checker
+          .getDeclaredTypeOfSymbol(completion.directive.tsSymbol)
+          .getProperty(completion.classPropertyName) ?? null
+      );
   }
 }
 
@@ -619,8 +642,9 @@ function getStructuralAttributes(meta: TypeCheckableDirectiveMeta): string[] {
     // input bindings must begin with the base. E.g. in `*ngFor="let a of b"`, `ngFor` is the
     // base attribute, and the `of` binding key corresponds to an input of `ngForOf`.
     const baseAttr = attributes.reduce(
-        (prev, curr) => prev === null || curr.length < prev.length ? curr : prev,
-        null as string | null);
+      (prev, curr) => (prev === null || curr.length < prev.length ? curr : prev),
+      null as string | null,
+    );
     if (baseAttr === null) {
       // No attributes in this selector?
       continue;
@@ -659,9 +683,11 @@ function getStructuralAttributes(meta: TypeCheckableDirectiveMeta): string[] {
 }
 
 export function buildAnimationCompletionEntries(
-    animations: string[], replacementSpan: ts.TextSpan,
-    kind: DisplayInfoKind): ts.CompletionEntry[] {
-  return animations.map(animation => {
+  animations: string[],
+  replacementSpan: ts.TextSpan,
+  kind: DisplayInfoKind,
+): ts.CompletionEntry[] {
+  return animations.map((animation) => {
     return {
       kind: unsafeCastDisplayInfoKindToScriptElementKind(kind),
       name: animation,