---

Ⅰ. 插件描述

vim plugin which formated javascript files by js-beautify

Ⅱ. 基本信息

创建日期：  2012-04-13 使用用户：  871 Github星：  724 插件作者：  Maksim Ryzhikov

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加:

Plugin 'maksimr/vim-jsbeautify'

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

:source %
:PluginInstall

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

使用NeoBundle管理器安装

在你的.vimrc下添加:

NeoBundle 'maksimr/vim-jsbeautify'

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

:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加:

Plug 'maksimr/vim-jsbeautify'

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

:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令:

cd ~/.vim/bundle
git clone https://github.com/maksimr/vim-jsbeautify

Ⅳ. 文档说明

## vim-jsbeautify - v1.1.3 - 2018-01-31

Description

This extension allows you to use jsbeautifier
inside vim to quickly format javascript, html and css files.
Version 1.0 also supports the editorconfig file.

Any comments, corrections and suggestions are welcome.

Installation

Dependencies

• A javascript interpreter: nodejs or v8.
• js-beautify
• Optional: editorconfig-vim

Installing without plugin-manager

Download zip file
or clone project. Then copy plugin folder from the plugin's directory to your ~/.vim folder.

unzip vim-jsbeautify-master.zip
cd vim-jsbeautify-master
cp -r plugin ~/.vim/

Then download the zip file for js-beautify and place its contents in ~/.vim/plugin/lib/, ie:

wget https://github.com/beautify-web/js-beautify/archive/v1.8.9.zip && unzip v1.8.9.zip && cp -rf js-beautify-1.8.9/ ~/.vim/plugin/lib/

Installing using pathogen

cd ~/.vim/bundle
git clone https://github.com/maksimr/vim-jsbeautify.git
cd vim-jsbeautify && git submodule update --init --recursive

Installing using vundle

1. Add this line to your .vimrc:

   Plugin 'maksimr/vim-jsbeautify'

2. Call PluginInstall() inside vim:

   :PluginInstall

3. Update git submodules: cd ~/.vim/bundle/vim-jsbeautify && git submodule update --init --recursive

Settings

In version 1.0, all configuration is done through the .editorconfig file.
This file can be located either in the user home directory ~/.editorconfig,
or in inside the vim configuration directory ~/.vim/.editorconfig.

To assign a custom path for the .editorconfig file set the variable g:editorconfig_Beautifier.

Settings are taken from sections [**.js], [**.json], [**.jsx], [**.html], and [**.css]. Within these
sections can use a special comment ; vim:, but this comment
can be used only for the global settings.

You can also configure a variable g: config_Beautifier(g:config_Beautifier has type dict), but it is better to use the .editorconfig file.

Examples

A simple example of the .editorconfig file:

;.editorconfig

root = true

[**.js]
indent_style = space
indent_size = 4

[**.json]
indent_style = space
indent_size = 4

[**.jsx]
e4x = true
indent_style = space
indent_size = 4

[**.css]
indent_style = space
indent_size = 4

[**.html]
indent_style = space
indent_size = 4
max_char = 78
brace_style = expand

The .editorconfig file uses special comments (;vim:)
and special properties for the jsbeautify plugin like path, bin

;.editorconfig

root = true

[**.js]
; path to optional external js beautifier, default is vim-jsbeautify/plugin/lib
path=~/.vim/bundle/js-beautify/js/lib/beautify.js
; Javascript interpreter to be invoked by default 'node'
bin=node
indent_style = space
indent_size = 4

[**.css]
path=~/.vim/bundle/js-beautify/js/lib/beautify-css.js
indent_style = space
indent_size = 4

[**.html]
; Using special comments
; And such comments or apply only in global configuration
; So it's best to avoid them
;vim:path=~/.vim/bundle/js-beautify/js/lib/beautify-html.js
;vim:max_char=78:brace_style=expand
indent_style = space
indent_size = 4

Usage

".vimrc
map <c-f> :call JsBeautify()<cr>
" or
autocmd FileType javascript noremap <buffer>  <c-f> :call JsBeautify()<cr>
" for json
autocmd FileType json noremap <buffer> <c-f> :call JsonBeautify()<cr>
" for jsx
autocmd FileType jsx noremap <buffer> <c-f> :call JsxBeautify()<cr>
" for html
autocmd FileType html noremap <buffer> <c-f> :call HtmlBeautify()<cr>
" for css or scss
autocmd FileType css noremap <buffer> <c-f> :call CSSBeautify()<cr>

JsBeautify function takes two parameters: the starting line number and the ending line number. By
default these parameters are set to 0 and $.

If you want to beautify only selected lines you should use functions
RangeJsBeautify, RangeJsonBeautify, RangeJsxBeautify, RangeHtmlBeautify, or RangeCSSBeautify.

Example of binding a function for js, html and css in visual mode on <ctrl-f>

".vimrc
autocmd FileType javascript vnoremap <buffer>  <c-f> :call RangeJsBeautify()<cr>
autocmd FileType json vnoremap <buffer> <c-f> :call RangeJsonBeautify()<cr>
autocmd FileType jsx vnoremap <buffer> <c-f> :call RangeJsxBeautify()<cr>
autocmd FileType html vnoremap <buffer> <c-f> :call RangeHtmlBeautify()<cr>
autocmd FileType css vnoremap <buffer> <c-f> :call RangeCSSBeautify()<cr>

Running tests

npm install
bundle install
npm test

Thanks for assistance:

• @stonelee
• @peterfoldi
• @edmistond

Versions

v1.1.3

• Add support js-beautify v1.7.5

v1.1.2

• Add support js-beautify v1.6.3

v1.1.1

• Add support js-beautify v1.3.1

License

Licensed MIT
Copyright (c) 2018 Maksim Ryzhikov;