GemElement IDE 支持

目前 IDE 只考虑 vscode,vscode 构架:


高亮:
  • createCSSSheet(css``)
  • createCSSSheet({ h1: styled.tag`css rules text` })
  • html``
代码片段:
  • 渲染到 body
  • 创建新元素
命令:
  • jsdoc 生成
跳转到定义和自动完成:
  • 自定义元素定义和自动完成
  • attr/prop/part/slot 定义和自动完成
验证:
  • attr/prop 的类型验证,required 验证
  • * part 自动完成以及验证
  • * slot 自动完成以及验证
  • * css state 自动完成以及验证
提示:
  • 使用 store 时没有 connect
  • 使用 i18n 时没有 connect
  • 使用 styled 时没有 adopted

ESLint-plugin(?):
  • 禁止覆盖 GemElement 方法,属性
  • 禁止覆盖 HTMLElement 方法属性,覆盖
  • CustomElement 成员顺序:
    • 静态字段-字段
    • 公共方法/访问器(内部不使用的)
    • 构造函数
    • 私有字段/访问器
    • 生命周期 // willMount-shouldUpdate-render-mounted-updated-unmount

lit-plugin:
  • Strict 严格模式
  • No-missing-import 防止漏导入,而重复导入有无所谓
  • No-unknown-attribute 需要自定义元素导出 attribute

lit-analyze:验证

理想状态:用 ts 编写 GemElement,IDE 能根据装饰器理解自定义元素,不需要写 jsdoc 注释;发布时生成(web-component-analyzer) customData.json 供扩展(lit-analyze)加载,让 GemElement 作为第三方模块使用时 IDE 也能理解。