ci: complete migration to prettier formatting (angular#55580)

Format the remaining unformatted files in the repository PR Close angular#55580

Author: josephperrott

.devcontainer/recommended-devcontainer.json

@@ -8,7 +8,6 @@
  "devondcarew.bazel-code",
  "gkalpak.aio-docs-utils",
  "ms-vscode.vscode-typescript-tslint-plugin",
- "xaver.clang-format",
  // The following extensions are useful when working on angular.io (i.e. inside the `aio/` directory).
  //"angular.ng-template",
  //"dbaeumer.vscode-eslint",

.ng-dev/format.mts

@@ -7,37 +7,8 @@ export const format: FormatConfig = {
  'prettier': {
  'matchers': [
  '**/*.{yaml,yml}',
- 'adev/**/*.{js,ts}',
- 'devtools/**/*.{js,ts}',
- 'integration/**/*.{js,ts}',
- 'tools/**/*.{js,ts}',
- 'modules/**/*.{js,ts}',
- 'scripts/**/*.{js,ts}',
- 'packages/animations/**/*.{js,ts}',
- 'packages/bazel/**/*.{js,ts}',
- 'packages/benchpress/**/*.{js,ts}',
- 'packages/common/**/*.{js,ts}',
- 'packages/compiler/**/*.{js,ts}',
- 'packages/compiler-cli/**/*.{js,ts}',
- 'packages/core/**/*.{js,ts}',
- 'packages/docs/**/*.{js,ts}',
- 'packages/elements/**/*.{js,ts}',
- 'packages/examples/**/*.{js,ts}',
- 'packages/forms/**/*.{js,ts}',
- 'packages/language-service/**/*.{js,ts}',
- 'packages/localize/**/*.{js,ts}',
- 'packages/platform-browser/**/*.{js,ts}',
- 'packages/platform-browser-dynamic/**/*.{js,ts}',
- 'packages/platform-server/**/*.{js,ts}',
- 'packages/misc/**/*.{js,ts}',
- 'packages/private/**/*.{js,ts}',
- 'packages/router/**/*.{js,ts}',
- 'packages/service-worker/**/*.{js,ts}',
- 'packages/upgrade/**/*.{js,ts}',
- 'packages/zone.js/**/*.{js,ts}',
+ '**/*.{js,ts}',
 
- // Test cases contain non valid code.
- '!packages/compiler-cli/test/compliance/test_cases/**/*.{js,ts}',
  // Do not format d.ts files as they are generated
  '!**/*.d.ts',
  // Both third_party and .yarn are directories containing copied code which should
@@ -49,60 +20,10 @@ export const format: FormatConfig = {
  '!packages/core/src/i18n/locale_en.ts',
  '!packages/common/locales/closure-locale.ts',
  '!packages/common/src/i18n/currencies.ts',
- ],
- },
- 'clang-format': {
- 'matchers': [
- '**/*.{js,ts}',
- // TODO: burn down format failures and remove aio and integration exceptions.
- '!aio/**',
- '!integration/**',
- // Both third_party and .yarn are directories containing copied code which should
- // not be modified.
- '!third_party/**',
- '!.yarn/**',
- // Do not format d.ts files as they are generated
- '!**/*.d.ts',
- // Do not format generated ng-dev script
- '!dev-infra/ng-dev.js',
- '!dev-infra/build-worker.js',
- // Do not format compliance test-cases since they must match generated code
- '!packages/compiler-cli/test/compliance/test_cases/**/*.js',
- // Do not format the locale files which are checked-in for Google3, but generated using
- // the `generate-locales-tool` from `packages/common/locales`.
- '!packages/core/src/i18n/locale_en.ts',
- '!packages/common/locales/closure-locale.ts',
- '!packages/common/src/i18n/currencies.ts',
- // Temporarily disable formatting for adev
- '!adev/**',
-
- // Migrated to prettier
- '!devtools/**/*.{js,ts}',
- '!tools/**/*.{js,ts}',
- '!modules/**/*.{js,ts}',
- '!scripts/**/*.{js,ts}',
- '!packages/animations/**/*.{js,ts}',
- '!packages/bazel/**/*.{js,ts}',
- '!packages/benchpress/**/*.{js,ts}',
- '!packages/common/**/*.{js,ts}',
- '!packages/compiler/**/*.{js,ts}',
- '!packages/compiler-cli/**/*.{js,ts}',
- '!packages/core/**/*.{js,ts}',
- '!packages/docs/**/*.{js,ts}',
- '!packages/elements/**/*.{js,ts}',
- '!packages/examples/**/*.{js,ts}',
- '!packages/forms/**/*.{js,ts}',
- '!packages/language-service/**/*.{js,ts}',
- '!packages/localize/**/*.{js,ts}',
- '!packages/platform-browser/**/*.{js,ts}',
- '!packages/platform-browser-dynamic/**/*.{js,ts}',
- '!packages/platform-server/**/*.{js,ts}',
- '!packages/misc/**/*.{js,ts}',
- '!packages/private/**/*.{js,ts}',
- '!packages/router/**/*.{js,ts}',
- '!packages/service-worker/**/*.{js,ts}',
- '!packages/upgrade/**/*.{js,ts}',
- '!packages/zone.js/**/*.{js,ts}',
+ // Test cases contain non valid code.
+ '!packages/compiler-cli/test/compliance/test_cases/**/*.{js,ts}',
+ // Ignore AIO as its pending removal.
+ '!aio/**/*.{js,ts}',
  ],
  },
  'buildifier': true,

.vscode/extensions.json

@@ -6,6 +6,5 @@
  "recommendations": [
  "BazelBuild.vscode-bazel",
  "ms-vscode.vscode-typescript-tslint-plugin",
- "xaver.clang-format",
  ],
 }

.vscode/recommended-settings.json

@@ -1,16 +1,10 @@
 {
- // Format js and ts files on save with `clang-format.executable`
- // If `clang-format.executable` is not being used, these two settings should be removed otherwise it will break existing formatting.
- // You can instead run `yarn gulp format` to manually format your code.
  "[javascript]": {
  "editor.formatOnSave": true,
  },
  "[typescript]": {
  "editor.formatOnSave": true,
  },
- // Please install https://marketplace.visualstudio.com/items?itemName=xaver.clang-format to take advantage of `clang-format` in VSCode.
- // (See https://clang.llvm.org/docs/ClangFormat.html for more info `clang-format`.)
- "clang-format.executable": "${workspaceRoot}/node_modules/.bin/clang-format",
  // Exclude third party modules and build artifacts from the editor watchers/searches.
  "files.watcherExclude": {
  "**/.git/objects/**": true,

CONTRIBUTING.md

@@ -207,7 +207,7 @@ To ensure consistency throughout the source code, keep these rules in mind as yo
 * All public API methods **must be documented**.
 * We follow [Google's JavaScript Style Guide][js-style-guide], but wrap all code at **100 characters**.
 
- An automated formatter is available, see [DEVELOPER.md](docs/DEVELOPER.md#clang-format).
+ An automated formatter is available, see [DEVELOPER.md](docs/DEVELOPER.md#formatting-your-source-code).
 
 
 ## <a name="commit"></a> Commit Message Format

adev/src/content/tutorials/first-app/steps/14-http/src-final/app/home/home.component.ts

@@ -42,8 +42,8 @@ export class HomeComponent {
  return;
  }
 
- this.filteredLocationList = this.housingLocationList.filter(
- (housingLocation) => housingLocation?.city.toLowerCase().includes(text.toLowerCase()),
+ this.filteredLocationList = this.housingLocationList.filter((housingLocation) =>
+ housingLocation?.city.toLowerCase().includes(text.toLowerCase()),
  );
  }
 }

adev/src/content/tutorials/first-app/steps/14-http/src/app/home/home.component.ts

@@ -38,8 +38,8 @@ export class HomeComponent {
  return;
  }
 
- this.filteredLocationList = this.housingLocationList.filter(
- (housingLocation) => housingLocation?.city.toLowerCase().includes(text.toLowerCase()),
+ this.filteredLocationList = this.housingLocationList.filter((housingLocation) =>
+ housingLocation?.city.toLowerCase().includes(text.toLowerCase()),
  );
  }
 }

browser-providers.conf.js

@@ -43,19 +43,19 @@ const customLaunchers = {
 
 const sauceAliases = {
  'CI_REQUIRED': buildConfiguration('unitTest', 'SL', true),
- 'CI_OPTIONAL': buildConfiguration('unitTest', 'SL', false)
+ 'CI_OPTIONAL': buildConfiguration('unitTest', 'SL', false),
 };
 
 module.exports = {
- customLaunchers : customLaunchers,
- sauceAliases : sauceAliases,
+ customLaunchers: customLaunchers,
+ sauceAliases: sauceAliases,
 };
 
 function buildConfiguration(type, target, required) {
  return Object.keys(config)
-  .filter((item) => {
-  const conf = config[item][type];
-  return conf.required === required && conf.target === target;
-  })
-  .map((item) => target + '_' + item.toUpperCase());
+ .filter((item) => {
+ const conf = config[item][type];
+ return conf.required === required && conf.target === target;
+ })
+ .map((item) => target + '_' + item.toUpperCase());
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/directive-property-resolver.ts

@@ -157,8 +157,8 @@ export class DirectivePropertyResolver {
  propPointer = inputLabels.has(propName)
  ? inputProps
  : outputLabels.has(propName)
- ? outputProps
- : stateProps;
+  ? outputProps
+  : stateProps;
  propPointer[propName] = this.directiveProperties[propName];
  });
 

docs/CODING_STANDARDS.md

@@ -7,7 +7,7 @@ built _with_ Angular. (Though you can follow them too if you really want).
 
 The [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html) is the
 basis for Angular's coding style, with additional guidance here pertaining to TypeScript. The team
-uses `clang-format` to automatically format code; automatic formatting is enforced by CI.
+uses `prettier` to automatically format code; automatic formatting is enforced by CI.
 
 ## Code practices