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
This commit is contained in:
Michael Prentice 2019-02-28 18:40:09 -05:00 committed by Matias Niemelä
parent bf0704d685
commit 1a9ab2727e
2 changed files with 9 additions and 42 deletions

View File

@ -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",

View File

@ -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**:
@ -102,29 +96,25 @@ merged if the code is formatted properly and all tests are passing.
## <a name="clang-format"></a> Formatting your source code
Angular uses [clang-format](http://clang.llvm.org/docs/ClangFormat.html) to format the source code.
If the source code is not properly formatted, the CI will fail and the PR can not be merged.
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.
- `gulp format:all`: format _all_ source code
- `yarn gulp format`: re-format only edited 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
"files.autoSave": "onFocusChange",
"editor.formatOnSave": true,
"clang-format.executable": "PATH_TO_YOUR_WORKSPACE/angular/node_modules/.bin/clang-format",
```
It will automatically pick up the settings from Angular's [settings.json](../.vscode/settings.json).
## 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
},
```