@nuxt/eslint – disabling semicolons breaks syntax highlighting if using typescript in template

[humble thicket]

Hi @winter knoll. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in the knowledge sources, I can offer some insights and suggestions regarding your issue with @nuxt/eslint and TypeScript syntax highlighting in .vue files.

The problem you're experiencing seems to be related to the ESLint configuration and its interaction with TypeScript in Vue template files. Here are some points to consider:

1. ESLint Stylistic: The @nuxt/eslint module provides integration with ESLint Stylistic, which can be used to control formatting rules, including semicolons. As mentioned in the ESLint Module documentation, you can opt-in to use ESLint Stylistic by setting config.stylistic to true in the eslint module options.

2. Customizing Stylistic Rules: If you want to keep semicolons disabled while using ESLint Stylistic, you can pass an object to customize the rules. Here's an example of how you could modify your configuration:

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
  eslint: {
    config: {
      stylistic: {
        semi: false,
        // other stylistic rules...
      }
    }
  }
})

3. Config Customizations: As described in the Config Customizations section, you can use the FlatConfigComposer instance returned by withNuxt() to further customize your ESLint configuration. This might help you fine-tune the rules for TypeScript in Vue templates.

4. TypeScript Support: Make sure you have the typescript package installed in your project, as mentioned in the ESLint Module documentation.

5. VS Code Integration: If you're using VS Code, ensure you have the latest version of the ESLint extension and that it's properly configured for the new flat config format, as described in the VS Code section.

Given that the syntax highlighting issue occurs specifically with TypeScript in Vue templates, you might need to adjust the TypeScript-specific ESLint rules. You could try overriding the TypeScript configuration like this:

import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt({
  rules: {
    'no-console': 'off',
    'vue/multi-word-component-names': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
})
  .override('nuxt/typescript', {
    rules: {
      // Add or modify TypeScript-specific rules here
      '@typescript-eslint/semi': ['error', 'never'],
    }
  })

If these suggestions don't resolve the issue, you might want to check if there are any conflicts between your ESLint configuration and your editor's TypeScript settings. Additionally, you could try using the Nuxt DevTools to inspect the resolved ESLint flat config and ensure that the TypeScript rules are being applied correctly.

If the problem persists, it might be worth reporting this as an issue on the @nuxt/eslint GitHub repository, as it could be a specific bug related to the interaction between @nuxt/eslint, TypeScript, and Vue templates.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: