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
68 changes: 68 additions & 0 deletions docs/2.guide/1.concepts/9.code-style.md
@@ -0,0 +1,68 @@
---
title: 'Code Style'
description: "Nuxt 3 supports eslint out of the box"
danielroe marked this conversation as resolved.
Show resolved Hide resolved
---

## Eslint
danielroe marked this conversation as resolved.
Show resolved Hide resolved

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

**Install**

```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
```

**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 codestyle is correct or run `lint:fix` to automatically fix issues.
danielroe marked this conversation as resolved.
Show resolved Hide resolved

## Configuring VSCode

Install the [VSCode eslint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).
danielroe marked this conversation as resolved.
Show resolved Hide resolved

In VSCode 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.formatOnSave": true,
danielroe marked this conversation as resolved.
Show resolved Hide resolved
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
danielroe marked this conversation as resolved.
Show resolved Hide resolved
}
}
```

You're good to go! On save, your files will be formatted.
danielroe marked this conversation as resolved.
Show resolved Hide resolved