工欲善其事,必先利其器。
之前用了挺长时间的 vim,最近接触 flutter,刚开始根据官方推荐在 Android studio 安装了插件,虽然也有 vim 插件,但是操作体验上难免不一致,而且有些操作避免不了要使用鼠标,最后下决心折腾一下 vim 下的开发环境,用了一段感觉还不错,分享一下。
这里默认大家已经安装了 dart SDK,flutter SDK。
先说一下折腾之前我的 vim 环境:
https://github.com/amix/vimrcgithub.com这个是我的基本配置,之前也使用过一些其它配置,但是用起来都感觉不太舒适,自从发现这个 repo 之后才正式走上了折腾 vim 的不归路。
然后就是大名鼎鼎的 YouCompleteMe:
Valloric/YouCompleteMegithub.com![0285c12926f493f02c5a1fb7315c89d1.png](https://i-blog.csdnimg.cn/blog_migrate/8add656e369ab1cc4efcc88ade618114.jpeg)
![4b57e3eb3786d760d6797674dbee74d4.gif](https://i-blog.csdnimg.cn/blog_migrate/c0d02b8fad11ac60153139b3b6c293c6.gif)
这个插件运气不好要折腾很久,大家自求多福吧。
安装插件也比较方便,使用 pathogen 就可以:
#仍到这个目录下就可以
~/.vim_runtime/my_plugins
插件配置:
~/.vim_runtime/vimrcs/plugins_config.vim
以上就是前提啦,下面就是主菜了
1,dart 语法解析,格式化:
dart-lang/dart-vim-plugingithub.com![4f358c651cadbec617729ab909a33b72.png](https://i-blog.csdnimg.cn/blog_migrate/0cc63815eeba73c27370fad2d7158335.jpeg)
![222157a34fd889a5e9b97d2e72caf7b6.png](https://i-blog.csdnimg.cn/blog_migrate/42de1eecacd57e81f5e25129a53918b3.jpeg)
![222157a34fd889a5e9b97d2e72caf7b6.png](https://i-blog.csdnimg.cn/blog_migrate/42de1eecacd57e81f5e25129a53918b3.jpeg)
cd ~/.vim_runtime/my_plugins/
git clone https://github.com/dart-lang/dart-vim-plugin.git
git clone https://github.com/natebosch/vim-lsc.git
git clone https://github.com/natebosch/vim-lsc-dart.git
这里可能会出现 snapshots 找不到的情况:
![b976a84349d8212d5ab7fb7020ed5fcd.png](https://i-blog.csdnimg.cn/blog_migrate/5a14413ea3950c4ded7c80fce264cb7a.jpeg)
确保这两个在一个目录下。
保存时自动格式化:
vim ~/.vim_runtime/vimrc/plugins_config.vim
#添加
autocmd BufWritePre *.dart* DartFmt
![20232ab873afa7cd8c710ee3bbba2b0e.gif](https://i-blog.csdnimg.cn/blog_migrate/8b00da94e7dbeaeaa2811d8148a0d737.gif)
2,flutter 调试,运行,热加载:
thosakwe/vim-fluttergithub.com![92d5a442c976ea06553ee5b5fe4a7066.png](https://i-blog.csdnimg.cn/blog_migrate/17068e12bac39fc8ae56690f9eb35317.jpeg)
cd ~/.vim_runtime/my_plugins/
git clone https://github.com/thosakwe/vim-flutter.git
![069ee66f35a13d0c1f4e7ea67ddac2e7.gif](https://i-blog.csdnimg.cn/blog_migrate/a0cd4734c5c56a60887344998be03a9c.gif)
![ebdfbd0e94f77d05b24390a55d198873.gif](https://i-blog.csdnimg.cn/blog_migrate/2638cdf9a9d50e8f07c62ca94bc811c8.gif)
3,最后一个大招,设置 snipper:
honza/vim-snippetsgithub.com![d5338c082f5bdb8dc4bf400e3476da6c.png](https://i-blog.csdnimg.cn/blog_migrate/3dc0c6c74e141017b8f5f5aeb6ded4e6.jpeg)
这个在之前的 vimrc 里面已经存在了,只要到 .vim_runtime 目录下更改就可以了。
为了让这个插件 与 YouCompleteMe 共存,需要改一下:
vim ~/.vim_runtime/vimrc/plugins_config.vim
添加(这是从 stackoverflow 上拿到的一段代码):
function
添加 snipper:
cd ~/.vim_runtime/sources_non_forked/vim-snippets/snippets
vim dart.snippers
#添加
snippet stl
import 'package:flutter/material.dart';
class ${1:NAME} extends StatelessWidget {
${0:$1}({Key key}): super(key: key);
@override
Widget build(BuildContext context) {
return new Container();
}
}
snippet stf
import 'package:flutter/material.dart';
class ${1:NAME} extends StatefulWidget {
${0:$1}({Key key}) : super(key: key);
@override
_${0:$1}State createState() => _${0:$1}State();
}
class _${0:$1}State extends State<${0:$1}> {
dispose(){
super.dispose();
}
initState(){
super.initState();
}
@override
Widget build(BuildContext context) {
return new Container();
}
}
![bced1a37d245feb5195af9b4fef1d87e.gif](https://i-blog.csdnimg.cn/blog_migrate/9b06cc434702ec6fe33aa0e844b43da1.gif)
就这么多了,感觉用起来还是挺爽的。如果是审查元素的话,估计要切回官方推荐的 ide 了,至少现在我还没有发现有什么好的办法。