vue 入门-第二章

162 阅读2分钟

这是我参与8月更文挑战的第20天,活动详情查看:8月更文挑战

vue 入门-第二章

工欲善其事,必先利其器

目前比较适合vue开发的软件有 WebStorm、VSCode等。推荐使用开源软件VSCode 下载地址 windows VSCodeUserSetup-x64

1. 设置中文语言

1.打开VSCode 2.输入Ctrl+Shift+P,搜索框输入Configure Display Language,点击打开 3.将引号内en改为’zh-CN’,也可以将"en"带引号删除到冒号为止,输入z便有提示补全为"locale":"zh-CN" 4.点插件,软件左侧最下图标,然后搜索chinese,下载语言包,install,重启

2.常用插件列表

1.vetur

语法错误检查:

默认使用eslint-plugin-vue@beta检测;

语法高亮:

除了template外还支持其他大部分主流前端开发脚本和插件,例如 SASS 和 TypeScript 等;

Snippet:

可以使用Snippet来编写不同的脚本,例如 在 script中设置lang=‘ts’ 来编写TypeScript。

1. <script lang="ts">
2. Use TS snippets here
3. </script>

2.EsLint

语法纠错

eslint插件能够检测代码语法问题,与格式问题,对项目代码风格统一至关重要。

3.Debugger for Chrome

断点调试

可以直接在vscode中调试js代码,与浏览器的控制台类似,十分方便。

4.HTML CSS Support

在编写样式表的时候,智能提示当前项目所支持的样式,大大缩减了编写时间,推荐使用!

5.HTML Snippets

自动填充html标签。

例如输出 html5 回车,则会自动生成完成html5标签模版

Image.png

6.jQuery Code Snippets

jQuery智能代码提示

Image [1].png

7.Bracket Pair Colorizer

在编写代码时,时常会因为逻辑复杂括号太多而导致代码区分错误 或者 缺少括号。这个插件就能很好的解决这个问题。它能给不同区块的括号加上不同的颜色,使用者还可以定义不同括号的类型颜色。开发利器!

Image.jpg

8.Path Intellisense

自动提示文件路径,默认不带此功能,支持各种快速引入文件。开发时写路径也是个麻烦事,有自动补全就好很多了。

9.JavaScript(ES6) code snippets

ES6智能语法提醒,以及快速输入;不仅支持js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

10.Live Server

一个具有实时刷新功能的小型服务器。此插件安装方便,一步到位,一键安装完成后就可以解决搭建本地服务器和自动刷新的问题。比gulp更加方便。但是需要注意端口占用问题。

以上就是比较常用的一些VSCode的插件啦。当然还有很多好用的插件,大家可以自行探索哦。