---

Ⅰ. 插件描述

Edit code that's embedded within other code

Ⅱ. 基本信息

创建日期：  2011-11-13 使用用户：  31 Github星：  71 插件作者：  Andrew Radev

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加:

Plugin 'andrewradev/inline-edit-vim'

… 然后在Vim中运行以下命令:

:source %
:PluginInstall

对于Vundle版本 < 0.10.2，请用上面的Bundle替换Plugin。

使用NeoBundle管理器安装

在你的.vimrc下添加:

NeoBundle 'andrewradev/inline-edit-vim'

… 然后在Vim中运行以下命令:

:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加:

Plug 'andrewradev/inline-edit-vim'

… 然后在Vim中运行以下命令:

:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令:

cd ~/.vim/bundle
git clone https://github.com/andrewradev/inline_edit.vim

Ⅳ. 文档说明

## Problem

Editing javascript within HTML is annoying. To generalize, editing code that's
embedded in some different code is annoying.

Solution

Given the following example:

<script type="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.

What does it work for?

• Javascript and CSS within HTML

  <head>
    <script type="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")

  def some_heavy_query
    execute <<-SQL
      SELECT * FROM users WHERE something = 'other';
    SQL
  end

• Code within fenced markdown blocks

    Some text.
def foo
  puts "OK"
end
def foo():
    print("OK")
Some other text.
pre>
Django blocks in templates (Thanks to @Vladimiroff)
{%  block content %}
<h1>{{ section.title }}</h1>

{% for story in story_list %}
<h2>
  <a target="_blank" rel="nofollow" href="{{ 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")
PYTHON
Vue Single File Components
<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>
Visual mode - any area that you mark