How to configure ESlint and Prettier in your Nuxt 3 project.

In modern code writing practice, ensuring your code is modular has two core foundations; code structure and code organization. While developers may usually not pay attention to this when writing, Eslint serves as a watcher to always give you hint on how to better organize and properly write your code. Prettier on the other hand helps you keep your code as clean as possible. This are developer tools that run in development environment.

With Nuxt 3’s gradual growth, it is becoming a go-to choice for developers who are looking at reactivity and compositional benefits building applications.

Getting started:

1. Create your Nuxt 3 app (if you haven’t):

npx nuxi@latest init <project-name>

Pick whatever option suits your application creating process. Once done, proceed to:

2. Install required dependencies:

npm install -D @nuxt/eslint eslint typescript

This will install eslint, typescript and @nuxt/eslint, which is an eslint module for Nuxt in your application.

3. Update nuxt.config.ts — add nuxt/eslint as a module:

export default defineNuxtConfig({
 compatibilityDate: '2024-04-03',
 devtools: { enabled: true },
 modules: ['@nuxt/eslint'],
});

4. Install Prettier and accompanying modules:

npm i -D prettier prettier-plugin-tailwindcss prettier-plugin-organize-imports

Once these installations are complete, in your package.json you should see all installed dependencies as devDependencies.

5. Create .prettierrc configuration file:

{
 "semi": true,
 "singleQuote": true,
 "useTabs": true,
 "tabWidth": 2,
 "trailingComma": "es5",
 "printWidth": 80,
 "endOfLine": "lf",
 "arrowParens": "always",
 "bracketSpacing": true,
 "embeddedLanguageFormatting": "auto",
 "plugins": [
  "prettier-plugin-organize-imports",
  "prettier-plugin-tailwindcss"
 ],
 "htmlWhitespaceSensitivity": "ignore",
 "vueIndentScriptAndStyle": true
}

In this configuration file, we simply enforce consistent code formatting rules, including using semicolons, single quotes, tabs with a width of 2 spaces, and a maximum line width of 80 characters. It uses two plugins: one for organizing imports and another for Tailwind CSS formatting. Also, we are setting config specific rules for Vue.js files by indenting script and style tags, while handling HTML whitespace and other code style preferences like arrow function parentheses and bracket spacing.

6. Create eslint.config.mjs (required for eslint version 9):

import prettierPlugin from 'eslint-plugin-prettier';
import withNuxt from './.nuxt/eslint.config.mjs';

export default withNuxt(
 {
  plugins: {
   prettier: prettierPlugin,
  },
  rules: {
   'prettier/prettier': [
    'error',
    {
     endOfLine: 'auto',
    },
   ],
  },
 },

 {
  files: ['**/*.ts', '**/*.vue', '**/*.js'],
  rules: {
   '@typescript-eslint/no-explicit-any': 'warn',
   '@typescript-eslint/no-unused-vars': 'off',

   'vue/multi-word-component-names': 'off',
   'vue/html-self-closing': 'off',

   'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
   'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
 }
);

In the ESLint configuration file, we have the setup above, which acts as the codes quality watcher, working hand-in-hand with Prettier to ensure consistent styling across your application. The approach used here simply sets up a watcher over the TypeScript, Vue, and JavaScript files, with a balanced approach to warnings and errors — for instance, you will gently be reminded about any lingering console.logs in production, but won’t get in your way during development. Also, you can change and add restriction rules based on your project needs and requirement. In essence, the sole aim of this is to help maintain code quality without becoming a hindrance to development flow.

7. Update package.json scripts: First install npm-run-all:

npm i -D npm-run-all

Then add this scripts:

{
 "scripts": {
  "postinstall": "nuxt prepare",
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  "prettier": "prettier --write .",
  "format": "npm-run-all -p lint:fix prettier"
 }
}

With this setup complete, you can proceed to monitor your code check and quality.

Finally, with this ESLint and Prettier setup in your Nuxt 3 project, you’ve established a good foundation for maintaining clean, consistent code. Your development workflow now includes automatic code formatting, intelligent error catching, and customizable rules that adapt between development and production environments. This setup not only helps catch potential issues early but also saves time spent on manual code formatting Remember, you can always adjust these configurations based on your projects needs and requirement.