Is There a Way (Or a Plugin) to Make Vim Generate a Code Outline for CSS

Is there a way (or a plugin) to make Vim generate a code outline for CSS?

Consider using code folding instead. It's similar to outlining, in that you have fewer lines to look at to get an idea of the overall structure, but it hides most of the code until you unfold the part you want to read in detail or edit.

Using Vim, how can I make CSS rules into one liners?

Here's a one-liner:

:%s/{\_.\{-}}/\=substitute(submatch(0), '\n', '', 'g')/

\_. matches any character, including a newline, and \{-} is the non-greedy version of *, so {\_.\{-}} matches everything between a matching pair of curly braces, inclusive.

The \= allows you to substitute the result of a vim expression, which we here use to strip out all the newlines '\n' from the matched text (in submatch(0)) using the substitute() function.

The inverse (converting the one-line version to multi-line) can also be done as a one liner:

:%s/{\_.\{-}}/\=substitute(submatch(0), '[{;]', '\0\r', 'g')/

Handle minified Javascript/CSS in Vim

The LargeFile plugin (also referenced by answers suggested in the comments) adapts many Vim options to make it faster when a huge file is loaded.

In your case, it's not so much the total file size, but the extremely large (single) line. I would call that a mutilation, even a bug, because it severely impacts editing (regardless of the editor). In my opinion, that should be changed so that there's no necessity to directly edit the resulting file, only the contributing source (with the short, readable lines), and to join them in the build process.

Your screenshot already shows the effect of :help 'synmaxcol'; the coloring stops somewhere. I'd usually recommend to reduce that further, but you've already reported problems with :syntax off, which is an even bigger hammer to wield.
The slowness (in syntax highlighting and otherwise) is usually caused by regular expressions that spend a long time digesting the line. These could be used by indent or fold expressions, for example.

:setlocal indentexpr= foldexpr=

might be worth a try. For further troubleshooting, setting 'verbose' to a high value and checking what's happening is a good idea.

For a good editing experience, it would be best to convert the long line to multiple shorter ones. A 'formatprg' specific to CSS, or alternatively a quick :substitute should do the job, and still keep the CSS syntax intact. If you don't want to persist that change, the original line could be stored and restored prior to saving. With :autocmd BufWrite{Pre,Post}, this could even be fully automated, but that implementation effort will only be worth it if you have to edit these files often, and no other solution is possible.

How do I collapse sections of code in Visual Studio Code for Windows?

Folding has been rolled out and is now implemented since Visual Studio Code version 0.10.11. There are these keyboard shortcuts available:

• Fold folds the innermost uncollapsed region at the cursor:

  • Ctrl + Shift + [ on Windows and Linux
  • ⌥ + ⌘ + [ on macOS

• Unfold unfolds the collapsed region at the cursor:

  • Ctrl + Shift + ] on Windows and Linux
  • ⌥ + ⌘ + ] on macOS

• Fold All folds all regions in the editor:

  • Ctrl + K, Ctrl + 0 (zero) on Windows and Linux
  • ⌘ + K, ⌘ +0 (zero) on macOS

• Unfold All unfolds all regions in the editor:

  • Ctrl + K, Ctrl + J on Windows and Linux
  • ⌘ + K, ⌘ + J on macOS

---

References: https://code.visualstudio.com/docs/getstarted/keybindings

What's a quick way to comment/uncomment lines in Vim?

I use the NERD Commenter script. It lets you easily comment, uncomment or toggle comments in your code.

As mentioned in the comments:

for anyone who is confused by the usage, default leader is "\" so 10\cc will comment ten lines and 10\cu will uncomment those ten lines

How to highlight the - symbol in my coffee.vim syntax file?

If the -> so far isn't matched by any other syntax group, it should be as simple as

:syntax match coffeescriptArrow "->"
:highlight def link coffeescriptArrow Special

If you don't want to modify the original syntax file, put this into ~/.vim/after/syntax/coffeescript.vim.

---

Related Topics