Finding the code editor or IDE (from now on I'll be referring to both) that is the best match for you is one of those unexpected rites of passage that every developer goes to in the journey of learning how to code. In my case, I started learning programming with python some 9 years ago, I remember jumping from one editor to another in a weekly basis, the first one was IDLE, and from the top of my mind, I remember trying Boa Constructor, Komodo, and Notepad++ to name a few.
In this process of finding your go-to editor, you learn about the editor war and start understanding the several inside jokes about Vim and Emacs.
It is at this point where you decide to learn either Vim or Emacs, and your journey down the rabbit hole begins.
By the title of this post, you have already guessed that my preferred editor is Vim, but I'm not going to try and sell you into it or convince you to spend countless hours modifying your current development environment to adapt it to use Vim.
My goal for this post is to share the customizations I have implemented in order to efficiently use Vim as my main editor for web development projects.
Personally, I try to use as few plugins as possible, I only install them when the benefit they bring to the table are tangibles and it really improves my workflow.
At the moment the plugins I have installed are the following:
- indentline & vim-jsx-pretty
- ALE (eslint & prettier)
Emmet is an amazing tool for high-speed coding and editing, it allows you to create complex HTML structures with one line of code.
These are two plugins for improving the visual style of Vim.
indentline adds vertical lines to easily show indent levels, and
vim-jsx-pretty highlights JSX code for when you are for example working with ReactJS.
This plugin allows you to comment/uncomment code easily, you just select the code you want and press <g-c>.
ALE (Asynchronous Lint Engine), allows you to use linters and fixers making your life a lot easier, is one of those things that you don't think you need until you try. In my case, I'm mainly using ALE to enable prettier while using Vim.
Stubborn as I am, I wanted this functionality while working with Vim, and while there are several plugins that can implement this, I decided to go on another route.
In this case I decided to implement an editor agnostic solution, basically what we need in this case is to run a local server, watch the files for any modification and update the page on the server every time a file updates.
It sounds more complicated than it really is, we just need to install and run browser-sync inside our project folder.
I'm assuming you already have
nodejs installed in your system, so let's go ahead and install
npm install -g browser-sync
browser-sync we can run it inside any folder in our system and it will create a local server (automatically displaying the default index.html file you have in the folder).
browser-sync start --server --files .
If you're working inside Linux (and you should), you can create an alias to simplify the process of running the server. Open up your
.bashrc file inside your home folder and add the following.
# Command line alias to start the browser-sync server alias serve="browser-sync start --server --files ."
In my case, I went one step further in order to access the server inside my private network and test the webpage on several devices.
# browser-sync config # Get the current local IP address export SERVER_IP=`hostname -I` # The command alias to start the browser-sync server alias serve="browser-sync start --server --files . --no-notify --host $SERVER_IP --port 9000"
Thanks for reading!.