LynxStudio: TTSS

Repository | Issues

Lynx language supports to Visual Studio Code.

为Lynx DSL提供的语言服务VSCODE插件

Overview

This extension based on Volar firmware.

Thanks for @johnsoncodehk's help!

插件开关｜ Switches

插件的开关可以控制插件的功能，更改开关的状态后请您重启vscode生效

重启vscode

reloadWindow

LynxStudio: Languages功能开关

languageSwitch

兼容功能开关

legacySwitch

我们推荐您使用LynxStudio: Languages提供语言功能。如果您的vscode版本过低，无法安装LynxStudio: Languages插件，您可以在设置中启用这些兼容功能。

LynxStudio: Languages

.ttml

Demo code

--
 |-card1
   |-index.json
   |-index.ttml
   |-index.ts
 |-Component1
   |-index.ts
 |-tsconfig.json
 |-package.json

index.ts

interface intf {
  interfaceProperty: string
}
const otherArgs = {
  otherArgsMethod(){},
  interfaceProperties: { 
  } as intf, 
  plainProperties : {
    plainPropertiesChild: 'abcd'
  }
}
function HOCTest<T>(a:T) {
  Card({
      data: {
          data1:'tata',
          dataArray: ['a','b','c']
      },
      properties: {
        myProperty:{
          type: String,
          value: '' 
        }
      },
      methods: {
        methodFoo() {

        }
      },
      fooOnRoot() {

      },  
      ...otherArgs,
    }) 
  return a; 
}

index.json

{
    
    "usingComponents": {
        "mycomp" : "@Component1"
      }
}

tsconfig.json

{
    "root": true,
    "compilerOptions": {
      "target": "es5",
      "lib": ["dom", "dom.iterable", "es6"],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noFallthroughCasesInSwitch": true,
      "strictPropertyInitialization": false,
      "module": "ES6",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": false,
      "noEmit": true,
      "jsx": "preserve",
      "baseUrl": ".",
      "types": ["@byted-lynx/typings"],
      "paths": {
        "@Component1":["./Component1"]
      },
    },
    "exclude": ["node_modules", "output", "lynx"]
  }

Note: 注意在tsconfig.json设定了路径别名@Component1

语法高亮和语义高亮 | Syntax Highlight & Sematic Highlight

SyntaxHighlight

插件会进行语义级别的识别，如图的otherArgsMethod()会被识别为函数。

定义跳转 | Go to definition

Definition

悬浮提示 | Hover

Hover

自动补全 | Auto-completion

Completion

类型检查 | Type Check

插件会检查参数的类型与定义的组件类型是否一致、卡片的参数是否存在

typeCheck

子组件properties类型检查 | Sub-components properties type check

考虑如下的Component1源文件

Component({
    properties: {
      myProperty:{
        type: String,
        value: ''
      }
    },
  })

插件会检查传入的参数类型与定义的类型是否一致

typeCheck

.ttss 文件

Syntax Highlight | 语法高亮

SyntaxHighlight

Diagnostics | 语法诊断

Diagnostics

Hover | 悬浮提示

Hover

Completion | 自动补全 - CSS

Completion

Completion | 自动补全 - SCSS

Completion_scss

Symbol Definitions

Definition

Color Decorators | 调色盘

Color

Formatter

Color

.lepus

Lepus文件会被内部处理为js文件，与js文件的体验对齐

.ly

Ly文件会被内部处理为Ttml卡片，与ttml卡片的体验对齐

<script>标签内部的内容会根据lang属性处理为js或ts文件 <script lang='ts'> 为ts文件默认为js文件

reactLynx检查 | reactLynx Checker

LynxStudio: Language 将会为ReactLynx开发者提供以下功能：

完整的CompilerNG编译器报错警告
lepus函用法检查
高频oncall用法写法坑点提示
文档链接跳转

其他功能

lynx-speedy 版本徽章 | lynx-speedy version badge

在懒侦测到您本地的lynx-speedy安装后，会在左下角展示lynx-speedy版本。

如果您的lynx-speedy版本过旧，会有视觉提示

targetSdkVersion版本徽章 | targetSdkVersion version badge

插件会自动侦测您本地的lynx.config.js 中定义的targetSdkVersion属性，并展示在左下角。

此功能依赖lynx-speedy版本>=2.25.0

Compiler-ng 与 lynx-speedy 版本一致性校验

插件会侦测您本地的lynx-speedy和Compiler-Ng安装的版本一致性，如果版本不match，那么会在右下角弹出一个错误消息。

LynxStudio:Language

lynx