DEV Community: Mateus Amorim

Quick tips to improve productivity with vscode

Mateus Amorim — Fri, 23 Jul 2021 17:39:40 +0000

VSCODE specifics

Workspace snippets

You can create workspace snippets on vscode to make your life easier on a specific project by using the configure user snippets command and selecting create snippets for $currentProject

Examples:

Create a type of file relevant for the project.
Quick import something common.

Snippets variables

You can make different kinds of snippets with the use of the enviroment variables from vscode.

see all snippet variables at: https://code.visualstudio.com/docs/editor/userdefinedsnippets

Examples:

Create a export with the current file name.
Create a log with the current line number and file name as ID.
Create a component with classes and exports based on the current file name.
Create a title for a story for storybook based on the current folder.

Tab snippet completion

At this point I'm not sure if this is the default behavior or not, but you can enable tab snippet completion in vscode user settings

with it you can do less common prefixes and quickly expand then.

For example:

"create file export": {
    "prefix": "ex",
    "body": [
        "export const $TM_FILENAME_BASE = ",
    ],
    "description": "Create a export with the file name"
},

you don't need to wait for it to be suggested, you can just type ex and press tab for the magic to happen :D

NOTE: It may not work well for non-native snippets (created by snippet manager extensions).

Preview suggestions results

You can enable it with the Editor › Suggest: Preview setting, making it easier to see as you don't need to look down and can instead see it directly in the code.

Global auto fixes for files

with the "source.fixAll" option set to true inside "editor.codeActionsOnSave" all available auto fixes will be executed.

Quickly add all missing imports on save

When using typescript you usually have the "add all missing imports" in the quick fixes. You can make its usage easier by setting "source.addMissingImports" to true inside "editor.codeActionsOnSave". You do need to wait for it to see the missing imports before this works though.

Extension specifics

TabNine

For those that don't know tabNine is a amazing autocomplete extension that you can enable to greatly improve productivity.

https://www.tabnine.com/install/vscode

However, a common drawback is that it may eat up some suggestions from the language (typescript types for example). To solve that you can type TabNine::sem anywhere in the code to enable semantic completion for the current language. Effectively getting better suggestions and showing all type based suggestions.

Vetur

If you use vue 2 with the composition API plugin, you can have support for a better typescript experience (with the refactoring tooling, aka: rename symbol, rename imports on file move).

To enable it:

install the VueDX extension
Add the following to tsconfig.json inside compilerOptions

    "plugins": [{ "name": "@vuedx/typescript-vetur" }],

Install @vuedx/typescript-vetur as a dev dependency.
Reload vscode.

NOTE: This might not work for template code, and if you are using different types of components you may face false typing issues with the components key inside the options, which may force you to do so:

components: {
  myComponent: myComponent as any
}

Additionally, you can enable template interpolation and prop validation in vetur settings :)

Understanding primitive vs reference type in javascript and what you can do with it

Mateus Amorim — Sun, 19 Apr 2020 19:11:37 +0000

Intro

Primitive vs Reference types is a very important concept you need to understand to avoid having to deal with strange mutation bugs and also to be able to use references to your advantage.

Primitive types

A primitive type in javascript is any type that, when two instances with the same value are strictly compared (===) it will return true.

ex:

  1 === 1 // true
  'one' === 'one' // true
  null === null // true
  undefined === undefined // true
  Infinite === Infinite // true

In that sense, it doesn't matter where it was declared or used, both will be equal when compared. 1 is always 1, null is always null.

Reference type

Now, for reference types, it is a little different

  NaN === NaN // false
  {} === {} // false
  [] === [] // false
  () => {} === () => {} // false

In this case, even though the structure is the same for both sides, the comparison will always be false, and that is easy to understand why:

NaN

NaN stands for "Not a Number", so it makes sense to return false for the comparison of it since even though both "values" are not a number it doesn't mean that they are the same, even if they originated from the same operation.

  parseInt('asd') === parseInt('asd') // false

Ironically typeof NaN will return number, which is a little confusing since it stands for Not a Number, but let's take parseInt('asd') for example, it returns NaN because even though the result of parseInt should be a number, it cannot be represented in any know way, so basically, NaN is a number that has no know formart.

