DEV Community: Terry Li

18 basic git commands you don't want to miss

Terry Li — Mon, 23 Nov 2020 23:25:56 +0000

I do use some GUI to run git, but for most basic and simple actions I prefer using cli as it is way faster. Here is a summary of my most used git commands.

Create a new branch and tracking remote branch

git checkout -b branch_name origin/branch_name

See status

git status

Stage a file

git add file_name

Unstage a single file

git reset file_name

Stage all files

git add .

Unstage all files

git reset

Discard un-staged changes of a single file

git checkout file_name

Discard all un-staged/staged changes

git reset --hard

Commit staged changes

git commit -m 'commit message'

Add and commit all changes in one step

git commit -am 'message'

Diff between un-staged files and staged files

git diff

Diff between staged files and HEAD

git diff --cached

See commits

git log

Diff between HEAD and its previous commit

git diff @^ @

Diff between any commit and its previous commit

git diff commit_hash^ commit_hash

Reset to a commit and keep the changes un-staged

git reset commit_hash

Reset to a commit and discard the changes

git reset commit_hash --hard

As always: bonus

Add change to the previous commit but without having a new commit

git commit --amend --no-edit

That's it. Hope you enjoy it!

Most used ZSH shortcuts for moving cursor

Terry Li — Sun, 18 Oct 2020 07:45:53 +0000

I use iterm2 + zsh to deal with all the command lines. Here I want to share my most used shortcuts for moving cursor.

ctrl + a  move to the beginning of the line
ctrl + e  move to the end of the line

alt + f   move to the next word
alt + b   move to the previous word

ctrl + k  cut till the end of the line
alt + w   cut till the beginning of the line

ctrl + w  cut the previous word
alt + d   cut the next word

Bonus

ctrl + -  undo previous change

This is it. Hope you enjoy it!

Pro tips of using ES6 destructuring assignment and spread operator

Terry Li — Tue, 26 May 2020 22:54:16 +0000

Destructuring assignment and Spread operator are my favorite ES6 features. Today I want to show you two pro tips that you can use to write clean code.

Remove unwanted properties

Sometimes you might need to write a function to convert an object to a different structure, and you might want to remove some properties from the object as you don't need them. Instead of directly deleting the properties from the object, you can use object destructuring to remove unwanted properties. See the code below.

function makeVeggieBurger(hamburger) {
  // 😞
  delete hamburger.meat
  return hamburger

  // 😃
  const { meat, ...veggieBurger } = hamburger
  return veggieBurger
}

Here it uses object destructuring on hamburger, and gets meat property and puts all the other properties in veggieBurger. When it returns veggieBurger, it returns a shallow copy of hamburger without meat. This approach avoids mutating the original object, but achieves the same result with only a line of code.

Conditionally add properties to an object

Continue with the example above, but this time we add a new parameter isSpicy to indicate if we want to add chili to the burger. If isSpicy is true, we want to add chili property to veggieBurger, but if isSpicy is false, we don't want to have chili property at all. See the code below.

function makeVeggieBurger(hamburger, isSpicy) {
  const { meat, ...veggieBurger } = hamburger

  // 😞
  if (isSpicy) {
    veggieBurger.chili = 'hot'
  }
  return veggieBurger

  // 😃
  return {
    ...veggieBurger,
    ...(isSpicy && { chili: 'hot' }),
  }
}

Let's take a close look at this

return {
  ...veggieBurger,
  ...(isSpicy && { chili: 'hot' }),
}

If isSpicy is true, it will be like

return {
  ...veggieBurger,
  ...(true && { chili: 'hot' }),
}

which is

return {
  ...veggieBurger,
  ...{ chili: 'hot' },
}

And as we spread it, it becomes

return {
  ...veggieBurger,
  chili: 'hot'
}

This is how you add chili to the returning object.

If isSpicy is false, it will become

return {
  ...veggieBurger,
  ...(false && { chili: 'hot' }),
}

which is

return {
  ...veggieBurger,
  ...false
}

and when you spread false, it returns nothing, so this expression becomes

