Nuxt•3mo ago

eslint on file save

I just setup eslint properly "{ // Disable the default formatter, use eslint instead "prettier.enable": false, "editor.formatOnSave": false, // Auto fix "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit", "source.organizeImports": "never" }, "files.associations": { ".css": "tailwindcss" }, // Silent the stylistic rules in you IDE, but still auto fix them "eslint.rules.customizations": [ { "rule": "style/", "severity": "off", "fixable": true }, { "rule": "format/", "severity": "off", "fixable": true }, { "rule": "-indent", "severity": "off", "fixable": true }, { "rule": "-spacing", "severity": "off", "fixable": true }, { "rule": "-spaces", "severity": "off", "fixable": true }, { "rule": "-order", "severity": "off", "fixable": true }, { "rule": "-dangle", "severity": "off", "fixable": true }, { "rule": "-newline", "severity": "off", "fixable": true }, { "rule": "quotes", "severity": "off", "fixable": true }, { "rule": "*semi", "severity": "off", "fixable": true } ], // Enable eslint for all supported languages "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "html", "markdown", "json", "jsonc", "yaml", "toml", "xml", "gql", "graphql", "astro", "svelte", "css", "less", "scss", "pcss", "postcss" ] } " so i disabled prettier but i want to eslint format when i save the file how do i enable this?

17 Replies

kapa.ai•3mo ago

Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To enable ESLint to automatically format your code on file save in VS Code (with Prettier disabled), you need to ensure a few things: 1. ESLint Extension: Make sure you have the ESLint VS Code extension installed. For ESLint v9.x and the new flat config, use at least vscode-eslint v3.0.10. If you use an older version, add "eslint.useFlatConfig": true to your .vscode/settings.json to enable flat config support ESLint Module Recipes. 2. VS Code Settings: Your provided settings are almost correct. The key part is:

   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   }

   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   }

This tells VS Code to run ESLint's auto-fix on save, but only when you explicitly trigger it (e.g., with the "Format Document" command). If you want ESLint to always fix on save, set it to true:

   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   }

   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   }

This will apply ESLint fixes every time you save a file. 3. Disable Prettier: You already have "prettier.enable": false and "editor.formatOnSave": false, which is correct since Nuxt recommends using ESLint for formatting and not duplicating with Prettier Nuxt Contribution Guide. 4. ESLint Configuration: Make sure your project is set up with the recommended Nuxt ESLint module (@nuxt/eslint) and that your eslint.config.mjs or .eslintrc is properly configured. This ensures ESLint knows how to lint and format your files Nuxt Code Style. Summary of what to do: - Set "source.fixAll.eslint": true in your VS Code settings. - Ensure the ESLint extension is installed and configured for flat config if needed. - Use the Nuxt ESLint module for project-aware configuration. Example .vscode/settings.json:

{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "typescript",
    "vue"
    // ...other languages as needed
  ]
}

{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "typescript",
    "vue"
    // ...other languages as needed
  ]
}

This setup will make ESLint auto-fix and format your code on every save, as recommended in the Nuxt ecosystem Nuxt Contribution Guide, ESLint Module Recipes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•3mo ago

@kapa.ai currently i use supabase for my database + supabase auth. I had to setup RLS on all my tables because of this. If i were to move to something like nuxt auth utils or better auth and drizzle then would i be able to forgo all RLS policies and simply do checks in my server routes when i interact with the database to check what data the user should have access to?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, if you move to using Nuxt Auth Utils (or similar server-side authentication) and a database ORM like Drizzle, you can handle all your access control logic within your Nuxt server routes instead of relying on Row Level Security (RLS) at the database level. With Nuxt Auth Utils, authentication and session management are handled on the server, and you can use helpers like requireUserSession to ensure that only authenticated users can access certain API routes. Inside these routes, you can perform any necessary authorization checks before querying or mutating the database. This means you have full control over what data each user can access, and you are not required to set up RLS policies in your database—the server acts as the gatekeeper for all data access and permissions logic. For example, a protected API route might look like this:

