微信小程序开发（三）开发工具推荐VSCode
<h3 class="md-end-block md-heading"><span style="font-size: 14px">虽然微信小程序官方开发工具非常优秀，但用的时间久了，会发现一些问题，比如代码编辑区小，自定义能力差，不支持插件，有时还会出现莫名其妙的bug，最不能忍的是编辑器</span><span style="font-size: 14px"><strong>代码提示功能不健全</strong><span class="md-plain">，这对于新手来说，很不友好。为了让新手少走弯路，我推荐一款编辑器<strong>VSCode</strong><span class="md-plain">。</span></span></span></h3><p class="md-end-block md-p"><span class="md-plain">Visual Studio Code,简称VSCode，是微软出的一款<span><strong>轻量级</strong><span class="md-plain">代码编辑器，<span><strong>免费，功能强大</strong><span class="md-plain">，支持中文，对JavaScript支持非常好，自带很多功能，例如代码格式化，代码智能提示补全、而且支持各种插件。</span></span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">官网：<span class="md-link">https://code.visualstudio.com/</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">关于vscode，我就不过多描述了，他功能很强大，下面我们来重点看看如何来用他开发微信小程序。</span></p>
<p class="md-end-block md-p md-focus"><span class="md-plain md-expand">安装完成，设置成显示中文后（设置中，使用快捷键ctrl+shift+p,在弹出窗口输入Configure Display Language，然后选择zh-cn即可）。</span></p>
<p class="md-end-block md-p"><span class="md-plain">由于用原生vscode开发微信小程序，代码提示，并不友好，为此，我们需要安装几个插件，放心，非常简单。</span></p>
<p class="md-end-block md-p"><span class="md-plain">打开vscode,点击扩展管理按钮，如下图示：或者直接按快捷键：ctrl+shift+x</span></p>
<p class="md-end-block md-p"><img src="https://img2020.cnblogs.com/i-beta/1973423/202003/1973423-20200320162014817-410019738.png"></p>
<p>在打开的扩展管理面板，搜索wxml,如下图示：</p>
<p class="md-end-block md-p"><span class="md-plain"><img src="https://img2020.cnblogs.com/i-beta/1973423/202003/1973423-20200320162037341-1534366630.png"></span></p>
<p> <span class="md-image md-img-loaded" data-src="2.png"><span class="md-plain">然后点击install按钮，即可！是不是很简单。</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">同样操作，我们再安装minapp与wechat-snippet<span class="md-image md-img-loaded" data-src="3.png"><img src="4.png"><img alt="" data-local-refresh="true"></span></p>
<p class="md-end-block md-p"><span class="md-plain"><img alt="" width="699" height="124" data-src="https://img2020.cnblogs.com/i-beta/1973423/202003/1973423-20200320162112917-1104152533.png"></span></p>
<p> </p>
<p> <img src="https://img2020.cnblogs.com/i-beta/1973423/202003/1973423-20200320162117643-1072763659.png"></p>
<p> OK!</p>
<p class="md-end-block md-p"><span class="md-plain">这就差不多了。</span></p>
<p class="md-end-block md-p"><span class="md-plain">下面我们结合微信小程序开发工具与VScode一起开发小程序的具体步骤，</span></p>
<ol class="ol-list" start="">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">首先，用微信小程序工具创建一个小程序，比如，我们创建一个helloword的小程序，创建完成后，可以关闭微信小程序开发工具的调试器与 编辑器窗口，如下图示。</span></p>
</li>
</ol>
<p class="md-end-block md-p"><span class="md-plain"><img src="https://img2020.cnblogs.com/i-beta/1973423/202003/1973423-20200320162149135-1164171902.png"></span></p>
<p> <span class="md-plain">2.打开VScode,选择文件-打开文件夹（ctrl+k, ctrl+o)，然后选择刚创建的helloword项目的文件夹，点击选择文件夹</span></p>
<p class="md-end-block md-p"><img src="https://img2020.cnblogs.com/i-beta/1973423/202003/1973423-20200320162204331-247822475.png"></p>
<p> <span class="md-plain">3.可以愉快的撸代码了！</span></p>
<p class="md-end-block md-p"><img src="https://img2020.cnblogs.com/i-beta/1973423/202003/1973423-20200320162219188-716132234.png"></p>
<p> <span class="md-plain">是不是很容易！</span></p>
<p class="md-end-block md-p"><span class="md-plain">选择适合自己的工具，会大大提升自己的编程效率。</span></p>
<p class="md-end-block md-p"><span class="md-plain">关注我！让你有更愉快的编程体验！</span></p>
<p class="md-end-block md-p"><span class="md-expand"><strong>希望大家编码愉快！享受编码的乐趣与艺术！</strong></span></p>
</div>
<div id="MySignature" role="contentinfo">
关注我，你会获得更好的学习体验！
感兴趣的小伙伴加群1049138113，一起讨论，学习<br><br>
来源：https://www.cnblogs.com/lyxt/p/12532520.html
頁:
[1]