return {
  ...veggieBurger,
}

which essentially is

return veggieBurger

So we won't have chili at all. This approach will make you code much cleaner especially when you add multiple properties conditionally.

That's it. I hope you find it helpful. Feel free to let me know if you have any questions. You can also find me on twitter.

My top 10 VS Code shortcuts you don't want to miss

Terry Li — Thu, 30 Apr 2020 23:19:51 +0000

As a keyboard guy, I'd like to leverage all kinds of shortcuts as much as I can. It is especially true when it comes to coding. VS Code has been my favorite code editor for years, and I really love the way it allows me to use and customize shortcuts. Today I picked my top 10 super awesome shortcuts. Check it out!

1. Go to last edit location `⌘K ⌘Q`

Sometimes when I write the code, I need to pause a bit and go to different files to check other things. And after that, I need to quickly go back to the place where I was editing. This shortcut makes the move so easy.

2. Go to bracket `⌘ ⇧ \`

Sometimes I want to quickly go to the end of a block to add some new code, and I can put the cursor on the opening bracket and type ⌘ ⇧ \ to jump to the closing bracket. This works better than scrolling down and visually searching the matching bracket. This also works when you want to jump from the closing bracket to the opening bracket.

3. Select to bracket

No default shortcut. I use ⌥ \

This one allows me to quickly select everything between brackets. It is super handy when you want to copy or move some code out of a block.

VS Code doesn't have a default keybinding for this, so to enable it, you can type ⌘ ⇧ P to open command palette and go to Open keyboard shortcuts (JSON), and paste the code below.



{

  "key": "alt+\",

  "command": "editor.action.selectToBracket",

  "args": { "selectBrackets": false }

}

Go to matching pair

No default shortcut. I use ⌘ H

Similar to go to bracket, this allows you to quickly go to the matching tag. I really love this when I am writing React components, as I can easily move to the opening or closing tag and add new code from there.

Again, this one doesn't have a default shortcut. You can add the code below to enable it.



{

  "key": "cmd+h",

  "command": "editor.emmet.action.matchTag"

}

Go to the previous file `⌘ P P`

I use this shortcut A LOT. Say I open file-A, and then switch to file-B, and if I want to go back to the file-A, I cannot really use go back, because go back is cursor-based. I cannot use go to the last edit location either as I haven't changed anything. So in such case, I hold ⌘ and press P twice and release ⌘, it will bring me to the previous file.

6. Go to symbol in editor `⌘ ⇧ O`

Say I am looking at a file and I want to quickly jump to a function in the file, I can use this shortcut and type the name of the function, then hit enter to jump to it. This is quicker and more accurate than using Find.

7. Toggle column selection mode

No default shortcut. I use ⌘ ⇧ I

This is super cool when I want to add/remove code on several consecutive lines. Instead of using the mouse to do multi cursor selection, I type ⌘ ⇧ I to turn on the column selection mode and then hold ⇧ and press arrow keys to select multiple lines to edit. After finish it, I type the shortcut again to turn off the column selection mode.

You can add the code below to enable it.



{

  "key": "shift+cmd+i",

  "command": "editor.action.toggleColumnSelection"

}

Focus on Files Explorer

No default shortcut. I use ⌥ ⌘ J

I use this shortcut to focus the current file in the explorer, so I can rename it or create a new file in the same folder. This is really handy as I don't need to click the mouse or manually look for the file in the file tree.

You can add the code below to enable it.



{

    "key": "alt+cmd+j",

    "command": "workbench.files.action.focusFilesExplorer"

  }

Organize imports `⇧ ⌥ O`

Sometimes as I refactor the code, I might have some unused imports at the beginning of the file. Instead of manually deleting them, I use this shortcut to do the job automatically. This one also re-orders the imports to make them look clean.

10. Add all missing imports `⌘ .`

This shortcut is actually for quick fix. I found there is an option that allows you to add all the missing import statements, so you don't need to add them one by one. This option is available in typescript files.

That's it. I hope you enjoy this post.

Feel free to ask me any questions. You can also find me on twitter.