npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@objectivity/angular-schematic-ide

v11.0.0

Published

Configures IDE, adds common extensions and configurations

Downloads

8

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

objectivityltdobjectivityltdkamilbuczekkamilbuczekslupekdevslupekdev

Keywords

schematicsangularangular clivscodeobjectivity

Readme

Angular schematic ide

Configures IDE, adds common extensions and configurations.

Overview

ng add @objectivity/angular-schematic-ide

Options

VSCode

Getting Started

ng add @objectivity/angular-schematic-ide --vscode

  • Restart VS Code. It prompts a user to install the recommended extensions when a workspace is opened for the first time. The user can also review the list with the Extensions: Show Recommended Extensions command.

    default_extensions

Extensions Included

  • Debugger for Chrome - Must have extension for Angular development. You can debug using chrome and add your breakpoints in VSCode. Tutorial on how to use can be found on VSCode docs.

  • TSLint - linter for the TypeScript language, help fixing error in TS code. By default auto fixing tslint errors on save is enabled.

  • Angular Language Service - provides a rich editing experience for Angular templates, very useful when working on Angular HTML template.

  • Angular 8 Snippets - Angular with TypeScript snippets.

  • Vscode-icons - provides lots of icons for Visual Studio Code.

  • EditorConfig for VS Code - EditorConfig Support for Visual Studio Code.

  • angular2-switcher - Easily navigate to typescript(.ts)|template(.html)|style(.scss/.sass/.less/.css) in angular projects.

    • alt+o (Windows) or shift+alt+o (macOS)
    • by default VSCode opens file not opened from file explorer in 'preview' mode. When using this extension, I also recommend the following setting: workbench.editor.enablePreview": false

  • Auto Import - Automatically finds, parses and provides code actions and code completion for all available imports.

  • Auto Rename Tag - Auto rename paired HTML/XML tag.

  • Bracket Pair Colorizer - allows matching brackets to be identified with colours.

  • Sass Lint - integrates the sass-lint linter into VS Code.

  • Sort Typescript Imports - integrates the sass-lint linter into VS Code.

  • Code Spell Checker - A basic spell checker that works well with camelCase code.

Debugging

Start Debugging

  • Set a breakpoint in app.component.ts on the line that sets the title property of AppComponent. To set a breakpoint, click on the gutter to the left of the line numbers. This will set a breakpoint which will be visible as a red circle.

    vscode_debug_1

  • Open a terminal at the root folder and serve the app using Angular CLI:

    npm start

  • Go to the Debug view, select the 'ng serve' configuration, then press F5 or click the green play button.

  • The app will be shown in a browser, but in order to hit the breakpoint you'll need to refresh the browser.

    vscode_debug_2

  • You can step through your source code (F10), inspect variables such as AppComponent, and see the call stack of the client side Angular application.

Debug Unit Tests

  • Set a breakpoint in app.component.spec.ts on a line in one of the unit tests.

  • Open a terminal at the root folder and run the tests using Angular CLI:

    npm run test

  • After the test run, go to the Debug view, select the 'ng test' configuration, then press F5 or click the green button.

  • When a browser opens with the test list, click the link for the test in which you placed the breakpoint. You should then hit the breakpoint: vscode_debug_tests