VSCode配置MPX开发

最新推荐文章于 2024-05-16 11:58:53 发布

Simorel

最新推荐文章于 2024-05-16 11:58:53 发布

阅读量1.1k

点赞数 1

分类专栏：微信小程序 # mpx

本文链接：https://blog.csdn.net/Simoral/article/details/107003065

版权

微信小程序同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

mpx

2 篇文章 0 订阅

订阅专栏

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

文章目录

插件篇

Auto CLose Tag

Auto Close Tag

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

Color Highlight

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

language-stylus

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

minapp

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

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

mpx

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

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

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

配置篇

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

{
   // 语言的文件关联
  "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
}

以下配置在 mpx 文件 template 中

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

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

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

只能使用：
```
	<script type="application/json"></script>
```