vue vim 语法提醒_用于vue文件的Vim语法和缩进插件

vue vim 语法提醒

vim-vue-插件 (vim-vue-plugin)

Vim syntax and indent plugin for .vue files. Mainly inspired by mxw/vim-jsx.

.vue文件的Vim语法和缩进插件。 主要灵感来自mxw / vim-jsx。

安装 (Installation)

How to install如何安装

• [VundleVim][2]

  [VundleVim] [2]

  Plugin 'leafOfTree/vim-vue-plugin'

• [vim-pathogen][5]

  [病毒病原体] [5]

  cd ~/.vim/bundle && \
    git clone https://github.com/leafOfTree/vim-vue-plugin --depth 1

• [vim-plug][7]

  [vim-plug] [7]

  Plug 'leafOfTree/vim-vue-plugin'
    :PlugInstall

• Or manually, clone this plugin to path/to/this_plugin, and add it to rtp in vimrc

  或者手动将该插件克隆到path/to/this_plugin ，并将其添加到vimrc中的rtp中

  set rtp+=path/to/this_plugin

This plugin works if filetype is set to vue. Please stay up to date. Feel free to open an issue or a pull request.

如果filetype设置为vue则此插件有效。 请保持最新。 随时打开问题或请求请求。

这个怎么运作 (How it works)

Since .vue is a combination of CSS, HTML and JavaScript, so is vim-vue-plugin. (Like XML and JavaScript for .jsx).

由于.vue是CSS，HTML和JavaScript的组合，因此vim-vue-plugin 。 (就像.jsx XML和JavaScript .jsx )。

Supports

支持

• Vue directives.

  Vue指令。

• Less/Sass/Scss, Pug with [vim-pug][4], Coffee with [vim-coffee-script][11].^

  Less / Sass / Scss，带有[vim-pug] [4]的哈巴狗，带有[vim-coffee-script] [11]的咖啡。^

• A builtin foldexpr foldmethod.^

  内置的foldexpr 。^

• [emmet-vim][10] HTML/CSS/JavaScript filetype detection.

  [emmet-vim] [10] HTML / CSS / JavaScript文件类型检测。

• .wpy files from [WePY][6].

  [WePY] [6]中的.wpy文件。

^: see Configuration for details.

^：有关详细信息，请参见配置。

组态 (Configuration)

Set global variable to 1 to enable or 0 to disable. Ex:

将全局变量设置为1启用或禁用0 。 例如：

let g:vim_vue_plugin_load_full_syntax = 1

variable	description	default
g:vim_vue_plugin_load_full_syntax*	Enable: load all syntax files in runtimepath to enable related syntax plugins. Disable: only in $VIMRUNTIME/syntax, ~/.vim/syntax and $VIM/vimfiles/syntax	0
g:vim_vue_plugin_use_pug*	Enable pug syntax for <template lang="pug">.	0
g:vim_vue_plugin_use_coffee	Enable coffee syntax for <script lang="coffee">.	0
g:vim_vue_plugin_use_less	Enable less syntax for <style lang="less">.	0
g:vim_vue_plugin_use_sass	Enable scss syntax for <style lang="scss">(or sass fo lang="sass").	0
g:vim_vue_plugin_has_init_indent	Initially indent one tab inside style/script tags.	0 for .vue. 1 for .wpy
g:vim_vue_plugin_highlight_vue_attr	Highlight vue attribute value as expression instead of string.	0
g:vim_vue_plugin_use_foldexpr	Enable builtin foldexpr foldmethod.	0
g:vim_vue_plugin_debug	Echo debug messages in messages list. Useful to debug if unexpected indents occur.	0

