Eslint

ESLint is a linter that helps to enforce code quality through standards and patterns, such as flagging unused variables, disallowing globals, and requiring Error objects as Promise rejection reasons.

Prettier

Prettier is a formatter that helps in tidying up documents, such as maximum line length, mixed spaces and tabs, keyword spacing, and comma style.

By using these tools together, we can spend more of our development time on our actual code, instead of nitpicking a file's indenting, casing and bracket placement.

Installing:

1. First, install ESLint and the necessary dependencies:

# Install ESLint
npx nuxi module add eslint

2. Create an .eslintrc.js file in your project root

// eslintrc.js
module.exports = {
  root: true,
  extends: ['@nuxt/eslint-config'],
  rules: {
    // Your custom rules
  }
}

3. Add ESLint scripts to your package.json:

// package.json
"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
}

4. Prettier Integration

npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

Then update your .eslintrc.js:

// eslintrc.js
module.exports = {
  root: true,
  extends: [
    '@nuxt/eslint-config',
    'prettier'
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
}

Add a .prettierrc file:

// prettierrc
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "printWidth": 100
}

5. VS Code Integration For VS Code users, create a .vscode/settings.json file:

// vscode/settings.json
{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Usage

# to check for Linting Errors
npm run lint
# This will only check for errors without making any changes.

# Automatically Fix Errors
npm run lintfix
# This will automatically format and fix your code.

# After fixing errors, you can verify with:
npm run lint