就是要用Vim写Vue
Vim关于Vue的生态链还是很少,不过凑活凑活还是能用的。
缩进
缩进采用的是两个空格,.vimrc配置:
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
语法高亮
重要的语法高亮,支持最好的应该是vim-vue。
使用Vundle下载:
Plugin 'posva/vim-vue'
:PluginInstall
这样语法高亮基本上就实现了,不过会出现滑动过快高亮失效的情况,文档中给出的原因是vue包含html、css、js语句,vim-vue有时候会感到困惑,解决办法:
autocmd FileType vue syntax sync fromstart
如果想使用一些已经写好的html、css、js配置,可以添加:
autocmd BufRead,BufNewFile *.vue setlocal filetype=vue.html.javascript.css
语法检查
语法检查可以使用vim-syntastic/syntastic配合ESLint。
使用Vundle下载:
Plugin 'scrooloose/syntastic'
:PluginInstall
配置eslint检查器:
let g:syntastic_javascript_checkers = ['eslint']
可以使用打开一个vue文件,输入命令:
:SyntasticInfo
可以看到:
Syntastic version: 3.8.0-101 (Vim 704, Linux, GUI)
Info for filetype: vue
Global mode: active
Filetype vue is active
The current file will be checked automatically
Available checker: eslint
Currently enabled checker: eslint
现在就差ESLint了。
ESLint
Vue的官方推荐ESLint插件是eslint-plugin-vue。
下载:
npm install eslint eslint-plugin-vue
配置.eslintrc
{
"extends": ["plugin:vue/recommended"],
"plugins": [
"vue"
],
"parserOptions": {
"parser": "babel-eslint",
},
"rules": {
},
"settings": {
"html/html-extensions": [".html", ".vue"],
},
}
注意,配置中不要包含eslint-plugin-html插件,eslint-plugin-html会使eslint-plugin-vue失效,因为eslint-plugin-html会从<script>中提取内容,但eslint-plugin-vue是需要<script>和<template>标签的。
"plugins": [
"vue",
- "html" //去除
]
这样,:w保存vue文件时就会有红块报错了:
在每行之前的 >>
表示该行中有语法错误,将光标移到该行,错误描述就会展示在 Vim 窗口的最底下。
输入:Errors命令也会打印出详细的报错信息。
缩进错误
配合eslint-plugin-standard使用的时候,如果<script>缩进如下:
<script>
let a = {
foo: 1,
bar: 2
}
</script>
会报缩进错误:
Expected indentation of 0 spaces but found 2. (indent)
官方给出了解决方法:vue/script-indent
{
"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"
}
}
]
}
一是添加rule:
"vue/script-indent": ["error", 2, { "baseIndent": 1 }]
数字2代表1次缩进2个空格,数字1代表缩进1次。
二是关闭默认indent:
"overrides": [
{
"files": ["*.vue"],
"rules": {
"indent": "off"
}
}
]
over。可以愉悦得用Vim写Vue了。
就是要用Vim写Vue的更多相关文章
- Webstrom 中写Vue没有代码提示如何解决?
1. 如果你的Webstorm是2017版的,请更新到最新的2018,2018版本的webstorm自带了vue插件 找到 Help > About,查看你的Webstorm版本 2. 如果你的 ...
- vue-class-component 以class的模式写vue组件
vue英文官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件.vue-class-component(以下简称Component)带来了很多便利: 1.me ...
- Vim 写 iOS App
Vim 写 iOS App 我们都知道 Vim 和 Emacs 都是文本编辑器中的上古神器,你也许用 ctags,cscopes 配合 Vim 完成过大型 C 或者 C++ 的开发,你也许配合过其他插 ...
- linux常用终端指令+如何用vim写一个c程序并运行
在装好ubuntu之后今天学习了一些linux的一些基础知识: windows里面打开命令窗口是win+r,在linux系统里面,ctrl+alt+t打开终端,今天的一些指令都是围绕终端来说的 首先s ...
- 剖析手写Vue,你也可以手写一个MVVM框架
剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...
- VSCode 初次写vue项目并一键生成.vue模版
VSCode 写vue项目一键生成.vue模版 1.新建代码片段 文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定 2.配置快捷生成的vue模板 ...
- 使用Vim写LaTeX代码(Vim+Vimtex+Skim)
最近在写博客的时候发现对数学公式的支持并不好,于是就想寻找一个解决方案.我本身是一个爱折腾的人,有时尽管有现成的解决方案我有事也不愿意去用.于是多方查找资料,想寻求一个自定义的解决方案,最终把自己的目 ...
- 手写 Vue 系列 之 Vue1.x
前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...
- 手写 Vue 系列 之 从 Vue1 升级到 Vue2
前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...
随机推荐
- box-sizing (摘录)
//http://www.jianshu.com/p/e2eb0d8c9de6 box-sizing其它的值 content-box 描述:在宽度和高度之外绘制元素的内边距和边框. border-bo ...
- 【C++】括号匹配
#include<iostream> #include<cstring> #include<cstdlib> #include<queue> using ...
- kubernetes in action - Volumes
Volume解决Kubernetes的存储的问题 对于Pod使用的存储,抽象为volume,volume伴随着Pod的创建而创建,消失而同时消失,不能单独的创建 这样的好处,是存储的塑胶不会因为某个c ...
- python写算法中的栈
########### 栈的使用 ############### class StackFullError(Exception): pass class StackEmptyError(Excepti ...
- Redis Keys的通用操作
keys * 显示所有key 127.0.0.1:6379> keys * 1) "sort1" 2) "l2" 3) "set2" ...
- 初识springboot
一.springboot简介: 1.简化spring应用开发框架 2.把spring所有技术整合在了一起 3.J2EE开发的一站式解决方案 我曾经学习springMVC时候,那许许多多的配置文件的配置 ...
- man scp
SCP(1) BSD General Commands Manual SCP(1) NAME scp - secure copy (remote file copy program) ...
- 001-zookeeper 简介-paxos算法,zk简介,特点
一.概述 大数据体系概述 1.1.什么是zookeeper 是Google的Chubby一个开源的实现,是Hadoop的分布式协调服务 它包含一个简单的原语集,分布式应用程序可以基于他实现同步服务,配 ...
- Python从入坑到放弃!
Python基础 python基础 python基础之 while 逻辑运算符 格式化输出等 python基础之 基本数据类型,str方法和for循环 python基础之 列表,元组,字典 pyth ...
- 405 Method Not Allowed error with PUT or DELETE Request on IIS Server
昨天手贱去一台服务器上装了Webdav. 一开始以为这个报错是跨域问题, 最近一直遇到用自动的publish发布到FTP出问题也就没想到是Webdav的问题 而且这东西装了还不能删除 处理办法 IIS ...