使用vscode开发vue项目,需要安装哪些插件?

前言

vscode用来开发vue在我看来是一个比较爽的体验,当然前提是你需要先安装一些比较好用的插件,下面主要记录一下需要用到的一些插件,方便以后在切换环境或者安装系统的时候用的上

开始

1、vue 2 Snippets

这是一款vue代码提示插件,原来的话是安装的vueHelper,但是貌似项目没维护了,好像是因为开发人员转行了

2、Vetur

语法高亮、智能感知、Emmet等。包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)

tip: 这里使用 Alt + Shift + F 格式化代码,还是一个爽的功能,排版再差,使用它,都能帮你整理好

3、EsLint

用于进行一些语法判断和纠错,协助你写一份规范的代码

4、Auto Close Tag

自动闭合HTML标签,这个是很好的,写完左边的标签的的时候,右边闭合标签自动帮你输入

5、Auto Rename Tag

同步修改左右两边标签的名称,这个配合 Auto Close Tag使用非常nice

**6、CSS Peek **

追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码

7、HTML Boilerplate

通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构

8、Color Info

提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了

9、Bracket Pair Colorizer

每个括号都有自己的颜色,并且对应括号开始结束地方,这样就可以不用为了找括号而烦恼了~