Code Style

Nuxt supports ESLint out of the box

ESLint

The recommended approach for Nuxt is to enable ESLint support using @nuxt/eslint-config.

At the moment, this configuration will not format your files; you can set up Prettier or another tool to do so.

We're currently working to refactor the Nuxt ESLint configuration. Subscribe to the Nuxt ESLint roadmap to follow updates.

Install Dependencies

Install both ESLint and the Nuxt configuration as development dependencies.

yarn add --dev eslint @nuxt/eslint-config

Configuration

Add .eslintrc.cjs to the root folder of your Nuxt app.

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

Modify package.json

Add the below to lint commands to your package.json script section:

  "scripts": {
    ...
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    ...
  },

Run the lint command to check if the code style is correct or run lint:fix to automatically fix issues.

Configuring VS Code

Install the VS Code ESLint extension.

In VS Code press ctrl+shift+p (cmd+shift+p on Mac) to open the command prompt, find Open Workspace Settings (JSON), add the below lines to the JSON and save:

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

You're good to go! On save, your files will be linted and auto-fixed.