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
80 changes: 80 additions & 0 deletions docs/2.guide/1.concepts/9.code-style.md
@@ -0,0 +1,80 @@
---
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

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](https://github.com/nuxt/eslint-config/issues/303) to follow updates.]
::

### 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.

### 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.