Editing javascript within HTML is annoying. To generalize, editing code that's embedded in some different code is annoying.
Given the following example:
<scripttype="text/javascript">$(document).ready(function(){$('#foo').click(function(){alert('OK');});})</script>Execute :InlineEdit within the script tag. A proxy buffer is opened with
only the javascript. Saving the proxy buffer updates the original one. You
can reindent, lint, slice and dice as much as you like.
Check the docs for more information, see the examples directory for some
example files to try it on.
If you like the plugin, consider rating it on vim.org.
Javascript and CSS within HTML
<head><scripttype="text/javascript">$(document).ready(function(){$('#foo').click(function(){alert('OK');});})</script><style>body { color: blue; background-color: red; } </style></head>
SQL within ruby (matches "<<-SQL")
defsome_heavy_queryexecute<<-SQL SELECT * FROM users WHERE something = 'other'; SQLend
Python multiline strings (tries to guess SQL syntax) (Thanks to @thalesmello)
sql_query=""" SELECT name FROM "Students" WHERE age > 10"""print("""Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex eacommodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillumdolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.""")
Code within fenced markdown blocks
Some text. ``` ruby def foo puts "OK" end ``` ``` python def foo(): print("OK") ``` Some other text.Code within reStructuredText code blocks
Some text. .. code-block:: ruby:linenos:deffooputs"OK"endSome other text.
Django blocks in templates (Thanks to @Vladimiroff)
{%blockcontent%} <h1>{{ section.title }}</h1> {%forstoryinstory_list%} <h2> <ahref="{{ story.get_absolute_url }}"> {{ story.headline|upper }} </a> </h2> <p>{{ story.tease|truncatewords:"100" }}</p> {%endfor%}{%endblock%}
Heredocs in shellscript (Thanks to @fewaffles)
cat <<-RUBY #! /usr/bin/env ruby puts "OK" RUBY cat <<PYTHON #! /usr/bin/env python3 print("OK") PYTHONVue Single File Components (Thanks to @fvictorio)
<template> <p>{{ greeting }} World!</p> </template> <script>module.exports= {data:function () {return { greeting:'Hello' } }}</script> <style scoped>p {font-size: 2em;text-align: center;}</style>
Angular components' CSS and templates (Thanks to @MartinAskestad)
@Component({selector: 'my-component',template: ` <p class="my-p">My component works!</p> `,styles: [` .my-p { color: orange; } `,],})- Visual mode - any area that you mark
To get the plugin working in vscode-neovim, you can try this fork that implements some vscode-specific features: https://github.com/thalesmello/inline_edit.vim/tree/vscode.
Pull requests are welcome, as long as they did not involve LLM usage. Take a look at CONTRIBUTING.md for details. Be sure to abide by the CODE_OF_CONDUCT.md as well.