Skip to content

Commit

Permalink
feat: support create component and improve jumpdef (#125)
Browse files Browse the repository at this point in the history
* feat: support create component and improve jumpdef

* chore: add eol
  • Loading branch information
iChenLei authored Nov 16, 2021
1 parent 113556f commit aee5de9
Show file tree
Hide file tree
Showing 13 changed files with 298 additions and 204 deletions.
22 changes: 11 additions & 11 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@ module.exports = {
env: {
node: true,
},
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
rules: {
"no-empty": 0,
"no-prototype-builtins": 0,
'no-empty': 0,
'no-prototype-builtins': 0,

"@typescript-eslint/ban-ts-comment": 0,
"@typescript-eslint/no-namespace": 0,
"@typescript-eslint/no-empty-function": 0,
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/no-unused-vars": 0,
"@typescript-eslint/no-var-requires": 0
'@typescript-eslint/ban-ts-comment': 0,
'@typescript-eslint/no-namespace': 0,
'@typescript-eslint/no-empty-function': 0,
'@typescript-eslint/no-explicit-any': 0,
'@typescript-eslint/no-unused-vars': 0,
'@typescript-eslint/no-var-requires': 0
}
};
10 changes: 10 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
2.4.2 / 2021-11-16
==================

* 新增`New Miniprogram Component`文件右键选项,快速创建一个小程序组件文件,支持配置
* 新增`minapp-vscode.cssExtname`配置
* 新增`minapp-vscode.jsExtname`配置
* 新增`minapp-vscode.wxmlExtname`配置
* 优化`跳转到定义`功能,支持style属性内插值的跳转
* 优化插件启动条件,加入`"workspaceContains:**/project.config.json"``"workspaceContains:**/app.wxss"`

2.4.1 / 2021-11-07
==================

Expand Down
69 changes: 22 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
### 主要功能

* [一键创建小程序组件](#create-component)
* [标签名与属性自动补全](#tag-and-attr)
* [根据组件已有的属性,自动筛选出对应支持的属性集合](#smart-attr)
* [属性值自动补全](#attr-value)
Expand All @@ -40,20 +41,36 @@

> **所有自动补全的模板数据都来自于官方文档,通过[脚本](https://github.com/wx-minapp/minapp-generator)自动获取的**
<a id="create-component"></a>

<a id="tag-and-attr"></a>
### 一键创建小程序组件

### 标签名与属性名自动补全
* 右键可以看到`New Miniprogram Component`选项,输入组件名即可一键创建`.wxml`,`.js`,`.wxss`,`.json`以及组件文件夹
* 创建成功后自动打开`js`文件

* wxml 中需要输入 `<` 才会触发标签补全,而 pug 语言只需要写标签开头即能触发标签补全
* 输入空格会触发对应标签的属性补全
![示例图片](https://funimg.pddpic.com/mobile_piggy/958baa82-f263-402f-8887-b1eaabffbc7c.gif)

![示例图片](https://n1image.hjfile.cn/res7/2018/03/01/13631761451ae134c6eb3ea2ed1a6a12.gif)
* 创建组件支持配置css/wxml/js后缀,比如项目使用less/vue/ts

![示例图片](https://funimg.pddpic.com/mobile_piggy/a4af85c2-d4cb-44f2-aa47-831b80b20c7a.gif)

```jsonc
{
"minapp-vscode.cssExtname": "less", // 默认wxss,支持styl sass scss less css
"minapp-vscode.wxmlExtname": "vue", // 默认wxml,支持vue wpy
"minapp-vscode.jsExtname": "ts" // 默认js,支持ts coffee
}
```


<a id="tag-and-attr"></a>

### 标签名与属性名自动补全

* wxml 中需要输入 `<` 才会触发标签补全,而 pug 语言只需要写标签开头即能触发标签补全
* 输入空格会触发对应标签的属性补全

![示例图片](https://n1image.hjfile.cn/res7/2018/03/01/13631761451ae134c6eb3ea2ed1a6a12.gif)


<a id="smart-attr"></a>
Expand All @@ -66,10 +83,6 @@
![示例图片](https://n1image.hjfile.cn/res7/2018/03/09/5c5704b51a37df84b5c6663d29a545f6.gif)






<a id="attr-value"></a>

### 属性值自动补全(有可选值的情况下才会触发补全)
Expand All @@ -79,10 +92,6 @@
![示例图片](https://n1image.hjfile.cn/res7/2018/03/10/aaba780a36f1de1b87687295bc6fc922.gif)






<a id="attr-definition"></a>

### 点击模板文件中的函数或属性跳转到 js/ts 定义的地方(纯 wxml 或 pug 文件才支持,vue 文件不完全支持)
Expand All @@ -92,9 +101,6 @@
![示例图片](https://n1image.hjfile.cn/res7/2018/11/20/c8d41ef5bce1b2128bb7a830d06338b9.gif)





<a id="attr-class-value"></a>

### 样式名自动补全(纯 wxml 或 pug 文件才支持,vue 文件不完全支持)
Expand All @@ -119,11 +125,6 @@
![示例图片](https://n1image.hjfile.cn/res7/2018/11/15/559184bb3ff7cc2fb76c204010f6f042.gif)







<a id="vue"></a>

### 在 vue 模板文件中也能自动补全,同时支持 pug 语言
Expand All @@ -146,9 +147,6 @@ vue 中的 template 板支持两个属性:
![示例图片](https://n1image.hjfile.cn/res7/2018/04/09/0b4573624091b04566232c38df08e323.gif)





<a id="link"></a>

### 支持 link(纯 wxml 或 pug 文件才支持,vue 文件不支持)
Expand All @@ -161,10 +159,6 @@ vue 中的 template 板支持两个属性:
![示例图片](https://n1image.hjfile.cn/res7/2018/04/27/dd7f301dc1e1593209d7f7ac169fd047.gif)






<a id="custom-component"></a>

### 自定义组件自动补全(纯 wxml 文件才支持,vue 或 pug 文件不支持)
Expand All @@ -176,11 +170,6 @@ vue 中的 template 板支持两个属性:
![示例图片](https://n1image.hjfile.cn/res7/2018/03/09/fce0b3e9496cae95c1c81523725a1fef.gif)







<a id="highlight"></a>

### 模板文件中 js 变量高亮(纯 wxml 或 pug 文件才支持,vue 文件不支持)
Expand All @@ -198,11 +187,6 @@ vue 中的 template 板支持两个属性:
- pug 语言中注释中的变量也会高亮 (pug 是基于缩进的,正则不太好处理)







<a id="snippets"></a>

### 内置 snippets
Expand All @@ -215,11 +199,6 @@ vue 中的 template 板支持两个属性:
![示例图片](https://n1image.hjfile.cn/res7/2018/05/26/4a25927085e96e6bd9f05bf735621a8b.gif)







<a id="emmet"></a>

### 支持 emmet 写法
Expand Down Expand Up @@ -290,7 +269,3 @@ minapp 插件会自动将 .pug 文件关联到 `wxml-pug` 文件类型。所以
* [ ] app/page/component 的 json schema 自动关联
* [x] 添加常用的 snippets
* [x] 支持识别 self close tag


[travis-image]: https://travis-ci.org/wx-minapp/minapp-vscode.svg?branch=master
[travis-url]: https://travis-ci.org/wx-minapp/minapp-vscode
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

64 changes: 59 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "minapp-vscode",
"displayName": "WXML - Language Service",
"description": "微信小程序.wxml文件代码高亮,标签、属性的智能补全(同时支持原生小程序、mpvue wepy 框架,并提供code snippets)",
"version": "2.4.1",
"description": "wechat miniprogram .wxml file syntax highlight,code autocomplete(support native miniprogram、mpvue and wepy framework,provide code snippets)",
"version": "2.4.2",
"publisher": "qiu8310",
"extensionKind": [
"workspace"
Expand All @@ -18,8 +18,9 @@
"clear": "rm -rf ./dist"
},
"keywords": [
"小程序",
"微信",
"小程序",
"minapp",
"wxml",
"wxss",
"wxs",
Expand All @@ -28,7 +29,7 @@
],
"license": "MIT",
"author": "Mora <[email protected]> (https://github.com/qiu8310)",
"contributors": [
"maintainers": [
{
"name": "Lei Chen",
"email": "[email protected]",
Expand All @@ -50,6 +51,8 @@
],
"activationEvents": [
"workspaceContains:minapp.cjson",
"workspaceContains:**/project.config.json",
"workspaceContains:**/app.wxss",
"onLanguage:wxml-pug",
"onLanguage:wxml",
"onLanguage:vue"
Expand Down Expand Up @@ -184,6 +187,39 @@
},
"description": "全局的样式文件,系统会自动从这些指定的文件中获取 className,用于模板中的 class 补全"
},
"minapp-vscode.wxmlExtname": {
"type": "string",
"default": "wxml",
"enum": [
"wxml",
"vue",
"wpy"
],
"description": "创建小程序组件时候wxml文件类型,默认为.wxml"
},
"minapp-vscode.jsExtname": {
"type": "string",
"default": "js",
"enum": [
"js",
"ts",
"coffee"
],
"description": "创建小程序组件时候js文件类型,默认为.js"
},
"minapp-vscode.cssExtname": {
"type": "string",
"default": "wxss",
"enum": [
"wxss",
"css",
"styl",
"less",
"sass",
"scss"
],
"description": "创建小程序组件时候css样式文件类型,默认为.wxss"
},
"minapp-vscode.styleExtensions": {
"type": "array",
"items": {
Expand All @@ -193,7 +229,9 @@
"wxss",
"css",
"less",
"scss"
"scss",
"sass",
"styl"
],
"description": "当前样式文件的后缀中,系统会自动查找和当前模板同名的样式文件,用于模板中的 class 补全"
},
Expand Down Expand Up @@ -253,6 +291,22 @@
}
}
},
"menus": {
"explorer/context": [
{
"command": "minapp-vscode.createMiniprogramComponent",
"group": "navigation@10",
"when": "resourceExtname == '' && activeViewlet == 'workbench.view.explorer'"
}
]
},
"commands": [
{
"command": "minapp-vscode.createMiniprogramComponent",
"title": "New Miniprogram Component",
"category": "minapp-vscode"
}
],
"themes": [],
"languages": [
{
Expand Down
3 changes: 3 additions & 0 deletions src/commands/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const COMMANDS = {
createComponent: 'minapp-vscode.createMiniprogramComponent'
}
51 changes: 51 additions & 0 deletions src/commands/createMiniprogramComponent.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { Uri, window, workspace } from 'vscode';
import * as fs from 'fs/promises';
import * as path from 'path';

import { config } from '../plugin/lib/config';

const jsonTpl =
`{
"component": true
}
`;

/**
* create a new miniprogram component
*
* my-component
* |- my-component.json
* |- my-component.wxml
* |- my-component.js
* |- my-component.wxss
*/
export async function createMiniprogramComponent(folderPath: Uri): Promise<void> {
const input = await window.showInputBox({
prompt: "Enter the component name",
validateInput: (s: string): string | undefined => s && s.trim() ? undefined : "Component name must not be empty.",
placeHolder: "Example: avatar (will create 4 files, default is avatar.wxss avatar.json avatar.js avatar.wxml)",
ignoreFocusOut: true,
})
const componentName = input?.trim();
if (componentName) {
fs.mkdir(path.join(folderPath.fsPath, componentName)).then(() => {
Promise.all([
fs.writeFile(path.join(folderPath.fsPath, componentName, componentName + '.' + config.jsExtname), ""),
fs.writeFile(path.join(folderPath.fsPath, componentName, componentName + '.' + config.cssExtname), ""),
fs.writeFile(path.join(folderPath.fsPath, componentName, componentName + '.' + config.wxmlExtname), ""),
fs.writeFile(path.join(folderPath.fsPath, componentName, componentName + '.json'), jsonTpl)
]).then(() => {
const openJsPath = Uri.file(path.join(folderPath.fsPath, componentName, componentName + '.' + config.jsExtname));
workspace.openTextDocument(openJsPath).then(doc => {
if (doc) {
window.showTextDocument(doc);
}
});
}).catch(err => {
window.showErrorMessage(`create file error: ${err}`)
})
}).catch(err => {
window.showErrorMessage(`create folder error: ${err}`)
})
}
}
Loading

0 comments on commit aee5de9

Please sign in to comment.