loiane / angular-extension-pack-vsce

This extension pack packages some of the most popular (and some I find very useful) VS Code Angular extensions.

Visual Studio Code Angular Extension Pack

This extension pack packages some of the most popular (and some I find very useful) VS Code Angular extensions.

These are all the extensions I also recommend using for my free Angular training in Portuguese.

Extensions Included

Angular + Angular Material + NgRX + RxJS Code Snippets

• Angular Snippets - Angular with TypeScript snippets.

• Angular Material 2, Flex layout 1, Covalent 1 & Material icon snippets - Angular Material and Angular FlexBox component snippets.

• Angular File Changer (Supporting Touch Bar and NgRx) - Navigate between Angular component's relative files or NgRx files using your Mac Touch Bar or keyboard.

• 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

Testing

• SimonTest - Analyzes your Angular code and generates unit tests for you (can overwrite spec files generated automatically with Angular CLI).

• Karma Problem Matcher - Capture errors from Karma tests running in Visual Studio Code, so test failures will show up in 'Problems' pane (Ctrl+Shift+M on Windows/Linux, ⇧⌘M on Mac) and the failing test can also be made known to VS Code, eg. highlighted with squiggly lines, jumping to it with F8.

Template Productivity

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

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

• Auto Close Tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text.

• Arrr - a tool to refactor components from HTML templates

Productivity

• Auto Import - Automatically finds, parses and provides code actions and code completion for all available imports (altough VSCode has auto import funcionatlity, this plugin is a great complement).

• Paste JSON as Code - Convert a JSON from clipboard to TypeScript interfaces.

• Prettier - JavaScript formatter - format your Javascript / Typescript / CSS - specially for Angular, I recommend adding the following config in you users setting for VsCode. Recommended settings:

  • "prettier.singleQuote": true (this helps when using auto import extension or the VSCode auto import functionality).
  • "prettier.tabWidth": 2 (angular lint uses 2 spaces as default indentation). With this setting, you can continue using tabs if it is your preference
  • "prettier.useTabs": false (same as above)

• Path Intellisense - VSCode has a very good auto import capability, but sometime you still need to import some files manually, and this extension helps a lot in these cases.

• Move TS - this is a great extension to help you refactor and re-organize some files and components in the project. It automatically fixes the imports on the file (or component folder) that is being moved and also files that are importing the component you are moving. To use it: right-click on a file or folder in the Project Explorer pane and select 'Move TypeScript'.

• Angular Schematics - this extension allows you to launch Angular schematics (CLI commands) from files Explorer (right-click) or Command Palette.

• Angular-cli - This extension eases the use of the Angular cli in Visual Studio Code.

Code Analysis

• ESLint

• TypeScript Hero - Favorite feature for Angular projects: sorts and organizes your imports according to convention and removes imports that are unused (Ctrl+Alt+o on Win/Linux or Ctrl+Opt+o on MacOS).

Workbench

• EditorConfig for VS Code - EditorConfig Support for Visual Studio Code (must have plugin for VSCode)

Other extensions recommended, but not included in this package

• angular2-inline - support for inline HTML and CSS in angular components. I don't use inline templates, but this is a helpful extension in case you use inline HTML or CSS.

• NgBootstrap Snippets - if you need Bootstrap 4 support in you angular project, this extension has some helpful snippets.

• vscode-icons - my favorite collection of icons for VSCode projects!

• Git History (git log) - allows you to view git history with graph and details

• snippet-creator - helps you creating code snippets (saves snippets in the User Snippets in VSCode)

Happy Coding!

angular-extension-pack-vsce's Issues

TSLint (deprecated)

vscode-tslint (deprecated)

Note: This extension has been deprecated in favor of the vscode-typescript-tslint-plugin. To learn about the differences between vscode-tslint and the new extension please refer to this document.

Productivity Extension: Angular-cli

Hi @loiane,

I was wondering if you can add the Angular-cli extension?

This extensions allows you to create components, services., pipes.. from the explore menu using the angular cli. A real productivity booster in larger projects. 🚀

Angular-cli

Broken Context Menu Actions?

I'm wondering if the right-click/context menu actions (i.e. "ng g component", "ng g directive", etc.) are broken, possibly with a recent VS Code update?

I was originally working on a Windows desktop and these options were listed, but on my Windows laptop these context menu actions don't display, despite also having this extension pack installed here.

Just confused because the various "Barrel" commands remain visible, but these are now gone.

The YouTube video that suggested this extension implied this feature was included in the pack, so I'm sorry if I'm mistaken

HTML Snippets is deprecate

this message is shown in the project readme

DISABLING THIS EXTENSION SOMETIMES CONFLICTS WITH EXTENSIVE EXTENSION OF THE VS CODE HTML

Support extension pack revisited

Start using extensionPack instead of extensionDependencies, as shown here so that we can disable specific extensions, as specified on the docs for the latest VS Code Update.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.

Productivity Extension: Angular File Changer

Hi @loiane,

Wondering if you'd consider adding Angular File Changer in addition to or in replacement of angular2-switcher. It has similar functionality, but also has Mac Touch Bar and NgRx support.

Angular File Changer Marketplace Link