mirror of
https://github.com/nuxt/nuxt.git
synced 2025-02-28 19:53:17 +00:00
81 lines
1.8 KiB
Markdown
81 lines
1.8 KiB
Markdown
|
---
|
||
|
|
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.
|