Objects and Arrays

Both arrays and objects can be seen as collections of keys and values. The main difference is that arrays will use numbers as keys/indexes.

With that in mind, when you compare {} === {} you are actually comparing if both collections are the same, not if both collections have the same items, which is fundamentally different. Like, both collections are empty, but they are not the same. You can have an empty basket, but it is not the same as someone else's empty basket, it is just in the same condition.

  // Not the same collection
  {} === {} // false

  const x = {}

  // Same collection
  x === x // true

This gets tricky in some situations. For example:

Dealing with aliases

  // Let's say you wanted a copy of an abject and did this
  const x = {};
  const y = x;

  // now you want to set a value for this copy
  y.a = 5;

  // however you unintentionally also modified the original, since you assigned the reference, not the values :(
  console.log(x.a, y.a) // 5 5

This may be a simple example, but it's important to take attention to that kind of destructive bahavior, for example:

  const x = [1,2,3];
  const reversed = x.reverse(); // [3,2,1];

  // Looks ok right? However, .reverse modifies the array after being called
  // So if we do this now

  console.log(x); // [3,2,1]
  // We get the reversed array :(

Well, if you were depending on this array for something else in your application, it might stop working after that.

That is why it is a good practice to never modify anything outside the functions that you create and always return a new value instead.

let's also take a look at the different ways you could go about cloning objects and the problems this could cause.

Deconstructing and Object.assign

A common way to clone an object is to use deconstructing like this:

  const x = { a: 1 };
  const y = { ...x }; // same as Object.assign({}, x);

  y.a = 5;

  console.log(x.a, y.a) // 1 5

This will work nice for most of the cases, but the problem arises when we have nested reference types inside it.

  const x = { a: { b: 2 } };
  const y = { ...x };

  y.a.b = 5;

  console.log(x.a.b, y.a.b); // 5 5

Well, we only cloned the values of x, and unfortunately, x had an object inside it that we wanted to modify. This became a problem because the value of x.a is a reference, so the cloned object also points to that same reference. This can be a very bad thing on a large codebase that uses a shared store for example, since you may modify the store without intending to do so and cause side effects in other places.

Object.create

The Object.create() approach is very similar with the deconstructing one. However there are some differences:

  const x = { a: { b: 2 } };
  const y = Object.create(x);

  y.a.b = 5;

  // same result as the deconstructing approach
  console.log(x.a.b, y.a.b); // 5 5

  // However
  console.log(y); // {}

  // Also
  console.log(y.a); // { b: 5 }

What happens here is that Object.create will fallback to x instead of duplicating it. Which can be useful if you want overwrite one value without losing the original reference values and keep it in sync.

Using the JSON stringify and parse

A common approach to solve the deconstructing problem is to use the JSON stringify and parse the result again, creating a new object.

  const x = { a: { b: 2 } };
  const y = JSON.parse(JSON.stringify(x));

  y.a.b = 5;

  console.log(x.a.b, y.a.b); // 2 5 :)

This is a nice approach for simple objects, however, JSON.stringify will not work with functions, complex objects, class instances, and others. (basically, it will not work against things that cannot go to a JSON file). So you may use it with caution :).

What is the best way to clone an object

Well, the "best way" will really depend on what you need. In most cases, you can just use deconstructing. If you want the object inheritance, you can use Object.create, if you want to deep clone simple objects, like an API response, you can use JSON.stringify and JSON.parse, but if really needs to deep clone a complex object, you may need to check the type of each one of its keys and use the desired approach.

How to use reference types to our advantage

Well, we already saw a little bit of that with Object.create.
It only extends the reference so it has access to the original object values even after it changes.

  const x = { a: 1 };
  const y = Object.create(x);

  console.log(y.a) // 1

  x.b = 2;

  console.log(y.b) // 2

This is nice, but a place where this knowledge becomes interesting is when dealing with modules.

for example, let's say I have this simple module:

  //myModule.ts

  export default {};

