search

sveltejs / svelte-eslint-parser

Svelte parser for ESLint
https://sveltejs.github.io/svelte-eslint-parser/
MIT License
84 stars 17 forks source link

Support for Svelte v5 #423

Open ota-meshi opened 7 months ago

ota-meshi commented 7 months ago

Related to https://github.com/sveltejs/eslint-plugin-svelte/issues/587

baseballyama commented 7 months ago

And we need to hundle .svelte.js file.

baseballyama commented 7 months ago

@ota-meshi

Apply correct type information to $derived.

Does this issue still exist?

ota-meshi commented 7 months ago

The issue still exists. In the following source code, it is reported by @typescript-eslint/no-unsafe-argument.

export type Info = { n: number };
export function foo() {
  let a: Info | null = $state(null);
  a = null; // *
  const d = $derived(a?.n ? fn(a.n) : null);
                               ^^^
  return {
    get d() {
      return d;
    },
    set(b: Info | null) {
      a = b;
    },
  };

  function fn(n: number) {
    return n * 2;
  }
}

(I don't often do a = null;, but I think you can see that the type information is incorrect.)

DEMO:

https://typescript-eslint.io/play#ts=5.2.2&fileType=.ts&code=CYUwxgNghgTiAEYD2A7AzgF3gEk1DIAXPADwAqAfABRTFkCU8AvBfGQNwBQoksCy6LNlAwAlgDcQwYuWq02jFmy4gAHgAckMLBgCe6hAEkUAMyTN4Ab3gpiKAK4BbAEYgY8AL4qNWrCfsoYBiiqPBmSFSMlpzw8BAgWPLGZvAAPjb2EBAWuBj4IFQOWfRcsVAWRRDs8AD0NfAAVDGIqJjwwDkiElI0APwAdCjwvWEoNIOMdpkQJc1wGPYwQ9GxsQDmCe2RVs2r8POLQ8Clqx4ANLvwaAlUzsTJ5umVUZdlFs4nsefNXpzN-oFgqETGNbBkXG4XnsDksbI14AAmE4eTgooA&eslintrc=N4KABGBEBOCuA2BTAzpAXGUEKQAIBcBPABxQGNoBLY-AWhXkoDt8B6Jge1tieQEMAZolp9oAc1gBbRC3RRE0aB2iRwYAL4h1QA&tsconfig=N4KABGBEDGD2C2AHAlgGwKYCcDyiAuysAdgM6QBcYoEEkJemy0eFYDAruuGAL4g9A&tokens=false

baseballyama commented 7 months ago

Ah got it!

pboling commented 2 months ago

Having a rough time figuring out how to set this up with the new flat config.

mikededo commented 2 months ago

Having a rough time figuring out how to set this up with the new flat config.

I got it working using the following (I do not know your issue, but maybe it helps):

  ...eslintPluginSvelte.configs['flat/recommended'].map(({ rules, ...rest }) => ({
    // Workaround since svelte-eslint's typings are mismatched with ts-eslint's
    rules: {
      ...rules
    },
    ...rest
  })),
pboling commented 2 months ago

@mikededo were you able to get it to parse .svelte files with typescript? That is specifically what I have not been able to get working.

mikededo commented 2 months ago

@pboling Yes. As a heads up, make sure that you update your dependencies as @typescrip-eslint/eslint-plugin and @typescript-eslint/parser have been updated into typescript-eslint. See the following https://github.com/typescript-eslint/typescript-eslint/pull/7935 PR, in which support for flat configs was introduced.

Let me share the full configuration. You'll probably have to adapt things to your liking:

eslint.config.mjs ```javascript // @ts-check import path from 'path'; import { fileURLToPath } from 'url'; import { FlatCompat } from '@eslint/eslintrc'; import eslint from '@eslint/js'; import eslintPluginSvelte from 'eslint-plugin-svelte'; import globals from 'globals'; import svelteEslintParser from 'svelte-eslint-parser'; import tseslint from 'typescript-eslint'; const dirname = path.dirname(fileURLToPath(import.meta.url)); const compat = new FlatCompat({ resolvePluginsRelativeTo: dirname, baseDirectory: dirname }); // Note: This is from tseslint configuration. // See: https://typescript-eslint.io/getting-started#step-2-configuration export default tseslint.config( eslint.configs.recommended, ...compat.plugins('import'), ...compat.extends('prettier'), ...eslintPluginSvelte.configs['flat/recommended'].map(({ rules, ...rest }) => ({ // Workaround since svelte-eslint's typings are mismatched with ts-eslint's rules: { ...rules }, ...rest })), { plugins: { '@typescript-eslint': tseslint.plugin }, languageOptions: { parser: tseslint.parser, parserOptions: { ecmaVersion: 'latest', sourceType: 'module', extraFileExtensions: ['.svelte'] }, globals: { ...globals.browser } }, rules: { '@typescript-eslint/no-unused-vars': [ 'error', { argsIgnorePattern: '^(_|\\$\\$Props)', varsIgnorePattern: '^(_|\\$\\$Props)', caughtErrorsIgnorePattern: '^_' } ], '@typescript-eslint/consistent-type-imports': 'error', 'arrow-body-style': ['error', 'as-needed'], 'import/extensions': ['error', 'ignorePackages', { '': 'never', tsx: 'never', ts: 'never' }], 'import/export': 2, 'import/no-unresolved': 'off', 'import/order': [ 'error', { groups: ['builtin', 'external', 'internal', ['parent', 'sibling'], 'index', 'object'], pathGroups: [{ pattern: '\\$*/**', group: 'internal' }], pathGroupsExcludedImportTypes: ['builtin'], 'newlines-between': 'always', alphabetize: { order: 'asc' } } ], 'import/no-duplicates': ['error', { considerQueryString: true }], 'no-empty-function': ['error', { allow: ['arrowFunctions'] }], 'no-unused-vars': 'off', 'sort-imports': ['error', { ignoreDeclarationSort: true }] } }, { files: ['**/*.svelte'], languageOptions: { parser: svelteEslintParser, parserOptions: { parser: '@typescript-eslint/parser', svelteFeatures: { // Whether to parse the `generics` attribute. // See https://github.com/sveltejs/rfcs/pull/38 experimentalGenerics: true } } }, rules: { // FIXME: Temporary fix to be able to use $t // https://github.com/sveltejs/eslint-plugin-svelte/issues/652 'svelte/valid-compile': 'off' } }, { ignores: [ '!.env.example', '.DS_Store', '.env.*', '.git', '.vercel', '.svelte-kit', 'build', '/package', 'node_modules', 'postcss.config.js', 'tsconfig.tsbuildinfo' ] } ); ```

Again, this is my config "as is", so not everything here is what you need in order to make the parser work.

pboling commented 2 months ago

Thanks! I was able to get mine working, and I did not need to use FlatCompat! I posted it here: https://github.com/sveltejs/eslint-plugin-svelte/issues/732