12 Assistant rules to boost productivity

Image for post
Image for post
Business photo created by jekatarinka — freepik.com

My previous post with Visual Studio Code Assistant received a lots of attention, so i wanted to share with you another set of 12 rules for Angular, CSS and SCSS. You can copy it, or inspire to write your own!

1. Preventing memory leaks in Angular (2 rules)

{
"regex": "unsubscribe\\(\\)",
"message": "Use pipe(takeUntil(this.onDestroy$)) not unsubscribe"
},
{
"regex": "\\.subscribe\\(\\)",
"message": "Don't forget to unsubscribe with pipe takeUntil"
}

These rules are designed to prevent memory leaks in Angular. First one recognizes when unsubscribe is used. Since, i use a base class with this.onDestroy$, all a developer needs to do is use takeUntil(this.onDestroy$). First rule reminds about it.

Second rule is a reminder to unsubscribe. It shows above every line of code that uses subscribe. Since it shows up when the code is written, there is less chance a developer will forget about unsubscribing.

2. Output format helper

{
"regex": "@Output()",
"message": "Usage: @Output() name = new EventEmitter<void>();"
}

Do you know the situation, when you search again and again for a syntax, you tend to forget? This is an example how to handle it. Since i forget \@Output() format often, i just added a Visual Studio Code extension Assistant rule to tackle it. Every time i will write \@Output(), i will see above the line information what is the proper format. I could use snippets for this, but actually i rather like to write it on my own and memorize it faster.

3. Margin and padding order (2 rules)

{
"regex": "margin: ",
"message": "Order: top right bottom left"
},
{
"regex": "padding: ",
"message": "Order: top right bottom left"
}

This is another example of how Assistant can help to recall and memorize syntax. When writing SCSS o CSS, it will remind you what is the order of parameters for margin and padding. It is easy to memorize, but imagine what you can use Assistant for!

4. Common typoes

{
"regex": ": :",
"message": "Spaced double colon syntax error"
}

Sometimes a silly mistake can lead to a bug with an annoyingly confusion description. Since i have noticed it to happen when i wrote : : in my code, i decided to write a rule for this one too. It will save some second next time.

5. Showing hints

{
"regex": "cursor\\?",
"message": "Default value is: auto"
}

This is another way to show a Assistant message. Compared to previous commands it does not show all the time when regular code triggers a rule. I have used here a regex that triggers only when ‘’ phrase shows up in the code. When I will change default cursor in CSS i can write cursor and add question mark at the end. Than, a message will show up. I have decided to show what is the default value for cursor since i forget about it from time to time. I can add more information with time. Also, immediately after removing question mark, the hint dissapears. It is a nice solution to show hints only when you need them. Since Assitant for VSCode is a powerful and flexible extension, you can use any syntax for hints you like.

6. Wrong SCSS, CSS property values (2 rules)

{
"regex": "opacity:\\s*[0-9]*%;",
"message": "Opacity can be a value between 0 and 1, NOT %"
},
{
"regex": "border-radius: unset;",
"message": "Unset is improper value. The proper value is 0"
}

Sometimes, a bad CSS value can cause a a lots of problems. Especially since different browsers handle bad values in various ways. These two rules tackle the issue with providing percentage value for opacity, or setting border-radius to unset. Both values are wrong, but browsers will try to handle them with various results. Most of the time, some browsers will interpret it as you intended it to work, while others not. Since browser testing is important, I like such rules, because they prevent you from going into trouble, before they happen.

7. Browser specific issues (3 rules)

{
"regex": "justify-content: left;",
"message": "Prepend style with justify-content: flex-start; to satisfy IE 11"
},
{
"regex": "justify-content: end;",
"message": "Prepend style with justify-content: flex-end; to satisfy IE 11"
},
{
"regex": "justify-content: space-evenly;",
"message": "Prepend style with justify-content: space-around; to satisfy IE 11"
}

Assistant is the best extension to improve productivity without much effort? Above three rules are result of adjusting of an application to Internet Explorer 11. They are fixes that handle problems IE 11 has. So since i have once fixed such issues, it seems reasonable to put rules into Assistant. That way next time, i will be able to fix IE11 issues before I event start to test application in that browser! Isn’t it nice?

Summary

As you can see these are rules are for front-end development. But Assistant is language-agnostic. I know it is currently used by developers writing also SQL code. In the latest version I have added multi line RegEx support. It allows to detect bugs in SQL queries in realtime. Assistant can be used by Python, C, C#, and any language developers. Frontend, backend developers, iOT developers. You name it.

After a month it is used by 76 developers wordwide. It is amazing result since it was not yet covered in any productivity extensions blog posts. It would be great if more developers started to write about the extension, because it is a game changer if it comes to writing quality code and boosting performance of a developer and the team.

Links

Part 1

Install Assistant

Support Assistant on Patreon for 3$

Written by

Senior software development consultant. Programming for 20 years. TOP 2% of StackOverflow users. 2 million views on Quora. Currently Angular, TypeScript etc

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store