{Please be lazy}

Coding Automation Lesson #1

{Thecap}

From "Programadores Anónimos"

Welcome to my talk

# INTRODUCITON

Context

When I started to coding

# INTRODUCITON

Evolution

I realized that I was rewriting the same sentences everyday.

# INTRODUCITON

Evolution

I was solving similar problems.

Sometimes, I was forced to return to my search engine and visit those purple results to find answers to the same questions.

# INTRODUCITON

About the talk

I’ll talk about some automation tools that will help you focus on the problem with fewer keystrokes.

Definitions

Boilerplate

Refers to a set of static code that can be used as a starting point.

ng, cra, npx, vite*

1.

2.

Snippet

Similar to boilerplate but for a small amount of code.

emmet, vsCode, live templates Jet Brains

3.

Linter

A set of analyzing tools that alert the user about possible problems with their source code during development time.

# DEFINITIONS

{question}

How can I generate the boilerplate to start a new project, find an appropriate solution and spend less time in the search engine?

{AUTOMATION}

# SUMMARY

To highlight errors:
- Eslint everywhere
- You should consider: Rome || JShint
Auto formatting
- Prettier
- You should consider: Rome || Eslint (autoformatter)
Company standards
- Google, Airbnb
Git hooks.
Documentation!
- The solution log
- Your source of truth

{TL;DR}

Stop wasting time reviewing code standards in a PR.

Take some time to setup an appropriate set of tools

Code standards:

# CODE STANDARDS

Source: Google JavaScript Style Guide

Code standards:

# CODE STANDARDS

Source: Google JavaScript Style Guide

Automate the rules with Eslint

{
  "Function Component": {
    "prefix": "fc",
    "body": [
      "interface $1Props {",
      "\t$2",
      "}",
      " ",
      "const $1: FunctionComponent<$1Props> = ($3) => {",
      "\treturn ( $0 );",
      "}",
      " ",
      "export default $1;"
    ],
    "description": "Function Component"
  }
}

# HOW TO CREATE SNIPPETS

vsCode Snippet: snippets-ts.json

{creativity}

Create the snippets with common problems you have.

Ideas

Context + Typescript

Create your own context with placeholder types.

1.

2.

Responsive grid CSS

CSS snippet to create a grid Layout, including the HTML container.

3.

Async Testing

Initial boilerplate to test your async component, including the setup for a specific framework.

# CHAPTER 2

import {Command} from '@oclif/core'

export default class World extends Command {
  static description = 'Say hello world'
  static examples = [
    `<%= config.bin %> <%= command.id %>
hello world! (./src/commands/hello/world.ts)`,
  ]
  static flags = {}
  static args = []
  async run(): Promise<void> {
    this.log('hello world! (./src/commands/hello/world.ts)')
  }
}