用vscode写微信小程序的相关配置（less转wxss、vscode中高亮显示小程序文件）

前言：习惯了常用的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"
  }
  

  两个配置的截图如下：
  

好啦，这篇文章主要就是这两个教程，如果有帮助到你的话麻烦点个赞呀！！！！