nathanwalker / nativescript-ng2-vscode-snippets

Snippets for NativeScript + Angular 2 Development.

NativeScript + Angular Snippets for Visual Studio Code

Now compatible with Angular 4.x and above.

This JSON file contains snippets for all NativeScript UI components and some frequently used attributes specifically for use with nativescript-angular.

All UI components are prefixed with ns. Attributes do not have a prefix.

###UI Components

From within TypeScript Component Files:

• Component with inline template - nscomponent_template
• Component with templateUrl - nscomponent_templateUrl

The following can be used inside both TypeScript and HTML view files:

Layouts

• Absolute Layout - nsabsolute
• Dock Layout - nsdock
• Flexbox Layout - nsflexbox
• Grid Layout - nsgrid
• Stack Layout - nsstack
• Wrap Layout - nswrap

Widgets

• Action Bar - nsactionbar
• Action Bar with Back Button - nsactionbarback
• Label - nslabel
• Text Field - nstextfield
• Secure Text Field (for passwords) - nspassword
• Text View - nstextview
• Image - nsimg
• Border - nsborder
• Button - nsbtn
• Search Bar - nssearchbar
• Switch - nsswitch
• Slider - nsslider
• Progress - nsprogress
• Activity Indicator - nsloading
• Date Picker - nsdate
• Time Picker - nstime
• List Picker - nslistpicker
• Segmented Bar - nssegmentedbar
• Tab View - nstabview
• List View - nslistview
• Web View - nswebview

###Attributes

• cssClass - css
• text - text
• icon - icon
• tap - tap
• textWrap - wrap
• horizontalAlignment - halign
• verticalAlignment - valign
• visibility - visibility
• stretch - stretch
• keyboardType - kbtype
• colSpan - colspan
• rowSpan - rowspan
• row - row
• col - col
• width - width
• height - height

How to use?

1. Inside Visual Studio Code press

   CTRL + P

2. Type the following in the console window

ext install nativescript-ng2-snippets

3. Hit enter.

nativescript-ng2-vscode-snippets's Issues

ns prefix snippets not work in template: ``

For example, if I want to put in template: ``

@component({
selector: "my-app",
template: ``
})

if I type nslable in ``, it doesn't prompt.

VSCode highlighting tags in red that it does not recognise

it appears this issue recently started, but here is a screenshot.

It appears that the recognised tags such as label or button are ok, as well as any tag with a dash in it. Where as the nativescript ones are red or random gibberish tags will be red too. (this issue is not only present for the dark theme)

Add NavigationButton

Just thought I'd help you remember to add this snippet.

XML Self closing template parse error

Template parse errors:
Only void and foreign elements can be self closed "Label" ("[ERROR ->]

When using for example nslabel:
<Label text="App Component" color="white" textWrap="true" />

instead it has to be:
<Label text="App Component" color="white" textWrap="true" ></Label>

Use classes from default theme throughout

👍

Auto-complete stops working periodically

In the example below the auto-complete worked fine for the outer StackLayout but then stopped working for the inner label:

                                <StackLayout>
                                    nslabel
                                </StackLayout>

This happens regularly. It works on one line but then stops on the next. The app is Nativescript with Angular using Kinvey. Versions listed below. Please let me know if you need any other info. This bug is rather distracting.

VSC Version: 1.38.1
Commit: b37e54c98e1a74ba89e03073e5a3761284e3ffb0
Date: 2019-09-11T13:31:32.854Z
Electron: 4.2.10
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Darwin x64 18.7.0