When I started in the code world, I was so happy typing every single character. Nowadays I realized that I was rewriting the same sentences during a regular workday. Moreover, when I switch from one project to another one, I realized I was solving similar problems. Sometimes I didn’t remember the solution, so I was forced to get back Google and visit those purple results to find answers to the same questions. In this post, I’ll be talking about several automation tools that will help you to start thinking more with fewer keyboard typing. Let’s start with some definitions. Before start explaining everything related with code automatization, some concepts need to be clarified. This will allow us to talk the same language. , this term refers to a set of static code that can be used as a starting point. It’s similar to copying and pasting some code from the framework documentation and start creating new features. As examples of tools you have the command line tool for Angular ( ), React ( ) and VueJS ( ). Boilerplate boilerplate ng new myApp npx create-react-app my-app vue create my-project , this term is similar to but for a small amount of code. It helps developers type less. Some ID’s give support for this feature, check these useful snippet generators: The snippets plugin and the of the JetBrains team. Snippet boilerplate visual studio code live templates , in software it refers to a set of analyzing tools that alert the user about possible problems with their source code during the coding process. Linter or lint , it refers to the process of generating tools that execute tasks without the help of human intervention. When we are creating code, this process should be automated using an ID plugin or a command line tool. Automation How to begin The first step to start automating a process is to define what needs to be improved. This post is about code, so the things that could be automated are the following: . Are you bored of reading the project documentation about the or if you need a line break before each . The code standards ; { . Are you tired of writing the same lines when creating a new javascript class?. Each project has a different architecture, but everyone follows designs patterns. The bootstrap for a new file . What about a dynamic snippet to make that cool alignment?. Do you need to create a store like service in Angular?. What if you need a javascript closure?. The typing repetition of the same piece of code . How many times did you write: , , , ?. Besides, how many times did you make a typo while writing in the console? The command line commands $ cd /documents/my-projects/javascript $ git status $ git checkout origin master $ git pull origin master Did you solve something in the past that now you forgot? Finding the solutions to known problems. With those points in mind let’s start finding a solution for each one. The code standards This is my favorite part. Which should be the best style guide for each project?. Most of the projects like to follow the guidelines described by , or a mix with some extra custom rules. Therefore, how do you automate this process? Google Airbnb The first approach here is to write all those rules into a configuration file of a linter tool. It allows us to see some errors directly in the ID while typing. Most developers use as a linter tool. ESLint Linter tools could be enough. However, What if you want to have a standard formatting rule in all of your projects?. is an automation tool that rewrites all the code according to the formatting rules described in a configuration file. It gives support for most of the development editors and can be executed at any time. Prettier The rules defined for the developer team of Google and Airbnb are public through their GitHub repositories. If you want to take a look or use it as a boilerplate in your own project, take a look and . here here The bootstrap for a new file and the typing repetition of the same piece of code I merged this two points because the solution of both could be created with the same tools. Let’s begin with the command line tools created by the team of each framework. Those tools allow developers to generate new javascript classes according to the schema suggested by the provider. It could be good enough, but come on, who knows a project that completely follows that schema?. That’s why I think each developer should dedicate some time automating the code generation for their projects. One approach to start automation your code are snippets. Let me explain how snippets work. First, you need to identify one portion of code that you repeat every time. Second, you select the snippet tool of your preference. Third, you create the template. Let’s create one: Suppose you found the reduce method is a common task of your project. Let’s create a snippet code for this task using the live template of IntelliJ. As you can see you define the required variables (inside ), specify the static text and generate the desired behavior after you fill in all the variables. Cool! $var$ As an example of those custom schemas, I want to refer the work of my friend , he creates a set of for unit testing of Angular applications. In the same way, John Papa creates a nice visual studio code focusing on Angular development. Edwin live code templates plugin The command line commands All developers need to use the command prompt. After you open it, the first thing you do is navigate to the desired folder. This could be easily automated with an Alias. Let’s take a look: Suppose you want to navigate to folder. company/projects/my-project Inside your add the following lines. .bash_profile alias goToProject="cd ~/ " company/projects/my-project Next time you open the bash and type , it will navigate to the desired folder. goToProject Do you hate the graphic interfaces and are in love with the use of Git at the console?, simply add the following lines to your and your love will grow (for more information go .) .bash_profile here As an extra feature, if you want to have the name of the branch next to the path of the file, you need to add the following code to the .bash_profile Finally, What about the typos?. How many times did you write: or . There is a cool plugin called “ ”. It helps fix your typos by typing . Awesome!. git brnch $ phuton theFuck fuck Finding the solutions to known problems Some people like to navigate through StackOverflow thread each time they have a problem. I found it was a repetitive task. To find a solution to this problem, I stored all those URLs in a single spreadsheet with a small description. I have to be honest, that table was a mess after the first hundred links. Doing a bit of research, I found different services ( , , , and ) to generate code and previsualize it on the browser. I pick Codepen as my Vanilla projects repository and Stackblitz for my Angular and Typescript projects. Those tools help me not only replicate the problem but visualizing a working solution. For example, I always forget the difference between currentTarget and target. So I created : JsFiddle JsBin plunklr Stackblitz Codepen this Next time I need to remember it, I just go to my dashboard on Codepen. projects I created as my personal library. 🍻 Here you can find different Conclusion Every time you write something twice, please be lazy and automate your code. Thanks for reading, please follow me on Medium and or send me a connection request on . Twitter LinkedIn

AirBnB

CodePen

Google

Target

Twitter

2022 - HackerNoon Contributor of the Year - Learning

2022 - HackerNoon Contributor of the Year - Quantum Computing

Nominated for 2022 - HackerNoon Contributor of the Year - Quantum Computing

Nominated for 2022 - HackerNoon Contributor of the Year - Learning

Too Long; Didn't Read

Coding Automation Lesson #1: Please Be Lazy

Coding Automation Lesson #1: Please Be Lazy

Too Long; Didn't Read

Companies Mentioned

@xthecapx

RELATED STORIES