Ok, now let's see what you can do with it.

  // index.ts
  import state from './myModule';

  state = { a: 5 } // This will throw an error since we cannot modify the module value

  // However, since the value is a reference, we can do this:
  state.a = 1;

  console.log(state) = { a: 1 };

You should probably never do that in production code since you would have no idea of what is in the module, but this can be useful for some quick API for tests, statistics, redefinition of modules functionality and others.

ex: test API

  //server/users.ts

  export default new Map([
    ['1', { id: '1', name: 'bob' }],
    ['2', { id: '2', name: 'foo' }],
    ['3', { id: '3', name: 'bar' }]
  ]);

// server/index.ts
  import users from './users';

  app.get('/users', (req, res) => res.json(state.users));
  app.delete('/users:id', (req, res) => {
    users.delete(req.params.id);
    res.send(200);
  });
  //...

ex: Statistics

  //internal.ts

  export default {}

  // index.ts
  import internal from './internal';

  console.log('asd');
  internal.operationsPerformed.push({name: 'console.log', args: 'log'}});

  process.addListener('SIGINT', () => {
    console.log(internal);
  });
  //...

ex: Redefinition of module

  // myModule.ts

  export default {
    a() {
      throw new Error('you should have never done that');
    }
  }

  // index.ts
  import myModule from './myModule';

  myModule.a = () => {
    console.log(':)');
  }

  myModule.a(); // :)
  //...

Managing and removing duplicated values with javascript Sets

Mateus Amorim — Sat, 18 Apr 2020 19:02:57 +0000

Summary

Sets
Creating a Set
Adding values to the set
Removing values from the Set
Verifying the count of itens in the Set
Verifying if an item is in the set
Resetting the Set
Looping through the set values
Converting set to Array
- Removing objects and arrays duplicates
- The JSON.stringify problem
- Dealing with objects with same values but different key order
- Dealing with classes instances
- Dealing with NaN, null and undefined
- Dealing with Functions
Gotchas
- Vue reactivity
- Proxy a Set
- Primitive and reference types

Sets

Set is a constructor for a javascript collection of unique elements.
It can be used to easily manage lists of ids and other primitive types.

It can be used to write a more semantic code, remove duplicates or record states based on object ids for example.

Creating a Set

You can create a set by using the new keyword and invoking it directly or with a value to use as a base.

const shoppingList = new Set(); // javascript => []
const shoppingList = new Set<string>(); // typescript => string[]
const shoppingList = new Set<string>(['a', 'a', 'b']); // ['a', 'b'] as string[]
const uniqueLetters = new Set<string>(['aab']); // ['a', 'b'] as string[]

Adding values to the set

To add a value to the set you just need to call the .add method. It will not add the item if it is already in the set.

const shoppingList = new Set(['pizza']);
shoppingList.add('meat');

// you can also chain it, but unfortunately you can only pass one value each time.
shoppingList
  .add('meat')
  .add('coke')

If you were using arrays you would need to do something like this each time

// Using arrays this would be equivalent to
const shoppingList = ['pizza'];

if (!shoppingList.includes('meat')) {
  shoppingList.push('meat');
}

So with Set you can make this process a little easier.

Removing values from the Set

To remove a value from the set you just need to call the .delete method. The advantage from the array approach is that it can be applied to any value in the set with ease and the set size is modified after removal, while with arrays you would end up with empty slots.

const shoppingList = new Set(['pizza']);
shoppingList.delete('meat'); // returns false since 'meat' was not in the list. Set stays the same.

shoppingList.delete('pizza'); // Returns true since the element was in the set. The set size is now 0.

This is easier and more semantic than dealing with arrays for cases where the value is in the middle of it.

// Given a base array
const shoppingList = ['pizza', 'coke', 'chocolate'];

// If you wanted to remove the last element it would be simple
shoppingList.pop();

// The first element too
shoppingList.shift();

// But for an element somewhere in the middle it gets a little more complicated.

// You could do this.
delete shoppingList[1]; // But it would create an empty space in the array :(

// So instead you need to do something like this
if (shoppingList.includes('meat')) {
  // Which can be bad as it resets the object reference.
  shoppingList = shoppingList.filter(item => item !== 'meat');
}

