diff --git a/docs/2.guide/1.concepts/9.code-style.md b/docs/2.guide/1.concepts/9.code-style.md new file mode 100644 index 000000000000..c312074f0d53 --- /dev/null +++ b/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.