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 也能理解。