docs: update developer guide for use with yarn (#29044)

remove reference to npm
remove confusing optional comments and $(yarn bin) with missing /
remove reference to protractor commands which don't exist
provide yarn commands which don't require gulp installed globally

PR Close #29044

.vscode/extensions.json

@@ -4,6 +4,7 @@
 
   // List of extensions which should be recommended for users of this workspace.
   "recommendations": [
+    "devondcarew.bazel-code",
     "gkalpak.aio-docs-utils",
     "ms-vscode.vscode-typescript-tslint-plugin",
     "xaver.clang-format",

docs/DEVELOPER.md

@@ -1,7 +1,7 @@
 # Building and Testing Angular
 
 This document describes how to set up your development environment to build and test Angular.
-It also explains the basic mechanics of using `git`, `node`, and `npm`.
+It also explains the basic mechanics of using `git`, `node`, and `yarn`.
 
 * [Prerequisite Software](#prerequisite-software)
 * [Getting the Sources](#getting-the-sources)
@@ -59,12 +59,6 @@ Next, install the JavaScript modules needed to build and test Angular:
 yarn install
 ```
 
-**Optional**: In this document, we make use of installed npm package scripts and binaries
-(stored under `./node_modules/.bin`) by prefixing these command invocations with `$(yarn bin)`; in
-particular `gulp` and `protractor` commands.
-
-
-
 ## Windows only
 
 In order to create the right symlinks, run **as administrator**:
@@ -105,26 +99,22 @@ Angular uses [clang-format](http://clang.llvm.org/docs/ClangFormat.html) to form
 If the source code is not properly formatted, the CI will fail and the PR cannot be merged.
 
 You can automatically format your code by running:
-- `gulp format`: re-format only edited source code.
+- `yarn gulp format`: re-format only edited source code.
-- `gulp format:all`: format _all_ source code
+- `yarn gulp format:all`: format _all_ source code
 
 A better way is to set up your IDE to format the changed file on each file save.
 
 ### VS Code
 1. Install [Clang-Format](https://marketplace.visualstudio.com/items?itemName=xaver.clang-format) extension for VS Code.
-2. Open `settings.json` in your workspace and add these lines:
+
-```json
+It will automatically pick up the settings from Angular's [settings.json](../.vscode/settings.json).
-  "files.autoSave": "onFocusChange",
-  "editor.formatOnSave": true,
-  "clang-format.executable": "PATH_TO_YOUR_WORKSPACE/angular/node_modules/.bin/clang-format",
-```
 
 ## Linting/verifying your source code
 
 You can check that your code is properly formatted and adheres to coding style by running:
 
 ``` shell
-$ gulp lint
+$ yarn gulp lint
 ```
 
 ## Publishing snapshot builds
@@ -148,7 +138,7 @@ $ CREATE_REPOS=1 ./scripts/ci/publish-build-artifacts.sh [github username]
 For subsequent snapshots, just run
 
 ``` shell
-$ ./scripts/publish/publish-build-artifacts.sh [github username]
+$ ./scripts/ci/publish-build-artifacts.sh [github username]
 ```
 
 The script will publish the build snapshot to a branch with the same name as your current branch,
@@ -158,27 +148,3 @@ and create it if it doesn't exist.
 ### VS Code
 
 1. Install [Bazel](https://marketplace.visualstudio.com/items?itemName=DevonDCarew.bazel-code) extension for VS Code.
-2. Open `settings.json` in your workspace and add these lines:
-```json
-  "files.associations": {
-    "*.bazel": "bazel"
-  },
-```
-
-## General IDE settings
-### VS Code
-
-1. Open `settings.json` in your workspace and add these lines:
-```json
-  "editor.tabSize": 2,
-  "files.exclude": {
-    "bazel-out": true,
-    ".idea": true,
-    ".circleci": true,
-    ".github": true,
-    "dist/**": true,
-    "node_modules/**": true,
-    ".rpt2_cache": true,
-    ".vscode": true
-  },
-```