-
Editing Web Content in VS Code
Okay, so it’s not quite as amazing as the title suggests, but this solution is worth sharing.
I work a lot in Bookstack. It’s a fantastic documentation system built with Laravel. I edit all pages in markdown. There is a markdown pane on the left and a preview on the right. I love the UI (shown below) but unfortunately I cannot move around in the editor like I can in PHPStorm or VS Code, where I have Vim support.
I have a Chrome extension called Wasavi, which is incredible for editing text areas in an inline virtual Vim window. Unfortunately, though, it doesn’t show realtime feedback in the preview pane until I save and close out of the virtual editor.
It occurred to me it’d be useful to just pop into VS Code quickly to edit the doc, then bring those edits back into the Bookstack editor in Chrome. At first I dismissed the idea as being “too much work.” After thinking about it for a moment, though, I realized I could MacGyver this relatively quickly with my favorite Mac application, Keyboard Maestro.
Here’s what I came up with. As with most things, I am sure I’ll tweak this over time to make it better, faster, less “error”-prone, etc. I have added a README comment and renamed most actions so it’s (hopefully) easy to understand the approach.
-
Find and Open (in vim) Multiple Files
This is a quick set of examples for finding and opening multiple files in Vim.
1234567891011121314# Open all found files in vimdifffind . -name '.lando.yml' -exec vimdiff {} +# Open all found files, one-by-onefind . -name '.lando.yml' -exec vim {} \;# Open all found files in tabsfind . -name '.lando.yml' -exec vim -p {} +# Open all found files in vertical splitsfind . -name '.lando.yml' -exec vim -O {} +# Open all found files in horizontal splitsfind . -name '.lando.yml' -exec vim -o {} + -
Autocomplete in iTerm2
This is a really quick tip that could save you tons of time in iTerm2. If you use any auto-completion you know how important it is to your workflow. Personally, I rely heavily on omni and generic completion in Vim.
In Vim CTRL-N is the key combination I use after I start typing a word that I know exists somewhere else in the buffer. It pops open a menu where I can choose the match I want. For example, if I have a function called “agileadam_foo”, I can quickly retype that string by typing part of the string (e.g., agi) followed by CTRL-N. If it’s the only match it’ll complete the string, otherwise I can choose which string I want, or type another letter or two and try again. It all happens very quickly, and is almost always faster than typing the string in its entirety.
You can achieve the same functionality in iTerm2 without any special configuration. The built-in key combination is CMD-; (command + semicolon). Here’s the description of the feature from iTerm’s Highlights for New Users guide:
Any text that exists in a tab or its scrollback buffer can be autocompleted in that tab. To use autocomplete, type the beginning of a word and then press cmd-;. An autocomplete window opens showing the top 20 choices for words beginning what what you have entered. The list can be filtered by typing a subsequence. The filter can be reset by pressing backspace. If you make a selection and press return, it will be entered for you. If you make a selection and press tab, your autocomplete will be extended with the selection.
I had a [not-so-] brilliant idea of mapping, in the Keys preference pane for the app, CTRL-N to Select Menu Item… » Open Autocomplete… so that it mimics Vim. Unfortunately, as you might have guessed, it overrode the CTRL-N mapping in Vim. I guess I’ll stick to the default CMD-; for now.
-
Keyboard Maestro – Paste into Vim (with formatting)
Vim users frequently run :set paste and :set nopaste . Using paste mode makes it simple to paste text while maintaining whitespace, but some other aspects of Vim are reset in paste mode (e.g., autoindent and smartindent). I’m sure there’s a way to make it easier to flip back and forth within Vim (via .vimrc), but if you want a universal way to do this, regardless of the Vim settings that are in place, you may find the following Keyboard Maestro macro helpful. -
Finally Happy with an IDE
I’ve been using Vim (yes, their website is painful) almost exclusively as a tool for writing code since 2008. I’ve had many people tell me the benefits of using a good IDE, but have never felt comfortable leaving Vim (and leaving my keyboard, if you know what I mean). I love giving demonstrations and showing people the power of Vim. It’s a great editor, as you probably know.
Recently I started using PHP Storm and really liked what it offers. I do see the benefits of using an IDE. After a quick search I discovered IdeaVim, which is an incredible vim emulation plugin that works for PHP Storm. Its user rating is high, and let me tell you… it works very well. It even handles macros! I do still use Vim (the actual application) on my servers every day, but for anything that requires debugging or is more than “just a php file” I will fire up PHP Storm (where I now still have most features of Vim anyways).
JetBrains is the company that makes PHP Storm. I write a lot of Python and am starting to dabble in some Javascript frameworks. I was happy to discover, through some IDE-shopping and comparing, that JetBrains makes PyCharm (which has a free community edition) as well as WebStorm (which looks robust). Both of these applications also accommodate the IdeaVim plugin! This is a win-win, for sure.
I just installed PyCharm and WebStorm and don’t have much time with them yet, but I’ll try to find the time to update when I have mustered up an opinion of them. I did fire up, in PyCharm, a script I’ve been working on. Right away PyCharm informed me that I was using sys.exit() without first importing sys (the call was within a function that rarely gets used). Once I added import sys to my script I was also happy to see completion suggestions after typing “sys.“
-
Vim in 10 Minutes
This week at my local PHP user group we were speaking about IDEs. There were four of us who prepared to speak to attendees. I wasn’t sure what kind of time I’d be allotted, so I didn’t prepare as I usually do. I figured I’d just give an off-the-cuff introduction to some of the niceties of Vim. It didn’t work out as well as I’d hoped.
About a year ago I did a two-hour Vim talk. I spent a significant amount of time preparing for the talk. The presentation was well-received and, I’d like to think, resulted in a few new Vim users. Why do I mention this? It makes me feel better about the crummy introduction to Vim that I gave last night.
So I’m just throwing this out there… make sure you have more than 10 minutes if you want to introduce someone to Vim. If you have less than 10 minutes, I suggest grabbing a really messy file and cleaning it up using Vim power. This may be enough to spark some interest. Also you may find it beneficial to just point your audience to a YouTube video of a Vim power user working his/her magic. Vim Tutor is another approach.
-
Using Vimdiff with Git
UPDATED: Check out “git difftool” which makes this process much cleaner (than the commands I previously had listed here). Basically, you can tell git what to use as a diff tool and it’ll let you do things like:
12Example 1: git difftool .htaccessExample 2: git difftool HEAD^^ robots.txtHere is how I tell git to use vimdiff (these settings go in ~/.gitconfig):
1234[diff]tool = vimdiff[difftool]prompt = falseHere are some helpful commands that will get you started with vimdiff.
- ctrl+w ctrl+w – switch windows
- do – diff obtain (grab from the other side)
- dp – diff put (move to the other side)
- [c – previous difference
- ]c – next difference
- :diffupdate – (updates the diff)
- :syntax off – syntax off
- zo – open folded text
- zc – close folded text
Lastly, I suggest using the peaksea colorscheme when using vimdiff. It makes it much easier to see the changes and work with them.
-
Using Vim to generate HTML for syntax-highlighted code examples
Recently I was looking for a simple way to embed colorized code snippets into Evernote or VoodooPad. Both of these applications allow HTML-colorized text. I’ve seen a few websites that will generate the appropriate code, but I wanted something I could run locally. As it turns out, Vim makes it a piece of cake. The screenshots tell the whole story. The command is :TOhtml