这是我参与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标签模版
6.jQuery Code Snippets
jQuery智能代码提示
7.Bracket Pair Colorizer
在编写代码时,时常会因为逻辑复杂括号太多而导致代码区分错误 或者 缺少括号。这个插件就能很好的解决这个问题。它能给不同区块的括号加上不同的颜色,使用者还可以定义不同括号的类型颜色。开发利器!
8.Path Intellisense
自动提示文件路径,默认不带此功能,支持各种快速引入文件。开发时写路径也是个麻烦事,有自动补全就好很多了。
9.JavaScript(ES6) code snippets
ES6智能语法提醒,以及快速输入;不仅支持js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
10.Live Server
一个具有实时刷新功能的小型服务器。此插件安装方便,一步到位,一键安装完成后就可以解决搭建本地服务器和自动刷新的问题。比gulp更加方便。但是需要注意端口占用问题。
以上就是比较常用的一些VSCode的插件啦。当然还有很多好用的插件,大家可以自行探索哦。