In search of the perfect autocomplete for CSS
Forget about any of your AI nonsense, I’m talking good ol’ autocomplete.
CSS differs than most other frontend languages/dialects I write in that its declarative nature lends itself to strumming out a bunch of property/value pairs that an autocomplete can often do the heavy lifting for. 3-4 keystrokes gets you the equivalent of 20-30 characters. Ben, what are you talking about? Let me show you with the editor most people these days are likely familiar with, VSCode:
This mv4 shows me typing out a basic rule. Notice how ‘width’ gets quickly completed, and pressing enter jumps me to the property, if that is easily ‘completable’ I can just hit enter again, or I can type out what I want, and it adds the semi-colon at the end to complete the property value pair (a declaration).
Right hold that thought. This is also the model for CSS autocompletion used in two Neovim autocompletion plugins I want to show you. First, cmp.nvim, the current de facto autocomplete plugin.
Notice the same pattern? Property quickly autocompletes, enter takes you to the value, which you then enter or chose from the list, and enter adds the semi-colon.
And its the same with the new (beta as I write), blink.cmp autocomplete plugin, here I am doing the same kind of operation using that.
This is fine and its no hardship to use, but there is something a little better.
Sublime is, well sublime
Consider what Sublime Text does differently. Here is the same kind of operation, but notice the subtle difference…
Can you see what happens there? After selecting or entering the value, with the caret just before the semi-colon, a press of enter gives you the new line, but crucially keeps the semi-colon where it should be at the end of the line, without you needing to move past it before pressing enter.
That’s so much nicer, as 99% of the time (genuine statistic, honest) that is what I want, and it saves that extra movement to the right of the semi-colon before pressing enter.
Sublime I feel has the best experience here, and it is admittedly a small thing, but I really notice it when it is there. It’s the kind of consideration that Sublime displays throughout. It remains a phenomenally well made piece of software.
While it is unlikely I can make any dent in what the behemoth VSCode chooses to do, I can at least ask the question at those other two Neovim plugin repos:
- cmp.nvim discussions CSS, enter on value end, can it keep semi-colon and put cursor on new line?
- blink.cmp discussions CSS, enter on value end, can it keep semi-colon and put cursor on new line?
Leave a Reply