vscode配置微信小程序编辑环境 2024/2/10更新

上一篇

1.下载插件

格式化插件

wxml高亮支持插件

一些基础功能

2.配置vscode设置

如果没有这个文件是因为没有设置过内容所以没有创建，自己创建一个

1. 文件夹.vscode
2. 文件名settings.json
3. 内容

{
    "minapp-vscode.wxmlFormatter":"prettier",// wxml格式化插件
    "minapp-vscode.prettier":{//prettier配置
      "useTabs":false,//tab缩进
      "tabWidth":2, //tab宽度
      "printWidth":80,//换行宽度
      "singleQuote":false//单引号
    },
    "[wxml]":{//wxml格式化
      "editor.defaultFormatter":"qiu8310.minapp-vscode"//wxml格式化插件
    },
    "minapp-vscode.formatMaxLineCharacters":80//换行宽度
}

配置默认格式化文档的插件为下载的插件（右键选择进行格式化文档时会跳出来让选）

3.js提示的配置

这里需要用到npm下载，之前没有看过vant组件的类似配置的先看这篇

微信小程序（二十）Vant组件库的配置

然后分别输入以下两句进行下载配置：

npm install miniprogram-api-typings
npm install miniprogram-api-typings@2.4.1

在安装的过程中可能会出现这个情况

这里换个源就行，输入npm config set registry https://registry.npmjs.org/然后再进行上面的下载过程

在根目录创建这个文件

文件名jsconfig.json

文件内容

{
    "typeAcquisition": {
        "include": ["wechat-miniprogram"]
    }
}

光标移动到某个js文件的字节上

有详细的解释说明安装成功了