概述
工欲善其事必先利其器，合理优化开发工具可以显著提升自己的开发效率和代码质量。
vscode 插件
Auto Close Tag
自动闭合标签
Auto Rename Tag
自动重命名标签
HTML CSS Support
智能提示当前项目所支持的样式
Vue Peek
快速跳转定义的组件
Open in Browser
快速打开浏览器浏览选择的页面
Beautify
格式化html、js、json、css
CSS Peek
调试css样式的必备插件
Document This
添加注释快
ESLint
EsLint可以帮助我们检查Javascript编程时的语法错误
Chinese (Simplified) Language Pack for Visual Studio Code
中文插件
VUE 框架优化
vetur 语法高亮
- 语法高亮
- 片段
- Emmet
- 整理/错误检查
- 格式化
- 智能提示
Snippets 自定义代码块
自定义代码片段，非常方便，一个命令可以生成一段代码模板。
以vue为例说明，新建一个vue页面大致包含以下步骤:
-
新建.vue页面
-
编写模板
-
编写生命周期、业务代码等等 很显然，每开发一个业务功能或组件都需要创建vue文件，那么每次创建vue文件都要写这种重复性高、无聊枯燥的代码，有没有什么方法可以避免这种重复性的工作呢，我给大家分享一种使用snippets自定义代码块的小技巧。
- 按F1 或 Ctrl+Shift+P（俗称万能键） ：打开命令面板
- 输入snippets -> 选择配置用户代码片段，参考图一
- 选择vue.json
- 复制以下配置覆盖vue.json内容，可以根据项目需求修改以下配置 { "Print to console": { "prefix": "vue", "body": [ "", "", "", "" ], "description": "vue-template" } }
- 最终效果图：图二
图一：
图二：
