Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add eslint setup guide (#24976)
- Loading branch information
1 parent
f1ea269
commit 6823b8c
Showing
1 changed file
with
80 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |