build: update to latest version of @angular/ng-dev and set up formatting

Author: josephperrott

.ng-dev/format.mts

@@ -1,10 +1,10 @@
-import {FormatConfig} from '@angular/dev-infra-private/ng-dev';
+import {FormatConfig} from '@angular/ng-dev';
 
 /**
  * Configuration for the `ng-dev format` command.
  */
 export const format: FormatConfig = {
-  'clang-format': {
+  'prettier': {
     'matchers': [
       '**/*.{js,ts}',
     ],

.ng-dev/github.mts

@@ -1,4 +1,4 @@
-import {GithubConfig} from '@angular/dev-infra-private/ng-dev';
+import {GithubConfig} from '@angular/ng-dev';
 
 /**
  * Github configuration for the `ng-dev` toolset.

.ng-dev/pull-request.mts

@@ -1,4 +1,4 @@
-import {PullRequestConfig} from '@angular/dev-infra-private/ng-dev';
+import {PullRequestConfig} from '@angular/ng-dev';
 
 /**
  * Configuration for the merge tool in `ng-dev`. This sets up the labels which

.prettierignore

@@ -0,0 +1,5 @@
+.prettierrc
+pnpm-lock.yaml
+
+
+syntaxes/test/data/**

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "embeddedLanguageFormatting": "off",
+  "singleQuote": true,
+  "semi": true,
+  "quoteProps": "preserve",
+  "bracketSpacing": false,
+  "trailingComma": "all"
+}

.vscode/recommended-settings.json

@@ -3,10 +3,8 @@
   "tslint.enable": true,
   "typescript.tsc.autoDetect": "off",
   "typescript.preferences.quoteStyle": "single",
-  "//format-on-save-comment": "Format ts files on save with `clang-format.executable`. If `clang-format.executable` is not being used, this setting should be removed. You can instead run `pnpm format` to manually format your code.",
+  "//format-on-save-comment": "Format You can instead run `pnpm format` to manually format your code.",
   "[typescript]": {
     "editor.formatOnSave": true
   },
-  "//clang-format-comment": "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"
 }

DEVELOPER.md

@@ -28,37 +28,8 @@ by running
 
 ## Formatting source code
 
-This repository uses the [NPM distribution](https://www.npmjs.com/package/clang-format) of
-[`clang-format`](http://clang.llvm.org/docs/ClangFormat.html) to format source code.
-
-Code is automatically formatted by running `pnpm format`. You can also set up your IDE to format
-files on each save.
-
-### VS Code
-
-1. Install the
-[`Clang-Format` extension](https://marketplace.visualstudio.com/items?itemName=xaver.clang-format)
-for VS Code.
-2. Copy [`.vscode/recommended-settings.json`](./.vscode/recommended-settings.json) to a new
-   `.vscode/settings.json` file. VS Code will automatically pick up relevant formatting options for
-   the workspace from this file.
-
-### WebStorm / IntelliJ
-
-1. Install the [`ClangFormatIJ`](https://plugins.jetbrains.com/plugin/8396-clangformatij) plugin for
-   IntelliJ IDEs.
-2. Open `Preferences->Tools->clang-format`.
-3. Set the field named "PATH" to `<PATH_TO_REPOSITORY>/node_modules/.bin/`.
-
-### Vim
-
-1. Install [Vim Clang-Format](https://github.com/rhysd/vim-clang-format).
-2. Create a [project-specific `.vimrc`](https://andrew.stwrt.ca/posts/project-specific-vimrc/) in
-   the repository root directory containing
-
-```vim
-let g:clang_format#command = '<PATH_TO_REPOSITORY>/node_modules/.bin/clang-format'
-```
+This repository uses a common toolset provided in the angular organization for formatting, `ng-dev`. It is installed as a standard npm package,
+and can be run locally with `pnpm format`.
 
 ## Test Local Changes in VSCode
 

integration/project/app/bar.component.ts

@@ -1,19 +1,11 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
-@Component({
-    selector: 'baz-component',
-    template: `<h1>Hello {{name}}</h1>`,
-    standalone: true
-})
+@Component({selector: 'baz-component', template: `<h1>Hello {{name}}</h1>`, standalone: true})
 export class BazComponent {
-    name = 'Angular';
+  name = 'Angular';
 }
 
-@Component({
-    selector: 'bar-component',
-    template: `<`,
-    standalone: true
-})
+@Component({selector: 'bar-component', template: `<`, standalone: true})
 export class BarComponent {
-    name = 'Angular';
+  name = 'Angular';
 }

integration/project/app/foo.component.ts

@@ -1,4 +1,4 @@
-import { Component, signal } from '@angular/core';
+import {Component, signal} from '@angular/core';
 
 @Component({
   templateUrl: 'foo.component.html',

override_rename_ts_plugin/index.js

@@ -6,4 +6,4 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-module.exports = require("@angular/language-service/override_rename_ts_plugin").factory;
+module.exports = require('@angular/language-service/override_rename_ts_plugin').factory;