根据调查发现,VScode 和 sublime 是前端开发者比较喜欢的 IDE 。“工欲善其事,必先利其器”,我是一个爱折腾的工具控,刚开始用 VScode 的时候,装了一堆的插件,导致只要开启 VScode 再接上大屏,我的 Mac 就会强烈的反抗,风扇一直呼啸,??....后来就开启卸载模式,开始一直卸,最终保留一些小而美,使用率高的插件,整理一份以便不备之需。
而对于一个团队而言,大家用同一套快捷键,同一个IDE,同一套插件,那么结对编程将会是一件特别幸福的事情。
一、代码快捷键
在 VScode 的首页可以设置通用快捷键,因为平常用sublime比较多,所以干脆合并成一套。
二、代码提示
1. Path Intellisense
自动路径补全
2. Document this
js 的注释模板 (注意:新版的 vscode 已经原生支持,在 function 上输入
/** tab
)
三、代码格式
1. ESlint
代码规范,对不符合要求的代码或者有语法错误的JS代码
进行提示,可以自定制提示规则
2. HTMLHint
html代码
检测
3. beautify
格式化代码的工具
四、代码可视化改善
1. colorize
可视化颜色,做组件涉及很多不同的主题
2. RegExp Preview and Editor
这个就厉害了.可以完美的展示你写的正则,图形化给你看你写正则的形成
----------------------------------------------------------------------------
华丽丽的分割线,以下插件根据框架语言选择,用什么装什么,不用就不要装了,浪费内存
五、React 插件
1. ES7 React/Redux/GraphQL/React-Native snippets
涵盖的代码片段贼丰富,React 相关代码提示有这个就够了
2. Useful React Snippets
当然如果你只用React,那用这个代码提示吧,管够了
3. CSS Blocks
支持css模块化的智能提示,跳转,墙裂推荐
4. styled-components-snippets
styled-components
的代码片段
六、Vue 插件
1. vetur
语法高亮、智能感知、Emmet 等
2. VueHelper
snippet 代码片段
3. Vue VSCode Snippets
很全面的vue代码片段
七、Node
1. eggjs
蛋框的相关帮助插件,代码片段,智能提示等
2. egg-jump-definition
蛋框的函数跳转:Cmd+4
八、微信小程序
1. mpvue snippets
mpvue
的一些代码片段,以及部分原生小程序的代码提示
2. minapp
用VS Code
写小程序必备的插件,里面有众多实用的特性集成
九、Markdown 插件
1. Markdown All in One
Markdown 的提示插件用这一个足以,集成了语法快捷键、Math、预览等,很实用
2. markdownlint
对 markdown 的语法格式规范进行代码提示