vim 下用 jsbeautify 的格式化 vue

August 7, 2015

用这个就可以了: [用 vue-formatter 来代码格式化], 下面的不用看了

vim 本身的 gg=G 不够用, 很多 html 和 js 的语法没法很好的格式化.

装这个插件 https://github.com/maksimr/vim-jsbeautify

本身带的 js-beautify 有点老, 装个最新的

cd ~/.vim/bundle/vim-jsbeautify/
npm install js-beautify

加入配置文件

vim ~/.vim/.editorconfig

内容为

;.editorconfig

root = true

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

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

[**.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
path=~/.vim/bundle/vim-jsbeautify/node_modules/js-beautify/js/lib/beautify-html.js
indent_style = space
indent_size = 2
brace_style = collapse

加入热键

.vim/ftplugin/vue.vim

加入

map <buffer> <f2> :call HtmlBeautify()<cr>

beautify.js 对 tag <template> 里的内容是不会去格式化的, 要改一改

vim ~/.vim/bundle/vim-jsbeautify/node_modules/js-beautify/js/lib/beautify-html.js

[
            // https://www.w3.org/TR/html5/dom.html#phrasing-content
            'a', 'abbr', 'area', 'audio', 'b', 'bdi', 'bdo', 'br', 'button', 'canvas', 'cite',
            'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'i', 'iframe', 'img',
            'input', 'ins', 'kbd', 'keygen', 'label', 'map', 'mark', 'math', 'meter', 'noscript',
            'object', 'output', 'progress', 'q', 'ruby', 's', 'samp', /* 'script', */ 'select', 'small',
            'span', 'strong', 'sub', 'sup', 'svg', 'template', 'textarea', 'time', 'u', 'var',
            'video', 'wbr', 'text',
            // prexisting - not sure of full effect of removing, leaving in
            'acronym', 'address', 'big', 'dt', 'ins', 'strike', 'tt',
        ];

里的 template 去掉

vue-cli 的 .eslintrc.js 要求函数的(前要有空格, js-beautify 作者坚持要没有, 改配置吧.

"space-before-function-paren": [2, { "anonymous": "ignore", "named": "ignore", "asyncArrow": "ignore" }],

按下 f2, 一切都很完美

我要用 stylus 来写 css, style 没必要也不能格式化, 还是这个地方, 加入 style


comments powered by Disqus