Verifying the count of itens in the Set

Different from arrays, where you access the length property, with Sets you need to access the size property instead.

const shoppingList = new Set(['pizza']);
shoppingList.size // 1

Verifying if an item is in the set.

To see if an item is in the set you use the .has method.

const shoppingList = new Set(['pizza']);
shoppingList.has('pizza') // true

With arrays it is also pretty simple

const myArray = ['one', 'two'];

myArray.includes('two') // true

Resetting the Set

you can reset the set by calling the .clear method :)

const shoppingList = new Set(['pizza']);
shoppingList.size // 1
shoppingList.clear();

shoppingList.size // 0
shoppingList.has('pizza') // false

With arrays you could just set it to a new one, but if you wanted to keep the reference intact you would need to use .pop multiple times, so with Sets it is easier.

const x = { a: [1,2,3] }
const myArray = x.a;

x.a = [];

console.log(x.a); // []
console.log(myArray) // [1,2,3] :(

x.a = myArray;

myArray.pop();
myArray.pop();
myArray.pop();

console.log(x.a); // [] :)
console.log(myArray) // [] :)

Looping through the set values

for sets you can use either the .forEach method or for value of mySet.

  const mySet = new Set([1,1,2,3,4,5]);

  mySet.forEach(cb);

  for (const item of mySet) {  // only "of" works. The "in" will not work.
    //... 
  }

Converting set to Array

Converting an array to a set, then converting the set back to an array is a simple trick you can do to remove duplicated values from it :)

To convert from array to set, you just need to pass it in the set constructor argument.

To convert from a Set to an array, you can use Array.from() or deconstructing inside a new array.

const thingsIWant = ['cake', 'pizza', 'pizza', 'chocolate'];
const shoppingList = Array.from(new Set(thingsIWant)); // will output: ['cake', 'pizza', 'chocolate']
const shoppingList = [...new Set(thingsIWant)]; // Same as above, but shorter

Removing objects and arrays duplicates

Objects and arrays are reference-type, which means the Set() will only remove duplicated references, but not structures.

ex:

const x = { a: 1 };
[...new Set([x, x])] // Will result in [x]
[...new Set([x, { a: 1 }])] // Will result in [x, {a: 1}]
// same for arrays...

A simple workaround over that is JSON.parse and .map

ex:

const x = { a: 1 };
[...new Set([x, { a: 1 }].map(JSON.stringify))].map(JSON.parse); // [{ a: 1 }]

There are some downsides:

it will not work if you have the same structures but with different property order (ex: {a: 1, b: 2} and {b: 2, a: 1})
JSON.stringify will convert functions to undefined
JSON.stringify converts NaN to "null"
JSON.stringify returns undefined for undefined, but JSON.parse can't handle that.
JSON.stringify will not work properly with classes and others

The JSON.stringify problem

Ex:

const x = [undefined, null, NaN, true, 'asd', {a: 5}, () => {
  console.log('a')
}, new Set(['asd', 'bbb'])].map(JSON.stringify);

console.log(x) // [ undefined, "null", "null", "true", "\"asd\"", "{\"a\":5}", undefined ]

x.map(JSON.parse) // will throw an error parsing the first value

One possible solution here would be to remove those undefined values and add it back later after parsing everything:

  const x = [undefined, 'asd', true, false, { a: 1 }, { a: 1 }];

  // map to json so we don't remove valid falsy values
  const jsonX = x.map(JSON.stringify); // [ undefined, "\"asd\"", "true", "false", "{\"a\":1}", "{\"a\":1}" ]

  // Create the set to remove duplicates
  const uniqueJsonX = [...new Set(jsonX)] // [ undefined, "\"asd\"", "true", "false", "{\"a\":1}" ]

  // Now we remove the values that cannot be parsed. Since we conveted false to "false" before, this will only remove non-parseable values.
  const parseableJsonX = uniqueJsonX.filter(v => v); // [ "\"asd\"", "true", "false", "{\"a\":1}" ]

  // Now we can parse the array with JSON.parse to get our "original" values back :)
  const parsed = parseableJsonX.map(JSON.parse); // [ "asd", true, false, {…} ]

  // And finally, if you want to also add undefined values to the set again.
  const parsedWithInvalid = x.filter(v => !v)];

  // Or if you want to add functions and others that were removed too
  const parsedWithInvalid = x.filter(v => !JSON.stringify(v)];

  const uniqueX = [...new Set([...parsed, ...x.filter(v => !v)])]; // [ "asd", true, false, {…}, undefined ]

