Introducing Eslint and Stylelint: good modules to set up before starting a Nuxt3 project.

Are you starting a Nuxt3 project?

This post introduces Eslint and Stylelint, which are good Nuxt3 modules to set up before starting your project in Nuxt3 Ecosystem. I’ll briefly cover everything from installation to configuration.

`Eslint`

Eslint is a tool for checking the quality of code, unifying code style, preventing bugs in advance, and improving code readability. While it’s common to use Eslint with Prettier, in Nuxt3, it’s recommended to primarily only use Eslint for linting.

1. Install Eslint

First, to use Eslint in a Nuxt3 project, you need to use the @nuxt/eslint-config module. Additionally, if you are using Typescript, you must also install @nuxtjs/eslint-config-typescript. You also need to install the basic @eslint module. Use the following commands to install these modules.

// bun
bun add -D @nuxt/eslint-config @nuxtjs/eslint-config-typescript @eslint

// yarn
yarn add -D @nuxt/eslint-config @nuxtjs/eslint-config-typescript @eslint

// npm
npm install -D @nuxt/eslint-config @nuxtjs/eslint-config-typescript @eslint

2. Eslint Configuration

After installing as mentioned above, create a .eslintrc.js file in the root folder of your project and add the following configuration.

// .eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    '@nuxt/eslint-config',
    '@nuxtjs/eslint-config-typescript'
  ],
  rules: {
    // add your custom rules here
  } 
}

With the above configuration, you can use Eslint in your Nuxt3 project.

Additionally, add the following script to package.json to run Eslint.

// package.json

{
  "scripts": {
    "lint:eslint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."
  }
}

`Stylelint`

Stylelint is a tool for inspecting the quality of CSS code, unifying code style, preventing bugs in advance, and improving code readability. If your project contains CSS or SCSS files, it’s recommended to use Stylelint.

1. Install Stylelint

To use Stylelint, you need to install the @nuxtjs/stylelint-module module. Additionally, you must install the following modules: stylelint, postcss-html, stylelint-config-recommended-scss, stylelint-config-recommended-vue.

// bun
bun add -D @nuxtjs/stylelint-module stylelint postcss-html stylelint-config-recommended-scss stylelint-config-recommended-vue

// yarn
yarn add -D @nuxtjs/stylelint-module stylelint postcss-html stylelint-config-recommended-scss stylelint-config-recommended-vue

// npm
npm install -D @nuxtjs/stylelint-module stylelint postcss-html stylelint-config-recommended-scss stylelint-config-recommended-vue

2. Stylelint Configuration

After installing the modules as mentioned above, configure your nuxt.config.ts file as follows.

// nuxt.config.ts

export default defineNuxtConfig({
  // ...
  modules: [
    '@nuxtjs/stylelint-module'
  ],
  // If you want to automatically run stylelint when starting your Nuxt3 project, configure it as follows.
  stylelint : {
    lintOnStart: true
  },
  // ...
})

Additional configurations can be found at @nuxtjs/stylelint-module.

After, create a .stylelintrc.js file as shown below to add your configurations.

// .stylelintrc

{
  "extends": [
    "stylelint-config-recommended-scss",
    "stylelint-config-recommended-vue"
  ],
  "overrides": [
    {
      "files": ["*.scss", "*.vue", "**/*.vue"],
      "rules": {
        // add your custom rules here
      }
    }
  ]
}

After configuring as above, add the following to your .gitignore file to ensure that .stylelintcache is ignored.

// .gitignore

.stylelintcache

It also, add the following script to package.json to run Stylelint.

// package.json

{
  "scripts": {
    "lint:stylelint": "stylelint --fix --ignore-path .gitignore ."
  }
}

That’s all!

Today, Explored setup Eslint and Stylelint before starting a Nuxt3 project.

See you nuxt! (not next)