用vim写vue

本文详细介绍在Vim编辑器中进行Vue.js项目开发的配置流程,包括语法高亮、代码检查、格式化等插件的选择与安装,以及.vimrc文件的配置细节,帮助提升开发效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、使用到的插件:

1. 语法高亮:posva/vim-vue

2. 语法检查:vim-syntastic/syntastic  + eslint-plugin-vue

3. 代码格式化:MaraniMatias/vue-formatter


以上插件的安装方式,参照github相应文档即可。


二、配置:


1. .vimrc的配置,只列出了与VUE相关的:


"VUE 相关配置
"采用两个空格的缩进
 au BufNewFile,BufRead *.html,*.js,*.vue set tabstop=2
 au BufNewFile,BufRead *.html,*.js,*.vue set softtabstop=2
 au BufNewFile,BufRead *.html,*.js,*.vue set shiftwidth=2
 au BufNewFile,BufRead *.html,*.js,*.vue set expandtab
 au BufNewFile,BufRead *.html,*.js,*.vue set autoindent
 au BufNewFile,BufRead *.html,*.js,*.vue set fileformat=unix
"这个是解决偶尔高亮失效的,貌似没什么鸟用 
 autocmd FileType vue syntax sync fromstart
"代码格式化的快捷键,设置为F9
 autocmd FileType vue noremap <buffer> <F9> :%!vue-formatter<CR>
"启用eslint代码检查,如果不想受限制,可以注释掉
 let g:syntastic_javascript_checkers = ['eslint']


2. .eslintrc的配置,放在每个项目下的,请照抄


{
  "extends": ["plugin:vue/recommended", "standard"],
  "plugins": [
    "vue"
  ],
  "parserOptions": {
    "parser": "babel-eslint",
  },
  "rules": {
    "vue/script-indent": ["error", 2, { "baseIndent": 1  }]
  },
  "settings": {
    "html/html-extensions": [".html", ".vue"],
  },
  "overrides": [
    {
      "files": ["*.vue"],
      "rules": {
        "indent": "off"
      }
    }
  ]
}

三、其中的坑:

代码请按以下顺序:


<template>
</template>
<script>
</script>
<style>
</style>

我之前喜欢把style放在script之前,每次格式化后,总会出现“undifined”,然后会把script等复制一份append在后面,仔细研究后才发现了这个坑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值