VSCode 微信小程序 开发环境配置 详细教程
<h1 id="本博客已暂停更新需要请转新博客httpwwwwhbwikicom231html">本博客已暂停更新，需要请转新博客http://www.whbwiki.com/231.html</h1><blockquote>
<p>配置 VsCode 微信小程序开发环境并非不用官方的 <strong>微信小程序开发者工具</strong> ，而是两者配合适用，可以极大的提高我们的开发效率。</p>
</blockquote>
<h1 id="安装微信小程序开发者工具">安装微信小程序开发者工具</h1>
<p>下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html</p>
<p>根据自己的系统下载对应版本，然后一直点击下一步安装即可。</p>
<p><img src="https://s1.ax1x.com/2020/09/03/winVAS.png" alt="" loading="lazy"></p>
<h1 id="安装vscode">安装VsCode</h1>
<p>下载地址：https://code.visualstudio.com/<br>
如下图选择适合自己系统的下载之后安装就行</p>
<p><img src="https://img-blog.csdnimg.cn/20200130195410736.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTgxMjIwMQ==,size_16,color_FFFFFF,t_70" alt="" loading="lazy"></p>
<blockquote>
<p><strong>注意：建议直接安装在Ｃ盘，方便配置，软件大小本身不大！！！</strong></p>
</blockquote>
<p><img src="https://img-blog.csdnimg.cn/2020013021212998.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTgxMjIwMQ==,size_16,color_FFFFFF,t_70" alt="" loading="lazy"></p>
<blockquote>
<p><strong>注意：一定要将 添加到PATH 这项打钩！！！</strong></p>
</blockquote>
<h1 id="安装开发必备插件">安装开发必备插件</h1>
<ol>
<li>Easy less支持使用less语法 ，因为微信小程序开发者工具不支持less ，所以要配合使用</li>
</ol>
<p><img src="https://s1.ax1x.com/2020/09/03/wiukvR.png" alt="" loading="lazy"></p>
<ol start="2">
<li>微信小程序开发者工具插件，开发必备</li>
</ol>
<p><img src="https://s1.ax1x.com/2020/09/03/wiuEK1.png" alt="" loading="lazy"></p>
<h1 id="配置less">配置Less</h1>
<p>快捷键command+逗号打开用户设置，搜 less.complie, 点击编辑添加到右边，设置commpress是否开启压缩，sourceMap是否生成.map文件。配置如下图</p>
<pre><code class="language-javascript">"less.compile": {
"outExt": ".wxss"
},
"": {
"editor.suggest.insertMode": "replace"
}
</code></pre>
<h1 id="结束">结束</h1>
<p>至此，开始开发你的小程序吧！！！</p><br><br>
来源：https://www.cnblogs.com/wuhongbin/p/13773458.html
頁:
[1]