为 vue 配置一个 VSCODE
标签(空格分隔): VSCODE
2018 即将到来, 一起配置一个 vscode, 来年好好撸代码吧!!
为啥是 vscode, 不是 atom, 不是 sublimetext 呢, 其实这三个我都用过了, 开始用 sublimetext3, 很好, 速度快插件质量高, 可以免费用, 但是有弹窗, 我有洁癖, 不喜欢弹窗, 可以破解, 但是作为一个程序员, 用破解软件实在有点不太好意思, 可以买 key, 但是我穷, 于是转投 github 推出的 atom, 颜值高, 插件多, 各种酷炫的功能, 眼花缭乱, 无奈速度真是慢, 特别是切换项目的时候, 卡出翔, 最后转到了我 MS 大法的 vscode, 和 atom 同一个框架开发的, 但是大法就是大法, 优化老 NB 了, 借用一个口头禅 "我靠, 好洋气的!", 当然了, 还有 webstorm 这样的高级货, 太贵了, 买不起, 盗版不想用, 而且也太重了, 我就是喜欢轻量级.
作为一个前端开发, 你懂的, 这几年前端生态飞速发展, 语言都发布了好几代, 各种轮子齐飞, 没有一个好的 ide, 真是代码都不想敲了.
下载 vscode
既然是配置 vscode, 首先要下载一个, 官网地址送上, 不用谢了
我是 vscode 下载链接
安装插件
vscode 安装插件可以说是好简单, 界面操作, 点这里点这里点这里..... 然后就安装好了, reload 一下就搞定
image_1c2m82q282cba83sva1lej1u7qp.png-151.3kB
点击扩展管理, 然后输入扩展名称, 点击安装, 就可以了, 而且 vscode 自动本地化, 如果你是中文系统, 安装好了就是中文的, 没有语言障碍, 请安心食用
第一个插件 Vuter
image_1c2m86ld33bk1gji1f5e8lges916.png-37.9kB
既然是为 vue 配置的 vscode, 这个插件自然不能少, 这是 vscode 上开发 vue 的核心插件, 提供了代码高亮, 格式化, emmet,lint 等核心功能, 当然需要一点小小的配置才能更好用, 后面会介绍
第二个插件 beautify
image_1c2m8c2cc1jb7me14i714r9das1j.png-55.3kB
这是一个代码美化插件, 提供了代码美化功能, 当然我们并不直接用它, 它为 vuter 提供了格式化 html 的功能 (vuter 官方文档上说, 这个将很快被移除, 因为这个插件有很多 bug 一直得不到解决)
第三个插件 Prettier
image_1c2m8fpp71mc9k6j1a43k45qvg20.png-47.2kB
这也是一个代码格式化插件, 提供格式化代码的功能, 它可以使用 eslint 的配置, 一键修改各种 eslint 问题, 而且不增加快捷键, 它通过增强原有的代码格式化功能来实现, 可以说是无缝衔接, 好洋气!(vuter 官方文档上说可以不用安装 prettier, 但是安装好了, 可以更好的配置, 因为配置项有智能提示)
第四个插件 ESLint
image_1c2m8le061ctekqavd8is71ho12d.png-49kB
js 是一个很自由的语言, 自由到, 你怎么写都不报错, 怎么写都是对的, 但是如果你真的随便写, 就会到处报错, 到处都是错的, 根本找不到哪里错了, 所以, 我们加上 eslint 来约束代码, eslint 的规则很多, 配置简单, 也有很多现成的模板, 这里就不详细介绍了, 可以通过下面的网址自己去看看.
eslint 配置介绍
第五个插件 Project Manager
image_1c2ma9ifr1cjl9qllcujp41s8565.png-39.2kB
项目管理, 方便保存各种项目目录, 一点就切换, 非常的方便啦
以上五个插件是核心插件, 安装好这五个插件, 加上简单配置, 就可以开始撸 vue 代码了, 但是, 作为一个外貌协会的程序员, 我们接下来要安装一些别的插件, 增强一下功能, 全凭个人喜好, 自己安装
颜色主题 Atom Material Theme
image_1c2m96nvsohk1g6ho9vvkc1gn82q.png-48.8kB
material 系列的主题都不错, 我推荐这个, 主要是菜单栏和编辑器可以区分颜色, 当然你可以试试别的主题, 搜 theme 就可以看到很多主题, 都有截图, 可以自己选一个
文件图标主题 Material Icon Theme
image_1c2m9fje41qct1eej1ine1fuh1id144.png-42.6kB
这是左侧文件树的图标, 根据文件类型显示不同的图标, 也是好洋气的存在
Makedown 增强 Markdown Preview Enhanced
image_1c2m9ihs8ekbnh81etomb5eob4h.png-46.9kB
这是一个 makedown 增强插件, 非常强大, 比 vscode 自带的强大很多, 可以实时预览 markdown, 还可以导出各种常用格式, html,pdf 都不是问题, 如果你够高级, 你可以去 google 一下, 还可以导出 word 文档, 这个稍微有点麻烦, 不过应该难不住好奇的前端程序员的
括号增强 Bracket Pair Colorizer
image_1c2m9nt4c1f9c1je91n6m1pnue2j4u.png-48.4kB
js 代码中, 括号一直是一个问题, 即使我们小心翼翼, 依然难以避免括号问题, 这个扩展为不同层级的括号添加了颜色, 一眼就能看到, 而且代码也变得更加的丰富多彩了, 比 vscode 自带的那个括号提示好多了
小功能 Change Case
image_1c2m9tjuo5u610ju1kos10fd8io5b.png-49.1kB
非常实用的小功能啦, 可以将变量名切换成各种常用造型, 驼峰的, 大驼峰的, 糖葫芦的, 随便切, 再也不用选个字母改大小写了, 可以说非常的贴心啦
小增强 Output Colorizer
image_1c2ma5s69132vlri1pcp1n1p1f0m5o.png-33kB
给输出加点色彩, 看着舒服
配置同步 Settings Sync
image_1c2mbd8q81o4rpc41t421vhm12756i.png-52.1kB
通过 github 来同步你的 vscode 配置, 需要去 github 上去生成一个 key, 当然插件介绍里有说明, 也有指引, 自己研究就可以了
小功能 Sublime Commands
image_1c2mbgnpvbfh8948gsm951etm6v.png-44.7kB
用过很多编辑器的好处就在这里体现了, sublimetext 里面有个交换选择的快捷键, 就是选中两个词, 然后按一个快捷键, 两个词就交换位置了, 这个操作我们经常做, 而且挺麻烦, 复制剪切的, 现在好了, 用了这个小插件, 这个功能也补上了, 没有缺憾
小增强 vscode-fileheader
image_1c2mc1nov1ql18vm1u20uuh1p4789.png-40.5kB
为你的文件加上文件头, 可以通过配置来控制文件头的内容, 非常好用哒
插件基本就这么多了, 大家可以自己探索别的插件, 也欢迎大家留言分享自己找到的好插件, 下面我们为这些插件做点小配置
配置开始
先把主题用起来
作为一个外貌协会资深会员, ide 不好看, 都下不去手敲代码, 所以, 先把美美的主题用起来
image_1c2mccc6q1259q7u1v9a19qrlpe8m.png-68kB
很简单, 只要在左下角找到那个齿轮, 点击后, 选择颜色主题, 就可以选择你要用的颜色主题, 文件图标主题也是一样的
配置 vue 相关的东西
首先点击左下角的小齿轮, 选设置, 然后就看见了所有配置项目.
先配置一下 Vuter, 大部分的配置都不用动, 我们需要将 vue 文件里面的 html 格式化配置一下, 默认是 none, 导致了 vue 文件格式化的时候 template 不能很好的格式化 找到
vetur.format.defaultFormatter.html
鼠标悬浮, 点击左边的小笔, 有选择项目, 选 js-beautify-html, 这样就 OK 了
如果对 html 格式化有要求, 比如 attribute 折行等, 可以参考 beautify 的配置 , 不过直接配置是没有用的, 需要加到
vetur.format.defaultFormatterOptions
中, 这里我加了两个配置, 让 html 多于一个 attribute 的时候进行折行对齐, 且一行的长度最大为 120 个字符.
PS: 这个配置 vuter 的官方文档上已经不推荐使用但是也没有给出具体的解决方案, 所以目前这样配置还是比较好的选择
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned",
"wrap_line_length": 120
}
}
完成这个配置后, 格式化后的 vue 文件中的 template 代码是这样的
image_1c3f12hkpiebgjg11mq1pj01a66p.png-113.6kB
配置 prettier
vuter 大部分的格式化工作都是调用的 prettier(vuter 官方文档上的意思是不安装 prettier 也可以工作, 大概是内部依赖了 perttier, 但是安装了 perttier 可以在配置的时候得到智能提示), 在设置中搜索 prettier, 可以修改一些默认配置, 我添加了
"prettier.singleQuote": true,
"prettier.tabWidth": 4,
"prettier.eslintIntegration": true,
"prettier.disableLanguages": ["vue"] // 2018.1.17补充
使用单引号, 格式化的时候会自动替换双引号为单引号
tab 的宽度为 4 个空格, 个人习惯
读取 eslint 配置, 这样可以合 eslint 保持一致, 基本上格式化一下就能修复很多 lint 问题
2018.1.17 补充
vscode 更新到 0.19.2 之后出现了一些格式化的 bug,html 无法正常的格式化了, 在 github 上发 issue 得到得解决方式是增加一个配置, 让 prettier 忽略掉 vue 文件, 所以增加了一个配置.
开启保存自动格式化
这可以说非常的贴心了, 不用手动的去格式化代码了, 我们只要保存文件, 就自动的调用格式化功能, 这样可以保持代码的统一, 可以说是懒癌福音啊
"editor.formatOnSave": true,
开启保存自动格式化可能会带来一些困扰, 有时候格式化的结果会和 lint 冲突, 调整好后一保存, 又尼玛变回去了, 这时候, 你可能会抓狂, 我的做法是局部暂停 eslint, 参考官方文档 , 只需要一两句注释就可以搞定, 非常方便.
快捷键配置
快捷键这东西, 每个人都有自己习惯的键位, 当然, 果然你不想记那么多快捷键, 你可以记个名字, 按 command + shift + p 呼出命令行, 然后在里面执行各种命令, 所有的功能都有对应的命令, 而且都是有命名空间的, 比如输入 emmet 你可以看到所有的 emmet 命令, 非常好用
到此为止, 你已经拥有了一个好用的用来开发 vue 的 IDE 了, 有颜值有内涵, 功能强大, 服务贴心, 可以说非常洋气啦.
2018 年就用它来撸代码吧, 一定棒棒哒, 撸出人生新高度
最后, 祝大家新年快乐啦, 2018 Hello world~
来源: http://www.jianshu.com/p/d2e397eb00cd