lint+prettier integrations/issues in vscode
hey folks,can someone point me to a nuxt example project with linting and formatting rules?
I managed to get it set up but having an issue where the built in formatter is not respecting the formatting rules.
is there a proper way to link it to a prettierrc?
here'swhat i got so far...
would appreciate your help 🙏
3 Replies
Hi @DarkMift. 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 knowledge sources provided, I can offer some guidance on linting and formatting for Nuxt projects, particularly regarding ESLint integration. However, it's important to note that Nuxt recommends using ESLint for both linting and formatting, without Prettier. Here's the relevant information:
1. Nuxt now recommends using the
@nuxt/eslint module for ESLint integration. This module provides project-aware ESLint configuration and Nuxt DevTools integration.
2. The recommended approach is to use ESLint for both linting and formatting, without Prettier. As stated in the Nuxt contribution guide:
Since ESLint is already configured to format the code, there is no need to duplicate the functionality with Prettier.3. For VS Code users, it's recommended to use the ESLint extension and configure it to auto-fix and format on save. Here's the recommended configuration for
settings.json:
Source
4. Regarding your nuxt.config.ts, the eslint configuration looks good. However, for the eslint.config.mjs file, you can simplify it and take advantage of the chainable FlatConfigComposer instance. Here's an example of how you could structure it:
```javascript
import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt()
.override('nuxt/typescript', {
rules: {
'@typescript-eslint/no-unused-vars': [
'error',
{
varsIgnorePattern: '^',
argsIgnorePattern: '^',
caughtErrorsIgnorePattern: '^'
}
]
}
})
``
[Source](<https://eslint.nuxt.com/packages/module#config-customizations>)
5. If you're migrating from a previous setup that used Prettier, you should remove Prettier-related configurations and dependencies.
To resolve your formatting issues, make sure you've properly set up the ESLint extension in VS Code and removed any Prettier configurations that might be conflicting with ESLint. Also, ensure you're using the latest version of the @nuxt/eslint` module.
If you're still experiencing issues, you might want to check the Nuxt DevTools panel to inspect the resolved ESLint flat config, as mentioned in the ESLint Module documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@210492019540361216> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
working so far:
this integration seems to work as needed.
however...for vscode formatter I still have a prettierrc
this is no ideal but works