ESLint 提示出错 – 在 Qwik 中出现解析错误:需要标识符。

huangapple go评论116阅读模式
英文:

ESLint is giving warning - Parsing error: Identifier expected in Qwik

问题

I see you want a translation of the code portion. Here it is:

  1. 在我的VSCode编辑器中,我收到了以下来自eslint的警告:

Parsing error: Identifier expected.eslint
(property) bind: value: Signal

  1. 我可以理解TypeScript在警告我由于某些类型不匹配而引发了错误,但我无法弄清楚如何修复它。
  2. 以下是我代码的简化版本 -
  3. ```typescript
  4. export default component$(() => {
  5. const action = useCreateUserAccount();
  6. const nameSig = useSignal(defaultValues.name);
  7. const emailSig = useSignal(defaultValues.email);
  8. const passwordSig = useSignal(defaultValues.password);
  9. useTask$(({ track }) => {
  10. const status = track(() => action.value?.status);
  11. if (status) {
  12. nameSig.value = defaultValues.name;
  13. emailSig.value = defaultValues.email;
  14. passwordSig.value = defaultValues.password;
  15. }
  16. });
  17. return (
  18. <>
  19. <Form class="space-y-4 md:space-y-6" action={action}>
  20. <div>
  21. <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
  22. <input type="text" name="name" id="name" bind:value={nameSig} placeholder="Write your name" />
  23. </div>
  24. </Form>
  25. </>
  26. );
  27. });

有关TypeScript和ESLint的依赖关系:

  • "@types/eslint": "8.37.0",
  • "@types/node": "^20.1.4",
  • "@typescript-eslint/eslint-plugin": "5.59.5",
  • "@typescript-eslint/parser": "5.59.5",
  • "eslint": "8.40.0",
  • "eslint-plugin-qwik": "~1.2.0",
  1. 请注意,这是您代码的翻译部分。
  2. <details>
  3. <summary>英文:</summary>
  4. Getting the following warning in my vscode editor from eslint

Parsing error: Identifier expected.eslint
(property) bind: value: Signal<string>

  1. [![enter image description here][1]][1]
  2. I can understand the typescript yelling at me due to some type mismatch, but I can&#39;t figure out how to fix this.
  3. Here is a trim down version of my code -

export default component$(() => {
const action = useCreateUserAccount();
const nameSig = useSignal(defaultValues.name);
const emailSig = useSignal(defaultValues.email);
const passwordSig = useSignal(defaultValues.password);

  1. useTask$(({ track }) =&gt; {
  2. const status = track(() =&gt; action.value?.status);
  3. if (status) {
  4. nameSig.value = defaultValues.name;
  5. emailSig.value = defaultValues.email;
  6. passwordSig.value = defaultValues.password;
  7. }
  8. });
  9. return (
  10. &lt;&gt;
  11. &lt;Form class=&quot;space-y-4 md:space-y-6&quot; action={action} &gt;
  12. &lt;div&gt;
  13. &lt;label for=&quot;email&quot; class=&quot;block mb-2 text-sm font-medium text-gray-900 dark:text-white&quot;&gt;Name&lt;/label&gt;
  14. &lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; bind: value={nameSig} placeholder=&quot;Write your name&quot; /&gt;
  15. &lt;/div&gt;
  16. &lt;/Form&gt;
  17. &lt;/&gt;
  18. );

});

  1. **Deb dependencies using regarding Typescript &amp; ESLint.**
  2. - &quot;@types/eslint&quot;: &quot;8.37.0&quot;,
  3. - &quot;@types/node&quot;: &quot;^20.1.4&quot;,
  4. - &quot;@typescript-eslint/eslint-plugin&quot;: &quot;5.59.5&quot;,
  5. - &quot;@typescript-eslint/parser&quot;: &quot;5.59.5&quot;,
  6. - &quot;eslint&quot;: &quot;8.40.0&quot;,
  7. - &quot;eslint-plugin-qwik&quot;: &quot;~1.2.0&quot;,
  8. [1]: https://i.stack.imgur.com/ojvDq.png
  9. </details>
  10. # 答案1
  11. **得分**: 2
  12. API`bind:value`(无空格),这里是[文档](https://qwik.builder.io/docs/components/rendering/#bind-attribute)
  13. VSCode中,`Typescript和Javascript语言特性`的代码检查工具会因为添加空格而混淆`bind:value`和许多其他属性。请使用[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)来检查你的代码,因为它工作得更好。
  14. <details>
  15. <summary>英文:</summary>
  16. the API is `bind:value` (without space) here is the
    (https://qwik.builder.io/docs/components/rendering/#bind-attribute)
  17. In VSCode, `Typescript and Javascript Language Features` linter mess up `bind:value` and many other attributes because it adds spaces. Please use [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) to lint your code because it works better.
  18. </details>

huangapple
  • 本文由 发表于 2023年7月3日 03:29:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/76600483.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定