Write Angular code 10x faster
Tags: angular, vscode, webdev, productivity
Published: 2020-02-28 04:31:03

In today's age speed is a thing. Speed is a necessity. In this blog i will tell you a secret to write angular code 10x faster :fast_forward: :fast_forward:.

## Prerequisites :grey_question:

* Visual Studio code
* You should be working in Angular :stuck_out_tongue_closed_eyes:

If you are not having VSCode, you can download it [here](https://code.visualstudio.com/) for free.

## Angular & Component sharing :ballot_box_with_check:

In angular, we can have multiple reusable components. `Eg:` You can create the below list of components which are commonly used across the application and it enables sharing and faster development.

:arrow_down: Some of the commonly used components like :arrow_down:

* Blade
* Modal
* Any common filters used across the application.
* Shared components that generate Charts/ Graphs etc.


## :pray: How VS-Code can help :checkered_flag: 

When you are starting out on a new project or application, initially we will focus on getting the common components out first. Once we have developed the common components, we can easily keep on re-using it across the entire application.

Let's say we need `blade` on multiple areas of the application. While development instead of typing the entire `snippet`, we can make vscode to automatically insert the whole component HTML code for us.

## How to create snippets? :information_source:

1. Open Visual Studio Code.
2. Open the desired project or workspace. `[Optional]`

    The second step is optional because some people prefer to create snippets which applies to a particular workspace or specific project.

3. Type `F1` on your keyboard and type `User Snippets`

    ![User Snippets](https://imgur.com/download/0YfWsi9)

4. Press `Enter` and vs code will prompt for selection of a language. Since we are developing snippets for Angular proceed to choose `HTML`

    ![HTML.json](https://imgur.com/download/pRqpVFd)

5. Once you have selected `html.json` it will open a json file, in which we are going to make some changes.
6. The syntax for the `snippet.json` will be something like this

    ```json
    {
        "snippetName":{
            "prefix":"your-shortcut-name",
            "body":[
            // Your full HTML content to be inserted
            ]
        }
    }
    ```

7. Using the help of this syntax you can insert whatever you want to inside your HTML in an efficient and fastest way.

**NOTE: Each line inside the `body[]` should be enclosed within `""` string notation.**

## My snippet shortcuts

Here are my top snippets for creating something very quickly.

### :zap: Blade :zap:

```json
"app-blade": {
		"prefix": "blade",
		"body": [
			"<app-blade>",
			" <div bladeHeader>",
			" </div>",
			" <div bladeContent>",
			" </div>",
			" <div bladeFooter>",
			" </div>",
			"</app-blade>"
		]
	}
```

### Kendo Grid 

```json
{
    "KendoGrid": {
		"prefix": "k-grid",
		"body": [
			"<kendo-grid [data]=\"data\"",
			"            [filterable]=\"true\"",
			"            [pageSize]=\"10\"",
			"            [skip]=\"0\"",
			"            [kendoGridSelectBy]=\"'id'\"",
			"            [selectedKeys]=\"selectedKeysIndexes\"",
			"            [resizable]=\"true\"",
			"            [sortable]=\"true\">",
			"",
			"</kendo-grid>"
		],
		"description": "KendoGrid"
	}
}
```

I have a much bigger list since I am working on an enterprise application, we have a lot of sharable components that we tend to keep re-using.

I found this highly useful and improves our workflow and the way we write code. My team found it very useful.

If you are reading this, I hope this will definitely help you as well.

Happy coding :collision::collision:

Thanks for reading. :pray: :pray:
 Stay tuned for more interesting stuffs :fire::fire::fire::fire: