Ux 语言服务器

⚡ 高性能的快应用和 vela 的 ux 语言服务插件

• English
• 简体中文

快速开始

如果想体验完整的 ux 语言服务，请在项目根目录创建 jsconfig.json / tsconfig.json。

格式化

⚠️ ux 语言服务器只有一个 全文格式化 功能，不能格式化任意范围。因此，只有 格式化文档 命令可用。格式化选定内容 命令不起作用。

ux 语言服务器使用 prettier 作为格式化引擎。因此，您可以使用 .prettierrc 或 .prettierrc.json 文件来自定义格式化规则。

example:

// in your .prettierrc file
{
    "semi": true,
    "singleQuote": false,
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": true,
    "arrowParens": "always",
    "bracketSameLine": false,
    "bracketSpacing": true,
    "htmlWhitespaceSensitivity": "css"
}

JS 文件类型提示

ux-types npm 包提供了快应用和 vela 的类型定义，执行 npm install ux-types --save-dev 以安装。

使用

import { defineComponent } from 'ux-types';

export default defineComponent({
   private: {
    title: "title"
   },
   onShow() {
    this.fn();
   },
   fn() {
    console.log(this.title);
   }
})

JS 接口提示

在项目根目录创建 jsconfig.json，并添加以下内容：

{
    "compilerOptions": {
        "module": "preserve",
        "types": ["ux-types/feature"],
    }
}

想要使用 TypeScript ？

由于 ux <script> 标签中仅支持 js，因此，如果您想使用 TypeScript，需要先将 ts 编译成 js，之后导入到 ux 中。

• 安装 ux-types，npm install ux-types --save-dev

• 项目根目录创建 tsconfig.json 文件。并添加以下内容：

{
    "compilerOptions": {
        "target": "esnext",
        "types": ["ux-types/feature"],
        "moduleResolution": "bundler",
        "noImplicitThis": true, // defineComponent 中将会有 this 类型提示
        "allowJs": true // 能够从 ux 的 template 中获取类型提示
    }
}

• 在 package.json 中添加以下脚本：

{
    "scripts": {
        "dev": "tsc -w"
    }
}

• 最后，执行 npm run dev，在 ux 的 <script> 标签中写入以下内容：

<!-- 注意！使用 TypeScript 时，本质上导入的还是编译后的 js，请灵活使用 -->
<script>
import page from "./{文件名}";
export default page;
</script>

Ux Language Server

⚡ A high-performance language service plugin for Quick App and Vela's ux files

• English
• 简体中文

Quick Start

To experience the full ux language service, please create a jsconfig.json / tsconfig.json in your project root directory.

Formatting

⚠️ The ux language server only provides full-document formatting and cannot format arbitrary ranges. Therefore, only the Format Document command is available. The Format Selection command will not work.

The ux language server uses prettier as its formatting engine. You can customize formatting rules using .prettierrc or .prettierrc.json files.

example:

// in your .prettierrc file
{
    "semi": true,
    "singleQuote": false,
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": true,
    "arrowParens": "always",
    "bracketSameLine": false,
    "bracketSpacing": true,
    "htmlWhitespaceSensitivity": "css"
}

JS File Type Hints

The ux-types npm package provides type definitions for Quick App and Vela. Run npm install ux-types --save-dev to install.

Usage

import { defineComponent } from 'ux-types';

export default defineComponent({
   private: {
    title: "title"
   },
   onShow() {
    this.fn();
   },
   fn() {
    console.log(this.title);
   }
})

JS Interface Hints

Create a jsconfig.json in your project root directory with the following content:

{
    "compilerOptions": {
        "module": "preserve",
        "types": ["ux-types/feature"],
    }
}

Want to use TypeScript?

Since the <script> tag in ux files only supports JavaScript, if you want to use TypeScript, you'll need to first compile your TypeScript code into JavaScript before importing it into the ux file.

• Install ux-types: npm install ux-types --save-dev

• Create a tsconfig.json file in your project root directory with the following content:

{
    "compilerOptions": {
        "target": "esnext",
        "types": ["ux-types/feature"],
        "moduleResolution": "bundler",
        "noImplicitThis": true, // Enables this type hints in defineComponent
        "allowJs": true // Enables type hints from ux templates
    }
}

• Add the following script to your package.json:

{
    "scripts": {
        "dev": "tsc -w"
    }
}

• Finally, run npm run dev, and write the following content in the <script> tag of the ux file:

<!-- Note! When using TypeScript, you're essentially importing the compiled JavaScript files. Please use this approach flexibly. -->
<script>
import page from "./{filename}";
export default page;
</script>

💌 Thanks for volar

Thanks to the Volar, aiot-ux is inspired by Volar.