Skip to content

Commit

Permalink
docs: add eslint setup guide (#24976)
Browse files Browse the repository at this point in the history
  • Loading branch information
chris-visser committed Jan 16, 2024
1 parent f1ea269 commit 6823b8c
Showing 1 changed file with 80 additions and 0 deletions.
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).

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.

0 comments on commit 6823b8c

Please sign in to comment.