Git Product home page Git Product logo

vscode-typescript-boilerplate's Introduction

vscode-typescript-boilerplate

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

Project Structure

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)
  • Debug settings (currently a bug is preventing this from being reliable)
  • Type definitions provided by tsd
  • Custom type definitions ready for your own declarations

Project Structure

.vscode/
    launch.json     # Defines launch tasks for debugging etc.
    tasks.json      # Defines tasks available e.g. build & test
    
custom_typings/     # Place your custom typings within this directory
    tsd.d.ts        # Custom typings should be added to this file, e.g.:
                    #   /// <reference path="mymodule.d.ts" />
                    
src/                # The root of all TypeScript source code
    lib/
        mymodule.ts # A sample module
        
    test/
        app.test.ts # A sample test
        
    _ref.d.ts       # The root type definition file.
                    #   Reference this in all your TypeScript files.
                    
    app.ts          # The main entry point for the project.
    tsconfig.json   # TypeScript compilation settings
    
package.json
README.md
tsd.json            # TypeScript package definition file for tsd

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 the project.

  2. You need Node.js. Go install it

  3. Ensure the required dependencies have been installed:

    $ npm install
  4. You will need tsd to allow the TypeScript to compile without errors. It's recommended to install this globally:

    $ npm install tsd -g
  5. Run tsd install to fetch the required module type definitions defined in tsd.json:

    # if installed globally (recommended)
    $ tsd install
    
    # otherwise
    $ ./node_modules/.bin/tsd install

Building

  1. Open VSCode and select the root of the repository as the project folder
  2. Build with one of the following shortcuts:
  • Hitting CTRL/Cmd+Shift+B to build, which is declared in the .settings/tasks.json file with the isBuildCommand marker
  • Press CTRL/Cmd+Shift+P and select the Tasks: Run Build Task option
  • Press CTRL/Cmd+Shift+P, 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:
build/
    lib/
        mymodule.js 
        mymodule.js.map
    test/
        app.test.js
        app.test.js.map
    app.js
    app.js.map

Error Navigation

After building or testing, errors are captured (defined in the .settings/tasks.json file) and can be viewed with CTRL/Command+Shift+M.

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 for an overview of what a sourcemap is.

Testing

There's a sample test located in the test folder. You can run them by hitting CTRL/Command+Shift+T (or use the Tasks menu and run Tasks: Run Test Task)

Running and Debugging

To run the project in debug mode, simply hit F5! Place breakpoints in your TypeScript code and view them in the debugger (CTRL+Shift+D or Cmd+Shift+D).

Contribute

Yes, that would be great! Open a pull request and we'll go from there!

License

MIT

vscode-typescript-boilerplate's People

Contributors

codesleuth avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.