变量	描述	默认
g:vim_vue_plugin_load_full_syntax *	启用：在运行时runtimepath加载所有语法文件以启用相关的语法插件。 禁用：仅在$VIMRUNTIME/syntax ， ~/.vim/syntax和$VIM/vimfiles/syntax	0
g:vim_vue_plugin_use_pug *	为<template lang="pug">启用pug语法。	0
g:vim_vue_plugin_use_coffee	为<script lang="coffee">启用咖啡语法。	0
g:vim_vue_plugin_use_less	为<style lang="less">启用较少的语法。	0
g:vim_vue_plugin_use_sass	为<style lang="scss"> (或sass fo lang="sass" )启用scss语法。	0
g:vim_vue_plugin_has_init_indent	最初在style/script标签内缩进一个标签。	.vue为0。 1为.wpy
g:vim_vue_plugin_highlight_vue_attr	突出显示vue属性值作为表达式而不是字符串。	0
g:vim_vue_plugin_use_foldexpr	启用内置的foldexpr foldmethod。	0
g:vim_vue_plugin_debug	在messages列表中回显调试消息。 如果发生意外缩进，对调试很有用。	0

*: Vim may be slow if the feature is enabled. Find a balance between syntax highlight and speed. By the way, custom syntax can be added in ~/.vim/syntax or $VIM/vimfiles/syntax.

*：如果启用该功能，Vim可能会变慢。 在语法高亮和速度之间找到平衡。 顺便说一句，可以在~/.vim/syntax或$VIM/vimfiles/syntax添加自定义$VIM/vimfiles/syntax 。

Note

注意

• filetype is set to vue so autocmds and other custom settings for javascript have to be manually enabled for vue.

  filetype设置为vue因此必须手动为vue启用autocmds和其他javascript自定义设置。

• g:vim_vue_plugin_load_full_syntax applies to JavaScript/HTML/CSS/SASS/LESS.

  g:vim_vue_plugin_load_full_syntax适用于JavaScript/HTML/CSS/SASS/LESS 。

• g:vim_vue_plugin_use_foldexpr default value used to be 1, but it's changed to 0 now.

  g:vim_vue_plugin_use_foldexpr默认值以前是1 ，但是现在更改为0 。

基于上下文的行为 (Context based behavior)

As there are more than one language in .vue file, the different behaviors like mapping or completion may be expected under different tags.

由于.vue文件中存在多种语言， .vue在不同的标签下可能会出现不同的行为，例如映射或完成。

This plugin provides a function to get the tag where the cursor is in.

该插件提供了获取光标所在标签的功能。

• GetVueTag() => String Return value is 'template', 'script' or 'style'.

  GetVueTag() => String返回值是'template' ， 'script'或'style' 。

例 (Example)

autocmd FileType vue inoremap <buffer><expr> : InsertColon()

function! InsertColon()
  let tag = GetVueTag()
  
  if tag == 'template'
    return ':'
  else
    return ': '
  endif
endfunction

Emmet-vim (emmet-vim)

Currently emmet-vim works regarding your HTML/CSS/JavaScript emmet settings, but it depends on how emmet-vim gets filetype and may change in the future. Feel free to report an issue if any problem appears.

当前emmet-vim可以处理您HTML / CSS / JavaScript emmet设置，但是这取决于emmet-vim如何获取filetype并且将来可能会更改。 如果出现任何问题，请随时报告问题。

避免超载 (Avoid overload)

Since there are many sub languages included, most delays come from syntax files overload. A variable named b:current_loading_main_syntax is set to vue which can be used as loading condition if you'd like to manually find and modify the syntax files causing overload.

由于包含许多子语言，因此大多数延迟都来自语法文件重载。 名为b:current_loading_main_syntax变量设置为vue ，如果您想手动查找和修改导致过载的语法文件，则可以将其用作加载条件。

For example, the builtin syntax sass.vim and less.vim in vim8.1 runtime and pug.vim in vim-pug/syntax will always load css.vim which this plugin already loads. It can be optimized like

例如，vim8.1运行时中的内置语法sass.vim和less.vim以及vim- pug.vim / syntax中的css.vim将始终加载该插件已加载的css.vim 。 可以像

- runtime! syntax/css.vim
+ if !exists("b:current_loading_main_syntax")
+   runtime! syntax/css.vim
+ endif

翻译自: https://vuejsexamples.com/vim-syntax-and-indent-plugin-for-vue-files/

vue vim 语法提醒