---

Ⅰ. 插件描述

changes a JavaScript anonymous function to an arrow function expression (ES 2015)

Ⅱ. 基本信息

创建日期：  2015-06-15 使用用户：  10 Github星：  15 插件作者：  Mark Volkmann

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加:

Plugin 'mvolkmann/vim-js-arrow-function'

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

:source %
:PluginInstall

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

使用NeoBundle管理器安装

在你的.vimrc下添加:

NeoBundle 'mvolkmann/vim-js-arrow-function'

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

:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加:

Plug 'mvolkmann/vim-js-arrow-function'

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

:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令:

cd ~/.vim/bundle
git clone https://github.com/mvolkmann/vim-js-arrow-function

Ⅳ. 文档说明

# vim-js-arrow-function

This plugin provides two functions related to
JavaScript arrow functions.

The JsAnonFnToArrowFn function converts JavaScript anonymous functions
to arrow function expressions (introduced in ES 2015).

It converts this:

function (p1, p2) {
  // some code
}

to this:

(p1, p2) => {
  // some code
}

and converts this:

function (n) { return n * 2; } 

to this:

n => n * 2

Place the cursor anywhere inside the function, even on the function keyword,
and run the JsAnonFnToArrowFn command.

This command is mapped to <leader>af
(for "arrow function")
unless that is already mapped to something else.

The JsArrowFnBraceToggle function changes an arrow function from not using braces to using them and vice-versa. The cursor must be on a line that contains "=>".

It converts this:

const add = (p1, p2) => p1 + p2;

to this:

const add = (p1, p2) => { return p1 + p2; };

and converts in the opposite direction.

This command is mapped to <leader>tb
(for "toggle braces")
unless that is already mapped to something else.

The easiest way to install this is to use Pathogen and
"git clone" this repository into the .vim/bundle directory.

Differences between arrow functions and the function keyword

This plug-in will perform a simple transformation from a function declared with
the function keyword (a normal function) to an arrow function expression.
There are differences between these that can affect the results.

When an arrow function has an expression body, the return keyword is

1. However, when it has statement block, the return keyword is still
2. just like a normal function.

var example1 = function () { foo(); }; // example1() returns undefined

var example2 = () => { foo(); }; // example2() returns undefined

var example3 = () => foo(); // example3() returns the return value of foo()

Another difference is that normal functions always receive a this value,
whereas arrow functions inherit the this value from its context.

$('a').each(function () { console.log(this); }; // logs all the "a" DOM elements

$('a').each(() => { console.log(this); }; // logs the window object

Resources:

• Arrow functions blog post from hacks.mozilla.org