---

Ⅰ. 插件描述

Syntax Highlight for Vue.js components

Ⅱ. 基本信息

创建日期：  2015-02-21 使用用户：  199 Github星：  1069 插件作者：  Eduardo San Martin Morote

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加:

Plugin 'posva/vim-vue-fearless'

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

:source %
:PluginInstall

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

使用NeoBundle管理器安装

在你的.vimrc下添加:

NeoBundle 'posva/vim-vue-fearless'

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

:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加:

Plug 'posva/vim-vue-fearless'

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

:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令:

cd ~/.vim/bundle
git clone https://github.com/posva/vim-vue

Ⅳ. 文档说明

# vim-vue

Vim syntax highlighting for [Vue
components](https://vuejs.org/v2/guide/single-file-components.html).

This was initially forked from
darthmall/vim-vue. I already have an
implementation for this but found his code much cleaner. That's why I created a
new version instead of a PR.

Installation

Install with Vundle

Plugin 'posva/vim-vue'

Install with Pathogen

cd ~/.vim/bundle && \
git clone https://github.com/posva/vim-vue.git

Install without a plugin manager (Vim 8)

git clone https://github.com/posva/vim-vue.git ~/.vim/pack/plugins/start/vim-vue

Integration with Syntastic or ALE

Currently only eslint is available. Please make sure
eslint and
eslint-plugin-vue are installed
and properly configured:

npm i -g eslint eslint-plugin-vue

Contributing

If your language is not getting highlighted open an issue or a PR with the fix.
You only need to add a line to the syntax/vue.vim file.

Don't forget to write Vader tests for
the code you write. You can run the tests by executing make test in the
terminal.

FAQ

Where is Jade?

Jade has been renamed to pug.
Therefore you have to replace all your jade occurrences with pug. The new
plugin for pug can be found on the same repository
(the name has already been updated).

How to use commenting functionality with multiple languages in Vue files?

tcomment

tcomment has some support for Vue files with multiple languages, without any extra configuration.

caw.vim

caw.vim features built-in support for file context through context_filetype.vim. Just install both plugins and context-aware commenting will work in most files. The fenced code is detected by predefined regular expressions.

NERDCommenter

<details>
<summary>
To use NERDCommenter with Vue files, you can use its "hooks" feature to
temporarily change the filetype. Click for an example.
</summary>

let g:ft = ''
function! NERDCommenter_before()
  if &ft == 'vue'
    let g:ft = 'vue'
    let stack = synstack(line('.'), col('.'))
    if len(stack) > 0
      let syn = synIDattr((stack)[0], 'name')
      if len(syn) > 0
        exe 'setf ' . substitute(tolower(syn), '^vue_', '', '')
      endif
    endif
  endif
endfunction
function! NERDCommenter_after()
  if g:ft == 'vue'
    setf vue
    let g:ft = ''
  endif
endfunction

</details>

Vim slows down when using this plugin How can I fix that?

When checking for pre-processor languages, multiple syntax highlighting checks are done, which can slow down vim. You can trim down which pre-processors to use by setting g:vue_pre_processors to a whitelist of languages to support:

let g:vue_pre_processors = ['pug', 'scss']

To disable pre-processor languages altogether (only highlight HTML, JavaScript, and CSS):

let g:vue_pre_processors = []

Available pre-processors are: coffee, haml, handlebars, less, pug, sass, scss, slm, stylus, typescript

When g:vue_pre_processors is set to 'detect_on_enter' instead of a list, vim-vue will detect the pre-processors used when a file is opened, and load only their syntax files.

let g:vue_pre_processors = 'detect_on_enter'