PrimeNG Quickly for VS Code

Created for PrimeNG Quickly release

This extension for Visual Studio Code includes a lot of primeNG elements that allow you to quickly add snippets in Typescript and HTML files if you install PrimeNG in your Angular applications. Currently snippets for form, button, data, panel, overlay, file, menu and chart elements are available, but will be updated frequently for other primeNG elements. Stay tuned !!!

Overlay and Menu and Chart Elements Added

See the CHANGELOG for the latest changes

Download

Download the extension from Visual Studio Marketplace.

Usage

Type part of a snippet, press tab, and the snippet unfolds.

Alternatively, press Ctrl+Space (Windows, Linux) or Cmd+Space (macOS) to activate snippets from within the editor.

Features

• Quick Access: Quickly add PrimeNG components to your project.
• Ease of Use: Snippets automatically generate the basic usage of components.
• Up-to-Date PrimeNG Support: Compatible with the latest versions of PrimeNG.

Requirements

• Visual Studio Code: Version 1.10.0 or higher.
• Angular Project: An Angular project with PrimeNG installed (snippets will work, but PrimeNG dependency is required for components to render).

Installing PrimeNG

To use the extension, you need to install PrimeNG in your project. Follow these steps:

1. Open a terminal and navigate to your project directory.
2. Run the following command to install PrimeNG, Prime Themes, PrimeIcons and PrimeFlex(optional) :

Using npm

npm install primeng @primeng/themes primeicons primeflex

Using yarn

yarn add primeng @primeng/themes primeicons primeflex

Using pnpm

pnpm add primeng @primeng/themes primeicons primeflex

CSS Import

Import the following files into style.css or style.scss

@import "primeflex/primeflex.css"; @import "primeicons/primeicons.css";

Configuring PrimeNG

To configure PrimeNG with animations and a theme, update your application configuration as follows:

import { ApplicationConfig } from '@angular/core';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';

export const appConfig: ApplicationConfig = {
    providers: [
        provideAnimationsAsync(),
        providePrimeNG({
            theme: {
                preset: Aura
            }
        })
    ]
};

Available PrimeNG Components in Snippets

Form Components AutoComplete, CascadeSelect, Checkbox, ColorPicker, DatePicker, Editor, FloatLabel, IconField, InputGroup, InputMask, InputNumber, InputOTP, InputText, KeyFilter, Knob, ListBox, MultiSelect, Password, RadioButton, Rating, Select, SelectButton, Slider, TextArea, ToggleButton, ToggleSwitch, TreeSelect,

Button Components Button, SpeedDial, SplitButton

Data Components DataView, OrderList, OrgChart, Paginator, PickList, Table, TimeLine, Tree, TreeTable, VirtualScroller

Panel Components Accordion, Card, Divider, Fielset, Panel, ScrollPanel, Splitter, Stepper, Tabs, Toolbar

Overlay ConfirmDialog, ConfirmPopup, Dialog, Drawer, DynamicDialog, Popover, Tooltip

File Upload

Menu Breadcrumb, ContextMenu, Dock, Menu, Menubar, MegaMenu, PanelMenu, Steps, TieredMenu

Chart Chart

Snippets for the following components will be added very soon.

• Messages, Media, Misc

Extension Installation

1. Install Visual Studio Code 1.10.0 or higher
2. Launch Code
3. From the command palette Ctrl-Shift-P (Windows, Linux) or Cmd-Shift-P (OSX)
4. Select Install Extension
5. Choose the extension
6. Reload Visual Studio Code

Credits

This plugin was created with artificial intelligence support. Thanks to the free services of the following AI language models, the laborious work is made much easier.

• Le Chat - Mistral AI
• Grok 3
• ChatGpt
• Deepseek
• Phind

Plugin logo created by Canva

• Canva - Free Online AI Image Generator