Nuxt/9.code-style.md at 6dcad76a06004089859dbf1446ed14ba963b64be

1.8 KiB

Raw Blame History

title	description
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.

::alert{type=info} 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.

::code-group

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

npm install --save-dev eslint @nuxt/eslint-config

pnpm add -D eslint @nuxt/eslint-config

bun add -D 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.

1.8 KiB Raw Blame History