# IDE 高亮配置

# IntelliJ

如果使用 IntelliJ 系 IDE 开发，可将.mpx后缀文件关联到vue模板类型，按vue模板解析。

关联文件类型

但会报一个warning提示有重复的script标签，关闭该警告即可。

关闭警告

# vscode

git地址 (opens new window)，有任何vscode插件的问题和需求可在仓库中提issue

下载

  1. 下载地址 (opens new window)

  2. 也可直接在vscode扩展处搜索mpx即可下载

使用

# 插件功能介绍

  • 高亮
  • emmet
  • 跳转定义
  • 自动补全
  • eslint
  • 格式化

视频介绍 (opens new window)

# 高亮

  与其他语言插件无异，提供相应代码的高亮，因为Mpx分为四个模块，所以每个模块都有相应的语法高亮，还包括注释快捷键，也区分了相应模块，比如<template>中使用的是html的高亮，且注释是<!-- -->,而<script>中就是js的高亮，注释是//

image

# emmet

  早在使用sublime时就在使用emmet插件，以提高写HTML的效率。

  比如键入多个<view>标签：view*n。

  比如一些标签的快速键入，配合tab或者Enter键快速键入

  不仅仅是<template>模块，css，scss，less，stylus，sass模块也有相应的快捷指令

image image

提示组件标签

我们可以像编写 html 一样，只要输入对应的单词就会出现对应的标签，比如输入的是 view ，然后按下 tab 键，即可输入 <view></view> 标签。

图片名称

组件指令提示

指令的提示类似于 vue 文件一样，只要输入对应的指令前缀就会出现对应的完整指令，比如输入的是 wx ，然后按下 tab 键，就可以输入 wx:if="" 指令。

图片名称

组件属性提示

微信小程序的每个组件都有一些属性选项，在编写组件的时候输入前缀就会出现完整的属性，并且包含了属性的说明和属性的类型。

图片名称

组件事件提示

给组件绑定事件，也是只需要输入事件的前缀，就会出现完整的事件列表，然后按下 tab 键，即可输入 bindtap="" 类似的事件。

图片名称

# 跳转定义

  command + 鼠标左键 查看定义位置，也可以在当前文件查看内容，决定是否跳转

image

# 自动补全

  毕竟Mpx是个小程序的框架，对于微信和支付宝的api快速补全snippets没有怎么能行，可在<script>中通过键入部分文字插入相应的代码块

image

# eslint

  eslint这块要分两部分来讲，一部分是插件实现了按照模块区分的简单的eslint，另一部分是要配合eslint的vscode插件，配置.eslintrc高阶的eslint检测。

部分一可通过配置开关

<template>是通过我们自己实现的eslint插件eslint-plugin-mpx，通过调eslint提供的引擎api，返回eslint校验的结果，我们再进行展示。

<script>中是通过调用typescript提供的检测js代码的api来进行检测，返回 的校验结果也是不太符合语法的，基础的检测，不会过于苛刻

<style>中会根据lang的设定进行相应的检测，此检测是vscode官方提供的库 vscode-css-languageservice

<json>模块同tempalte，用到了一个eslint插件eslint-plugin-jsonc来检测json的部分

image

部分二可参照此链接 (opens new window)配置

# 代码格式化

支持代码格式化 JavaScript (ts)· JSON · CSS (less/scss/stylus) · WXML，通过鼠标右键选择代码格式化文档。

图片名称

默认每个区块都是调用 Prettier 这个库来完成格式化的，当然也可以在设置中切换成使用其他库。

图片名称

如果切换成 none 将会禁用格式化。

Prettier 支持从项目根目录读取 .prettierrc 配置文件。配置选项可以参考 官方 (opens new window) 文档。.prettierrc 文件可以使用 JSON 语法编写，比如下面这样：

{
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

注意：由于 Prettier 这个库不支持格式化 stylus 语法，所以 stylus 的格式化使用另外一个 stylus-supremacy 库，配置 stylus 格式化规则只能在编辑器的 settings 中配置。

"mpx.format.defaultFormatterOptions": {
  "stylus-supremacy": {
    "insertColons": false, // 不使用括号
    "insertSemicolons": false, // 不使用冒号
    "insertBraces": false, // 不使用分号
    "insertNewLineAroundImports": true, // import之后插入空行
    "insertNewLineAroundBlocks": false // 每个块不添加空行
  }
}

总结一下，配置格式化有两种方式，一种是使用 .prettierrc 文件的形式配置，另一种是在编辑器的 settings 中自行配置，通过 mpx.format.defaultFormatterOptions 选项。

← 模板语法 →