Linting and Formatting in Vue

Install

npm install --save-dev --save-exact prettier

npm install --save-dev eslint eslint-plugin-vue typescript-eslint eslint-config-prettier eslint-plugin-prettier

npx nuxi module add eslint

  • eslint-plugin-vue - Official ESLint plugin for Vue.js
  • typescript-eslint - Tooling which enables you to use TypeScript with ESLint
  • eslint-config-prettier - Turns off all rules that are unnecessary or might conflict with Prettier
  • eslint-plugin-prettier - Runs Prettier as an ESLint rule and reports differences as individual ESLint issues

ESLint

NPM Scripts

Add the below to lint commands to your package.json script section:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
  },
}
  • Run the npm run lint command to verify code style
  • Run the npm run lint:fix command to automatically fix issues

Dev Server Checker

You will need to install extra dependencies vite-plugin-eslint2 for Vite.

npm i -D vite-plugin-eslint2

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
  eslint: {
    checker: true
  }
})

Extensions for Visual Studio Code

Vue - Official for VS Code

ESLint for VS Code

Prettier - Code formatter for VS Code

See Also