Tag Archives

2 Articles

Best Plugins for JavaScript development in Vim

JavaScript development in Vim

Are you doing JavaScript development in Vim? Are you struggling to get setup with the right plugins? I’ll share the plugins I’m using with you. I’ll group them so you know which are Javascript/ Typescript specific, and which are just general developer plugins that I like. If you have some plugins that you really like and you don’t see them here, let me know in the comments 🙂

I’m a big vim+tmux fan, so I’ll probably do another post about how I have my stuff setup! Thanks for reading! Checkout the video if you want to see the plugins in action.

Github link


JavaScript Plugins

Plugin ‘othree/javascript-libraries-syntax.vim’
“more javascript syntax

Plugin ‘ruanyl/vim-fixmyjs’
” autofix eslint errors

Plugin ‘jelera/vim-javascript-syntax’
” syntax highlighting 5/5

Plugin ‘flowtype/vim-flow’
” flow typings

Plugin ‘leafgarland/typescript-vim’
” syntax for typescript

Plugin ‘moll/vim-node’
” gf to open files from require and imports 5/5

Plugin ‘mtscout6/syntastic-local-eslint.vim’
” gets eslint to use the local version of eslint in a project

Plugin ‘marijnh/tern_for_vim’
” Autocomplete / symbol renaming

Plugin ‘Quramy/tsuquyomi’
” rename symbols, lookup, imports etc

General Developer Plugins

Plugin ‘VundleVim/Vundle.vim’
” plugin manager

Plugin ‘Valloric/YouCompleteMe’
” autocomplete 5/5

Plugin ‘scrooloose/nerdtree’
” file browsing 5/5

Plugin ‘mileszs/ack.vim’
” searching

Plugin ‘ctrlpvim/ctrlp.vim’
” find files 5/5

Plugin ‘tpope/vim-surround’
” surround with tags or blocks 5/5

Plugin ‘tpope/vim-fugitive’
” git integration 5/5

Plugin ‘scrooloose/nerdcommenter’
” comment out in multiple languages 5/5

Plugin ‘scrooloose/syntastic’
” syntax checking 5/5

Plugin ‘editorconfig/editorconfig-vim’
” editor style rules 5/5

Plugin ‘Shougo/vimproc.vim’
” async vim commands

Plugin ‘vim-scripts/marvim’
” macro manager

Plugin ‘mbbill/undotree’
” visual undo history

Plugin ‘SirVer/ultisnips’
” snippet manager

Plugin ‘honza/vim-snippets’
” bunches of snippets

Plugin ‘tpope/vim-repeat’
” makes the vim repeat option handle more complex things

Plugin ‘terryma/vim-multiple-cursors’
” type in multiple places

Plugin ‘Chiel92/vim-autoformat’
” Autoformat 5/5

Visual alterations

Plugin ‘vim-scripts/ShowMarks’
” shows where your marks are

Plugin ‘altercation/vim-colors-solarized’
” dope colorscheme

Plugin ‘vim-airline/vim-airline-themes’
” themes for airline

Plugin ‘edkolev/tmuxline.vim’
” tmux statusline generator

Plugin ‘christoomey/vim-tmux-navigator’
” seamless tmux navigation

Plugin ‘vim-airline/vim-airline’
” airline indicators

Plugin ‘edkolev/promptline.vim’
” more airline related stuff

3 Basic Programming Concepts You Need to Know

Let’s start with the basics

Basic Programming Concepts

There are many concepts in programming and computer science which are very important and extremely useful. I encourage you to supplement my post with research, but hopefully you find the 3 basic programming concepts in this post are very clearly important to learning programming. Before we dive into the basics, first you need to make sure you know what programming is.

What is programming

Warning! Over simplifications ahead! 🙂 Programming is how humans talk to computers. Computers are machines that can only do exactly what we tell them to do. When we program, we are giving the computer instructions.

What does the computer do with the instructions?

The computer uses electricity to perform our instructions. All of our instructions end up telling the computer how it should handle the flow of electricity. Humans use these instructions to get the computer to manipulate information. Computers can only use the instructions they are built with. To learn more, research Machine Code.


People have built tools to help them talk to computers. Just like we have translators for speaking to people who don’t speak our language, we have translators for computers. When you program, you will be writing instructions that these translators understand. The translators will the convert your code into instructions the hardware can execute. We call these translators interpreters and compilers.  Make sure you lookup the differences. We call the languages these translators understand programming languages

Basic Programming Concepts

Now that you know you’re talking to the computer, you should be wondering what you’re talking to it about. Generally when we program we are describing information: how to store it, how to manipulate it,  how it’s structured, how to present it, etc.

Information is all around us! Information could be the names of all your friends. It could also be all of the dishes a local restaurant serves. Programming gives you the power to handle vast amounts of available information and do whatever you can imagine with it.

Mystery #1 – What concept is this?

Here’s a concept, written in the Javascript programming language.

