Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maksimr/vim-jsbeautify
vim plugin which formated javascript files by js-beautify
https://github.com/maksimr/vim-jsbeautify
Last synced: 6 days ago
JSON representation
vim plugin which formated javascript files by js-beautify
- Host: GitHub
- URL: https://github.com/maksimr/vim-jsbeautify
- Owner: maksimr
- Created: 2012-04-14T07:40:11.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T14:25:12.000Z (almost 2 years ago)
- Last Synced: 2024-04-15T00:11:45.700Z (7 months ago)
- Language: Vim script
- Homepage:
- Size: 2.36 MB
- Stars: 760
- Watchers: 15
- Forks: 68
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## vim-jsbeautify - v1.1.3 - 2018-01-31
[](http://travis-ci.org/maksimr/vim-jsbeautify)
## Description
This extension allows you to use [jsbeautifier](http://jsbeautifier.org/)
inside vim to quickly format javascript, html and css files.
Version 1.0 also supports the [editorconfig](http://editorconfig.org/) file.
Any comments, corrections and suggestions are welcome.
## Installation
### Dependencies
* A javascript interpreter: [nodejs](http://nodejs.org/) or [v8](http://code.google.com/p/v8/).
* [js-beautify](https://github.com/beautify-web/js-beautify)
* Optional: [editorconfig-vim](https://github.com/editorconfig/editorconfig-vim)
### Installing without plugin-manager
Download zip [file](https://github.com/maksimr/vim-jsbeautify/archive/master.zip)
or clone project. Then copy `plugin` folder from the plugin's directory to your `~/.vim` folder.
``` bash
unzip vim-jsbeautify-master.zip
cd vim-jsbeautify-master
cp -r plugin ~/.vim/
```
Then download the zip file for [js-beautify](https://github.com/beautify-web/js-beautify/archive/master.zip) and place its contents in `~/.vim/plugin/lib/`, ie:
```bash
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
```bash
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`:
```vim
Plugin 'maksimr/vim-jsbeautify'
```
2. Call `PluginInstall()` inside vim:
```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:
```ini
;.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```
```ini
;.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
```vim
".vimrc
map :call JsBeautify()
" or
autocmd FileType javascript noremap :call JsBeautify()
" for json
autocmd FileType json noremap :call JsonBeautify()
" for jsx
autocmd FileType jsx noremap :call JsxBeautify()
" for html
autocmd FileType html noremap :call HtmlBeautify()
" for css or scss
autocmd FileType css noremap :call CSSBeautify()
```
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
```vim
".vimrc
autocmd FileType javascript vnoremap :call RangeJsBeautify()
autocmd FileType json vnoremap :call RangeJsonBeautify()
autocmd FileType jsx vnoremap :call RangeJsxBeautify()
autocmd FileType html vnoremap :call RangeHtmlBeautify()
autocmd FileType css vnoremap :call RangeCSSBeautify()
```
## Running tests
```
npm install
bundle install
npm test
```
Thanks for assistance:
+ [@stonelee](https://github.com/stonelee)
+ [@peterfoldi](https://github.com/peterfoldi)
+ [@edmistond](https://github.com/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;