export default defineEventHandler(async (event) => {
  // Ensure the user is authenticated
  const { user } = await requireUserSession(event)

  // Perform authorization logic here
  // e.g., check if user has access to a specific resource

  // Query the database using Drizzle or another ORM
  // Return data as appropriate
  return {}
})

export default defineEventHandler(async (event) => {
  // Ensure the user is authenticated
  const { user } = await requireUserSession(event)

  // Perform authorization logic here
  // e.g., check if user has access to a specific resource

  // Query the database using Drizzle or another ORM
  // Return data as appropriate
  return {}
})

This approach is described in the Nuxt documentation for sessions and authentication, where all sensitive data access is protected by server-side checks rather than database-level RLS policies. The documentation also mentions using ORMs like Drizzle, Sequelize, or TypeORM for database access in this context Docs: Sessions and Authentication, PR: Session and Authentication Recipe. In summary:
With Nuxt Auth Utils and a server-side ORM, you can forgo RLS and implement all access control in your server routes, giving you flexibility and centralizing your authorization logic in your Nuxt app. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•3mo ago

@kapa.ai nuxt 4 drizzle where should i put my db folder with my database stuff in this nuxt 4 structure

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the available knowledge sources, the official Nuxt 4 directory structure does not prescribe a specific location for a db folder or database-related files. However, the recommended structure for server-side logic (such as database access with Drizzle) is to place your server-related code inside the server/ directory at the root of your project. This directory is intended for API routes, middleware, plugins, and utilities that run on the server side. A common convention is to create a utils/ or db/ folder inside the server/ directory for your database setup and queries. For example:

server/
  api/
  middleware/
  plugins/
  routes/
  utils/      # or db/
    db.ts     # your Drizzle setup and queries

server/
  api/
  middleware/
  plugins/
  routes/
  utils/      # or db/
    db.ts     # your Drizzle setup and queries

This approach keeps your database logic clearly separated from client-side code and aligns with Nuxt's intention for the server/ directory in the v4 structure New Directory Structure, PR: v4 Folder Structure. Summary:
Place your Drizzle database files in server/utils/ or server/db/ within your Nuxt 4 project. This keeps your database logic organized and server-only, following Nuxt 4 conventions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•3mo ago

@kapa.ai nuxt 4 does it make sense to have a /server/lib folder or not

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The official Nuxt 4 documentation and related sources do not mention a standard or recommended use of a /server/lib folder. The documented and supported subdirectories under server/ are api/, middleware/, plugins/, routes/, and utils/ New Directory Structure, Server Directory Guide. If you want to organize reusable server-side code, the recommended place is server/utils/. There is no mention of a lib/ folder, and using undocumented folders may not benefit from Nuxt’s auto-imports or conventions. If you need to add custom directories for auto-imports, you can configure this in your Nuxt module or config, but by default, only the documented folders are recognized Server Directory Guide. In summary:
It does not make sense to use a /server/lib folder according to the official Nuxt 4 structure. Use server/utils/ for shared server-side utilities and logic. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

White Cat•3mo ago

Hey, I saw your question about ESLint not formatting on save. From what you shared, everything looks good except this part: "source.fixAll.eslint": "explicit" You should change it to: "source.fixAll.eslint": true That way, ESLint will automatically fix issues every time you save. No need to run Format Document manually. Let me know if it's still not working and I can help you debug further.

WiFi PlugOP•3mo ago

yeah I got it working, I think I just had to restart vs code after changing that line

White Cat•3mo ago

OK, good @WiFi Plug

WiFi PlugOP•3mo ago

appreciate the help!

White Cat•3mo ago

You are welcome! If something comes up, will contact me! I'll appreciate if you send me friend req. @WiFi Plug

Cake•3mo ago

don't do that don't use eslint for formatting you can create a new vue project with pnpm create vue, pick the eslint and prettier options, and see how they do it

Gaming

Programming

eslint on file save

Did you find this page helpful?