var name = 'Micah';
var age = 2;

How about the same example in the Python programming language?

name = "Micah"
age = 2
What is all this nonsense?


You might be wondering, why var, why ‘Micah’, why ; WHAT IS HAPPENING!?! Don’t freak out. This is called “syntax”.

Programming languages have rules, the same way we have rules for how to write English sentences. The semi-colon indicates the end of a line. Some languages, like python, don’t need it. Just like English, programming languages change over time, gaining new ways of writing the same concepts.

BASIC PROGRAMMING CONCEPTs #1 – Storing Information

You may have deduced from the examples, that I was storing the word “Micah” and the number “2”. If not, no worries. This stuff is weird. Go look at it again… This concept of associating a value with a name is called assigning a variable.

We are assigning “Micah” to the variable name. As we should, because my name is Micah. Remember clear variable names make your code easy to read and reason about.

We are also assigning the value 2 to the variable called age. Unfortunately this is not my actual age.  Let’s fix that.

Mystery #2 – What concept is this?

Here’s a new concept written in a language you’ve seen before.

var name = 'Micah';
var age = 2;
age = age + 21;

How about the same example in the Python programming language?

name = "Micah"
age = 2
age = age + 21
Okay, I’ve seen addition before…

Fantastic! Addition is a great thing to know! The concept is that we’re manipulating some information that we’ve previously stored. Age is changing from it’s previous value to it’s previous value increased by 21.


From the examples you probably saw that I was changing age from 2 to 23. After we store information into variables we often perform operations on them, like addition in the case of numbers. The symbol that indicates an operation is often called an operator. Different types of information handle these operations differently. Programmers can define their own operators, as well as their own types just like they can define variables.

When programmers define their own operations, they tend to be grouped into something called functions. A function is a reusable mapping of some input to some output. For instance, say you have a function called addTwice. It takes in two numbers and outputs the numbers added to each other twice.

function addTwice(firstNum, secondNum) {
 return firstNum + secondNum + firstNum + secondNum;

If this looks crazy to you

  • the word function is a keyword, which tells a programming language, hey, I’m about to tell you something. Var is also a keyword 😉
  • addTwice is the name of the function
  • (firstNum, secondNum) This is how we define the inputs a function can have.
  • Once an input is defined, you can use it inside of the {} block. This will become more clear
  • return is how you output something from a function.
  • addTwice(5,2); This is how you use the function.

PS – If you’re wondering why age isn’t equal to “age + 21”, the words, then congrats. You just realized why we need to use a signifier like quotes around words that aren’t variables.

When would I need to make a function?

If you have some code that you’re copy and pasting, or if you have something that’s a bunch of steps that can be described in a higher level than the steps, try making a function for it. Imagine you have some code that is transferring money between you and a friend, and you want to let others use this code. You could create a function called transferMoney. It would take in 3 parameters, amount, fromPerson, toPerson. After making this function you can now facilitate payments between any two people, without ever changing your code. Re-usability is very important in programming.


Here’s a new concept written in TypeScript. Javascript with types.

class Person {
 name: string;
 age: number;

How about the same example in the Python programming language?

class Person: 
 name = ""
 age = 0
Classes? What I’m trying to learn, now I gotta take a class?

Don’t get caught up on that word. What’s in the class? How would you know that? In Javascript things inside the {} are called blocks. Generally things in blocks are related to the code preceding the block. In python blocks are determined by indention, following a colon. So everything that’s indented after the colon is considered a block. Go research blocks. Hint: They’re used for grouping instructions.

Basic Programming Concepts #3 – Structuring INFORMATION

Imagine you had 100 people, and you wanted to store their names and ages. In our first set of examples, you would have tried to make a variable for each person for age and name.

var name1 = 'Micah';
var age1 = 2;
var name2 = 'Matt';
var age2 = 100;
var name99 = 'Fonzy';
var age99 = 800;

Now that you’ve seen the example, you might guess that “classes” allow us to describe information with multiple properties. Instead of a  variable holding one piece of information, ‘Micah’, it can hold a name and an age.

var writer = new Person();
writer.name = 'Micah';
writer.age = 2;

Take a moment to pat yourself on the back. You’ve just consumed quite a large amount of information. If you’ve managed to make it this far, and you feel completely lost, don’t freak out. There’s hope. You aren’t going to learn this stuff in one day. You’ll need to mess around with it. I’ll work on getting some interactive code up for everyone.


Just make sure you learn :

  1. In programming we store information
    1. variables store information
  2. In programming we manipulate information
    1. functions are blocks of code that take in input and produce output
  3. In programming we structure information
    1. blocks are used to group instructions
    2. classes are used to create structured data.
  4. Google everything. Research. This should be a good starting point.
  5. Dont give up. It’s okay to be confused. It’s okay if it doesn’t work. Keep trying.
  6. Tweet me if too confused, or if you have questions I’ll try to help you. @micahriggan

Thanks for reading!