就是要用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了。
最新文章
- Rafy 领域实体框架 - 公司内部培训视频
- 对于一个负数mod正数
- 【转】PHP实现连贯操作
- Mesos源码分析
- 《c程序设计语言》读书笔记--大写转小写
- 【转】eclipse怎么设置字体大小
- 给C++初学者的50个忠告(好文转载)
- JAVA程序猿面试题汇总
- ****K - Alien&#39;s Organ
- Sqlite常用sql语句
- ArcGIS 网络分析[8.5] 资料5 网络分析拓展模块及各种接口说明
- Java hashtable和hastmap的区别
- easyUI datagrid 多行多列数据渲染异常缓慢原因以及解决方法
- Thinkpad W520 + Ubuntu 12.04LTS, 13.10, 14.04LTS安装Nvidia显卡驱动设置
- Monkey测试简介
- git命令详解( 三 )
- Microsoft/Git-Credential-Manager-for-Mac-and-Linux
- js与jquery对象的互转
- leetcode134
- 记录:springmvc + mybatis + maven 搭建配置流程