Well, this solves most of the problems mentioned. But what about objects with different order, functions and classes instances?

Dealing with objects with same values but different key order

To solve this problem we need to add a new step to the solution above. In this case, to quickly sort the object values, we can map it with Object.entries, sort, then join it back with Object.fromEntries

const myObject = {c: '3', b: '2', a: '1'};
const myObject2 = {a: '1', b: '2', c: '3'};

const myArr = [myObject, myObject2].map(item => {
  return Object.fromEntries(Object.entries(item).sort());
}).map(JSON.stringify);

console.log([...new Set(myArr)].map(JSON.parse)); // [{ a: '1', b: '2', c: '3'}]

Dealing with classes instances

Classes instances may behave in an unexpected manner when going trought JSON.stringify(), like:

const x = new Date();
console.log(JSON.stringify(x)); // will output date string instead of [object Date]

const y = new Set([1,2,3,4]);

console.log(JSON.stringify(y)); // {} 🤔

It may work however if you have a simple object-like class, but in general it is not safe to include those in the set to remove duplicates.

I would recomend separating at the start of the approach mentioned before, then, creating a new set for it (in case you want to remove duplicated instances) and joining it in the result at the end.

  const base = [undefined, 'asd', true, false, { a: 1 }, { a: 1 }, new Set([1,2,3], new Date())];

  const state = {
    notParseable: []
    parseable: []
  };

  for (const key in base) {
    const isObject = typeof base[key] === 'object';
    const isSimpleObject = isObject && base[key].toString() !== '[object Object]';

    if (!base[key] || isSimpleObject) {
      state.notParseable.push(base[key]);
      continue;
    }

    state.parseable.push(base[key]);
  }

  // ...

  return [...result, ...[...new Set(state.notParseable)]];

Dealing with NaN, null and undefined

to remove duplicates of those, the same approach as the solution above can be used :).

In this case we remove it from the values that will go trought JSON.stringify and create a separated set for it, then join it in the end.

Dealing with Functions

With functions you can also filter it beforehand and remove duplicated references.

a = () => {};

new Set([a, a]) // Set [ a() ]

However, if you want to compare between inplementations, for whatever the reason, it would probably be better to do that in the array, like this.

const x = [() => {}, () => {}];

const uniqueFunctions = [];
const stringifiedFunctions = [];

for (const f of x ) {
  if (!stringifiedFunctions.includes(f.toString())) {
    uniqueFunctions.push(f);
    stringifiedFunctions.push(f.toString);
  }
}

Gotchas

Vue reactivity

Vue.js is not reactive to Sets, so you need to manually update the component you are using to $forceUpdate after modifying the set

Proxy a Set

Sets are incompatible with Proxy() so you cannot add a global getter/setter for it, but you can still use Object.defineProperty in it.

Primitive and reference types

Sets will work better with primitive types, like string and numbers, but they could also be used with reference types, like objects and arrays, as long as the object reference is the same or you do some of the transformation to the values.

ex:

 const list = [];
 const listItem1 = { foo: 'bar' };
 const listItem2 = { foo: 'bar' };

 // if you do
 new Set([listItem1, listItem1]) // you will get a set with just [listItem1]

 // But if you use 2 different references, even if the values are the same
 new Set([listItem1, listItem2]) // you will get a set with [listItem1, listItem2];

How to improve your console experience on windows

Mateus Amorim — Tue, 12 Nov 2019 16:37:52 +0000

On windows you have many options, you can use git-bash, cmd, wls (to use Linux on the cli) and Powershell. While wsl is nice, I personally wanted to use a native option so I wouldn't have to wait too much for the console start-up and didn't want to deal with the file paths being different.

