VSCode配置MPX开发

明人不说暗话，咱们直接上干货，大家都知道MPX是一个能有效帮助开发微信小程序的框架（真香），但是怎么才能在VSCode中完美使用MPX呢？下面的内容就来介绍一下我的经验：

---

---

插件篇

Auto CLose Tag

Auto Close Tag

*这个插件可以用来自动闭合标签（可选）

Color Highlight

Color Highlight

*这个插件可以将我们Stylus内的颜色渲染出来（可选）

language-stylus

language-stylus

*这个插件主要是为我使用的Stylus服务（可选）

minapp

minapp

这个插件就很重要了，提供了MPX内 <template> 内的微信小程序语法提示
配置起来也很简单：

<template lang="wxml" minapp="mpx">
	<!-- 表示使用 wxml 语言，不使用任何框架 -->
</template>

mpx

mpx

这个是官方推荐的语法高亮插件，看了一下Issue说是暂时关闭了格式化，没关系我们可以先用 Prettier 插件顶着

Prettier - Code formatter

Prettier - Code formatter

我发现一个小问题，就是我配置在 VSCode工作区 的关于Prettier的相关配置都不起作用，没办法，我只能单独在项目根目录下创建了一个 prettier.config.js:

// prettier.config.js
module.exports = {
  trailingComma: 'es5',
  singleQuote: true,
  semi: true,
};

另外，推荐一下 Prettier 相关配置的网站：https://prettier.io/docs/en/options.html

Vetur

Vetur

这个插件是vue提供的vscode下的开发工具。

配置篇

1. 以下配置建议配置在工作区:

   {
      // 语言的文件关联
     "files.associations": {
       // [mpx支持](https://didi.github.io/mpx/single/what-is-single-file.html#vscode)
       "*.mpx": "vue"
     },
     // 在保存到时候自动格式化代码（格式化方式依选择而定）
     "editor.formatOnSave": true,
     // 关闭一些vetur的报错
     "vetur.validation.script": false,
     "vetur.validation.style": false,
     "vetur.validation.template": false
   }
   

2. 以下配置在 mpx 文件 template 中

   <template lang="wxml" minapp="mpx">
   	<!-- ... -->
   </template>
   

3. 注意
   不知道是哪个插件起了冲突，我猜测是因为vetur，不能使用如下的json声明方式：

   <script name="json"></script>

   只能使用：

   	<script type="application/json"></script>