前言:习惯了常用的vscode,并且在vscode中有许多自己个人代码片段和配置插件会给我们开发提高效率。而当我们要开发小程序时,用微信开发者工具来编写代码有诸多不便之处:如less不能自动帮我们转换成wxss;许多语法没有提示,因为微信开发者工具不能装插件。
当然,微信开发者工具也有许多方便的地方,可以直接在窗口显示运行效果、控制台、终端,创建页面时直接在全局的app.json文件中写入路径和页面名就会帮我们自动创建整个包含json/js/wxml/wxss的一整个文件夹,并且对于小程序生命周期钩子函数在项目页面创建的时候js文件中就会给我们详细的注释和说明。
所以此文建议在开发小程序时使用微信开发者工具和vscode同时使用的方式来进行开发。
像我就是这样来编写小程序的代码的,在vscode中打开小程序的文件夹进行编写代码,要创建页面或者组件时切换到微信开发者工具进行创建即可~
-
配置一: 将在vscode中编写的less文件自动转换成wxss文件
- 1. 在vscode中安装插件Easy LESS
- 2. 点击左下角设置,选中设置
出现以下界面,点击我选中的“打开设置json”
此时出现setting.json文件,在该文件中配置:// less转wxss "less.compile": { "outExt": ".wxss" },
less自动转wxss就配置好啦!在小程序项目页面文件中直接创建一个与页面名相同的less文件,编写样式代码保存后会自动转化成wxss替换/覆盖原有的wxss.
-
配置二: 设置小程序文件在vscode中高亮显示
- 同样也是在setting.json文件中加上配置即可// 设置小程序文件在vscode中高亮显示 "files.associations": { "*.wxss": "css", "*.wxs": "javascript", "*.wxml": "html" }
两个配置的截图如下:
好啦,这篇文章主要就是这两个教程,如果有帮助到你的话麻烦点个赞呀!!!!