用vim写vue

最新推荐文章于 2024-08-22 09:21:15 发布

weixin_34345560

最新推荐文章于 2024-08-22 09:21:15 发布

阅读量429

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 开发工具 ViewUI

原文链接：https://yq.aliyun.com/articles/689373

本文详细介绍在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在后面，仔细研究后才发现了这个坑。