Due to recent updates and compatibility issues, setting up a Nuxt project with the latest versions of ESLint 9, Prettier, and TypeScript can be challenging. This guide will walk you through initializing a Nuxt project and configuring ESLint and Prettier for the latest standards.
Why ESLint + Prettier?
ESLint helps find and fix problems in your JavaScript code, while Prettier ensures consistent code formatting. Using them together in the latest versions enhances code quality and developer productivity.
Initialize Nuxt Project
Start by initializing a Nuxt project with the latest Nuxt CLI:
npx nuxi@latest init nuxt-proyect-name
Required Extensions for Visual Studio Code
To ensure optimal development workflow and proper integration of ESLint and Prettier, the following extensions are required in Visual Studio Code:
-
ESLint: Provides JavaScript and TypeScript linting support.
-
Prettier - Code Formatter: Formats your code using Prettier.
Make sure to install these extensions to leverage the full capabilities of ESLint and Prettier in your Nuxt project.
ESLint 9 Installation and Configuration
Follow these steps to set up ESLint:
npm init @eslint/config@latest
Installation Answers
How would you like to use ESLint?
To check syntax and find problems
What type of modules does your project use?
JavaScript modules (import/export)
Which framework does your project use?
Vue.js
Does your project use TypeScript?
Yes
Where does your code run?
- ✅ Browser
- ✅ Node
Would you like to install them now?
Yes
Which package manager do you want to use?
- Select your preferred option or use
npmby default.
ESLint Initial Configuration
The default ESLint configuration can be customized further. Start with this base configuration:
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
export default [
{ languageOptions: { globals: { ...globals.browser, ...globals.node } } },
pluginJs.configs.recommended,
...tseslint.configs.recommended,
...pluginVue.configs["flat/essential"],
// Add your custom rules here
];
This setup utilizes the new flat configuration introduced in ESLint 9.
Prettier
Installation
Install Prettier as a development dependency:
npm install --save-dev --save-exact prettier
Configuration Files
Create a .prettierrc file to define Prettier rules:
{
"semi": false,
"singleQuote": true,
"trailingComma": "none"
}
Create a .prettierignore file to specify files and directories to ignore:
# Ignore build output directories
.nuxt/
dist/
# Ignore node modules
node_modules/
# Ignore specific configuration files
*.config.js
# Ignore environment variables files
.env
.env.*
# Ignore lock files
yarn.lock
package-lock.json
# Ignore logs
*.log
# Ignore compiled files
*.min.js
*.min.css
# Ignore specific file types
*.png
*.jpg
*.jpeg
*.gif
*.svg
# Ignore other generated files
coverage/
Test Prettier
To test Prettier, run:
npx prettier index.js --write
Auto-format on Save
Enable auto-formatting in Visual Studio Code:
- Search
format on savein settings (CTRL + ,) and enableEditor: Format on Save. - Search
Default Formatterin settings and selectPrettier - Code Formatter.
Combining Prettier and ESLint
Install eslint-config-prettier to turn off all conflicting rules:
npm i eslint-config-prettier --save-dev
Update ESLint Configuration
Update your eslint.config.js to integrate Prettier:
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import eslintConfigPrettier from "eslint-config-prettier";
export default [
{ languageOptions: { globals: { ...globals.browser, ...globals.node } } },
pluginJs.configs.recommended,
...tseslint.configs.recommended,
...pluginVue.configs["flat/essential"],
// 👇👇👇 NEW CODE 👇👇👇
eslintConfigPrettier,
// 👆👆👆 NEW CODE 👆👆👆
];
Ignoring Files in ESLint
Specify files and directories to ignore in ESLint:
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import eslintConfigPrettier from "eslint-config-prettier";
export default [
{ languageOptions: { globals: { ...globals.browser, ...globals.node } } },
pluginJs.configs.recommended,
...tseslint.configs.recommended,
...pluginVue.configs["flat/essential"],
// 👇👇👇 NEW CODE 👇👇👇
{
ignores: ['node_modules', 'dist', 'public', '.nuxt']
},
// 👆👆👆 NEW CODE 👆👆👆
eslintConfigPrettier,
];
By following these steps, you'll have a Nuxt project well-configured with ESLint, Prettier, and TypeScript, ensuring high code quality and consistency throughout your development process.
Top comments (4)
Hi Jeancarlo,
I followed the steps of your article I managed to create a basic linter but I have some issues.
Inside vue file's no linting work.</p> <p>No semicolon or whitespace check, not typescript format check. Nothing</p>
Hi Διονύσης,
If you're experiencing issues with linting in Vue files, it might be due to changes in ESLint v9.0.0. Some properties, like
semi, were deprecated in ESLint v8.53.0. Use the corresponding rule in@stylistic/eslint-plugin-js. Also, ensure you're using Prettier for formatting configurations.Check out the demo repo here: Demo Repository.
More details:
I followed the steps in the article. Prettier worked, but ESLint didn't. Could you provide a demo repository?
I'm structuring a new project and I really need your help. Thank you very much!
Hi Bran,
Thanks for your comment! To get ESLint working, try these steps:
npm init @eslint/config@latestand follow the configuration instructions.npm install -g eslint.eslint index.tsornpx eslint index.ts. This should show an error in the console when run in the demo repo.Check out the demo repo here: Demo Repository.
Hope this helps!