Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add eslint setup guide #24976

Merged
merged 10 commits into from Jan 16, 2024
74 changes: 74 additions & 0 deletions docs/2.guide/1.concepts/9.code-style.md
@@ -0,0 +1,74 @@
---
title: 'Code Style'
description: "Nuxt supports ESLint out of the box"
---

## ESLint

The recommended approach for Nuxt is to enable ESLint support using [`@nuxt/eslint-config`](https://github.com/nuxt/eslint-config).
danielroe marked this conversation as resolved.
Show resolved Hide resolved

### Install Dependencies

Install both ESLint and the Nuxt configuration as development dependencies.

::code-group

```bash [yarn]
yarn add --dev eslint @nuxt/eslint-config
```

```bash [npm]
npm install --save-dev eslint @nuxt/eslint-config
```

```bash [pnpm]
pnpm add -D eslint @nuxt/eslint-config
```

```bash [bun]
bun add -D eslint @nuxt/eslint-config
```

::

### Configuration

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

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

### Modify package.json

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

```json
"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.
danielroe marked this conversation as resolved.
Show resolved Hide resolved

### Configuring VS Code

Install the [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).

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:

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

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