VSCode配置MPX开发

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

文章目录

插件篇
- Auto CLose Tag
- Color Highlight
- language-stylus
- minapp
- mpx
- Prettier - Code formatter
- Vetur
配置篇

插件篇

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>
```

VSCode配置MPX开发相关推荐

vscode中装js解释器_h5学习记录（1）--vscode配置js开发环境
文笔不是很好,第一次写东西,主要为了记录h5的学习过程.今天记录的是vscode配置js开发环境. 什么是VSCode Visual Studio Code (简称VS Code/VSC) 是一款于2 ...
用VScode配置Python开发环境引用
引用:用VScode配置Python开发环境 - 简书前言 VScode是一个相当优秀的IDE,具备开源.跨平台.模块化.插件丰富.启动时间快.颜值高.可高度定制等等优秀的特质,不愧是微软爸爸的私生 ...
VSCode配置JAVA开发环境，java初级面试笔试题
我总结出了很多互联网公司的面试题及答案,并整理成了文档,以及各种学习的进阶学习资料,免费分享给大家. 扫描二维码或搜索下图红色VX号,加VX好友,拉你进[程序员面试学习交流群]免费领取.也欢迎各位一起 ...
VSCode配置Python开发环境！
VsCode系列:VSCode配置Python开发环境! 今天博主跟大家聊一聊如何使用VsCode系列:VSCode配置Python开发环境!不喜勿喷,如有建议欢迎补充.讨论! 关于安装和汉化可以观看 ...
vscode配置OpenGL开发环境【详细】
vscode配置OpenGL开发环境[详细] 0. 前言本配置过程是参考b站的一位up主文档大嫖客的视频,将其总结为文本文档,以便记忆. up主视频地址为:https://www.bilibili. ...
VSCode配置python开发环境无法找到自己设置的python编译器
VSCode配置python开发环境无法找到自己设置的python编译器前言一. 分别安装VScode和python 二.vscode配置python环境 1.在vscode里安装官方python ...
vscode 配置javaweb开发环境,超级简单,纯新手带图,学会后真香.宇宙无敌第一编辑器vscode
vscode配置javaweb开发环境 1.vscode配置java环境 2.下载tomcat 在官网中下载https://tomcat.apache.org/download-10.cgi 3.下载 ...
VSCode配置JAVA开发环境windows 2020
VSCode配置JAVA开发环境windows 2020(傻瓜式) 下载安装下载今天想用vscode配置Java,结果网上的教程把我看傻了,一个比一个复杂,又是setting.json,又是添加 ...
vs code python_用VScode配置Python开发环境
前言 VScode是一个相当优秀的IDE,具备开源.跨平台.模块化.插件丰富.启动时间快.颜值高.可高度定制等等优秀的特质,不愧是微软爸爸的私生子. 所以用VScode来编写Python,也是相当的好 ...