Skip to content

Commit

Permalink
Readme polishing.
Browse files Browse the repository at this point in the history
  • Loading branch information
vozkych committed Jul 16, 2016
1 parent c6f579b commit d56910f
Showing 1 changed file with 48 additions and 38 deletions.
86 changes: 48 additions & 38 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
vscode-typescript-boilerplate
=========================
# vscode-typescript-boilerplate

This project provides a skeleton structure and IDE settings files to help with TypeScript development in [Visual Studio Code][vscode] (as of build 0.9.1). The project builds all TypeScript (`.ts`) files into a `build` directory in the root.

## Project Structure
## Project Features

The project currently provides the following features:

* TypeScript compilation with Code's build command, or via `npm run build`, providing source maps
* Mocha test structure, which can be run with Code or `npm test`, also with source maps
* Error detection and navigation within Code for both build and test problems (see [Code Tasks](https://code.visualstudio.com/Docs/editor/tasks))
Expand All @@ -13,97 +14,106 @@ The project currently provides the following features:
* Custom type definitions ready for your own declarations

### Project Structure
```

```tree
.vscode/
launch.json # Defines launch tasks for debugging etc.
tasks.json # Defines tasks available e.g. build & test
build/ # The output directory of JavaScript files
# when built from TypeScript
src/ # The root of all TypeScript source code
app/
app.ts # The main entry point for the project.
mymodule.ts # A sample module
test/
app.test.ts # A sample test
mymodule.test.ts # A sample module test with sinon spies
typings/ # Typings downloaded using the typings command
custom.d.ts # An example of custom ambient typings
tsconfig.json # TypeScript compilation settings
typings.json # TypeScript package definition file for typings
package.json
README.md
```

## Getting Started

This repository is ready for you to clone and start building your code around it. Simply follow the guide below.

### Prerequisites

1. Clone, fork, or [download](//github.com/Codesleuth/vscode-typescript-boilerplate/releases) the project.
2. You need Node.js. [Go install it][nodejsdownload]
3. Ensure the required dependencies have been installed:
1. You need Node.js. [Go install it][nodejsdownload]
1. Ensure the required dependencies have been installed:
```bash
$ npm install
npm install
```

4. You will need [`typings`][typings] to allow the TypeScript to compile without errors. It's recommended to install this globally:
1. You will need [`typings`][typings] to allow the TypeScript to compile without errors. It's recommended to install this globally:
```bash
$ npm install typings -g
npm install typings -g
```
5. Change to the `src` directory and run `typings install` to fetch the required module type definitions defined in `typings.json`:
1. Change to the `src` directory and run `typings install` to fetch the required module type definitions defined in `typings.json`:
```bash
$ cd src
cd src
# if installed globally (recommended)
$ typings install
typings install
# otherwise
$ ../node_modules/.bin/typings install
../node_modules/.bin/typings install
```
### Building
1. Open VSCode, hit <kbd>CTRL</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>, type `open folder` and select the root of this repository
2. Build with one of the following shortcuts:
* Press <kbd>CTRL</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>B</kbd> to build, which is declared in the `.vscode/tasks.json` file with the `isBuildCommand` marker
* Press <kbd>CTRL</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> and select the `Tasks: Run Build Task` option
* Press <kbd>CTRL</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>, delete the `>` and type `task build`
3. If there were no errors, you should see a new directory, `build`, in the root with the following content:
```
build/
app/
app.js
app.js.map
mymodule.js
mymodule.js.map
test/
app.test.js
app.test.js.map
mymodule.test.js
mymodule.test.js.map
```
1. Build with one of the following shortcuts:
* Press <kbd>CTRL</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>B</kbd> to build, which is declared in the `.vscode/tasks.json` file with the `isBuildCommand` marker
* Press <kbd>CTRL</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> and select the `Tasks: Run Build Task` option
* Press <kbd>CTRL</kbd>/<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>, delete the `>` and type `task build`
1. If there were no errors, you should see a new directory, `build`, in the root with the following content:
```tree
build/
app/
app.js
app.js.map
mymodule.js
mymodule.js.map
test/
app.test.js
app.test.js.map
mymodule.test.js
mymodule.test.js.map
```
### Error Navigation
After building or testing, errors are captured (defined in the `.vscode/tasks.json` file) and can be viewed with <kbd>CTRL</kbd>/<kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>M</kbd>.
Your `.ts` files have been compiled to `.js` files within the `build` directory, and each should have a `.js.map` _sourcemap_ file alongside it to allow stack traces to correctly report the line in the original file. See [this StackOverflow article][sourcemapquestion] for an overview of what a sourcemap is.
### Testing
There are sample tests located in the `test` folder. You can run them by hitting <kbd>CTRL</kbd>/<kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd> (or use the `Tasks` menu and run `Tasks: Run Test Task`)
### Running and Debugging
To run the project in debug mode, simply hit <kbd>F5</kbd>! Place breakpoints in your TypeScript code and view them in the debugger (<kbd>CTRL</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd> or <kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd>).
## Contribute
Yes, that would be great! Open a pull request and we'll go from there!

## License

MIT

[vscode]: https://code.visualstudio.com/
Expand Down

0 comments on commit d56910f

Please sign in to comment.