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

Question

Getting the following warning in my vscode editor from eslint

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

I can understand the typescript yelling at me due to some type mismatch, but I can't figure out how to fix this.

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);

    useTask$(({ track }) => {
        const status = track(() => action.value?.status);
        if (status) {
            nameSig.value = defaultValues.name;
            emailSig.value = defaultValues.email;
            passwordSig.value = defaultValues.password;
        }
    });


    return (
        <>            
            <Form class="space-y-4 md:space-y-6" action={action} >
                <div>
                    <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
                    <input type="text" name="name" id="name" bind: value={nameSig} placeholder="Write your name" />
                </div>
            </Form>
        </>
    );
});

Deb dependencies using regarding 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",

Answer 1

the API is bind:value (without space) here is the docs

In VSCode, Typescript and Javascript Language Features linter mess up bind:value and many other attributes because it adds spaces. Please use Prettier to lint your code because it works better.