The usual cmd.exe isn't very powerful so I chose the PowerShell instead. If you want to live on the edge you can also install its beta version

https://github.com/PowerShell/PowerShell/releases

And hey, if you ever need to use bash or wsl, as long you have it installed, here is a nice trick:

Open up Powershell and type:
- bash to switch to git-bash
- ubuntu to switch to the ubuntu installed on wsl
- cmd to switch to the usual cmd.exe
Type exit to go back to PowerShell (or the previous console, since you can do it on cmd too)

This not only lets you use the commands for a different shell fast but also preserves the path you are in, so you can easily open your project using open with vscode in a folder for example, then switch to wsl if needed

The PowerShell `$profile`

Powershell has a profile file that is loaded when you open the terminal, it can be accessed with the variable $profile, you can type code $profile if you have VScode. This will open the profile file for you.

With that, you can now set up a lot of things to be loaded every time you open PowerShell.

Powershell Modules

Here are some interesting things to get started:

Those modules should make your life easier and also add some things windows is missing regarding autocompletion, themes and etc.

Creating aliases

The next thing to do would be creating your own aliases for things you do a lot, for that we have 3 simple options: functions, variables and Set-Alias.

There are some modules that may implement some for you already, but I personally like to make my own, so I remember them better.

let's start with a basic one:

Set-Alias g git

this will alias the git command to a g command. It isn't very helpful in this case, but you get the concept. It has the limitation of not working with commands with parameters, so something like this:

Set-Alias gp git pull

will not work :/, but for that, we can use functions instead:

function pull {
  git pull
}

pretty simple, no? If you add this after the imports of your $profile file, next time you load powershell you will be able to just type pull (or whatever you want) instead of git pull.

if you still want to be able to add the branch you can use parameters like so:

function pull($a,$b) {
  git pull $a $b
}

But that is not really good since you might want to add even more parameters. For that, we can use the $args variable instead.

function pull {
  git pull $args
}

Now everything we pass to the pull command will be also passed to the git pull command.

If you want to run multiple commands it's also pretty simple:

function sync {
  git pull
  git push
}

This is pretty trivial for now, but I'll share more useful ones after.

let's see what variables can do. Variables in PowerShell are prefixed with $ and to declare them you just need to do: $foo = "bar" and you get the string bar every time you use $foo.

A useful thing to do with it is to store the current project path in a variable so in the future you can do code $project, cd $project or explorer $project

To get the current project path we need to type Get-Location in PowerShell.

you can store it on a temporary variable by using $myVar = Get-Location directly on the cli or you can copy-paste it into the profile file so you can use it later. A temporary variable can be very useful if you want to navigate to a lot of places with the cli during an operation.

now that you know about those you can start doing some useful functions and variables:

Getting the current path

# Everytime you open the console, the initial path will be stored here.
$cwd = Get-Location

# Alias for Get-Location
function path {
  Get-Location
}

Improving git experience:

On git there is a very useful variable called HEAD, it represents the current branch and we can use it to make life easier.


# A even simpler version of the git pull alias
function gp {
  git pull $args
}

# Sync git changes
function sync {
  git pull
  git push
}

# This will push and set-upstream to the remote branch
function pup {
  git push --set-upstream origin (git symbolic-ref --short HEAD)
}

# If you have an issue tracker and need to follow a naming pattern a function 
# like this may help you out. It will create the branch and checkout to it
function issue($jiraId, $title) {
  git checkout -b your_name/$jiraId-$title
}

# This one gets more advanced with some parameter validation. 
# I'm not an expert on PowerShell so I can't give much information on it, but 
# it should be pretty simple to understand.

# It will force push the current branch to a Heroku QA branch 
# based on the number of the QA branch.
function qa {
  param(
    [Parameter(Mandatory=$true)]
    [Int]
    $qaBranch
  )

  echo('deploying current branch to qa' + $qaBranch)
  git push origin HEAD:qa$qaBranch --force
}

Some other ideas to explore

A function for configuring Heroku env variables (so you can easily set-up qa, staging and production common variables).
NPM related functions
modules install packs
commit patterns