ESLint + Prettier (Vue 3)

Philip Gutierrez 🪐 — Sun, 15 Jan 2023 15:08:38 +0000

After creating a new Vue 3 application using either create-vue or vite do the following steps:

1. Install the following dev dependencies

yarn add -D @babel/eslint-parser eslint eslint-config-prettier eslint-loader eslint-plugin-prettier eslint-plugin-vue prettier

2. Add .eslintrc.js file in the project root

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true
  },
  extends: [
    "plugin:vue/recommended",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  rules: {
    "prettier/prettier": "error",
    "vue/component-name-in-template-casing": ["error", "PascalCase"],
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  globals: {
    $nuxt: true
  },
  parserOptions: {
    parser: "@babel/eslint-parser",
    requireConfigFile: false
  }
};

3. Add .prettierrc.json in the project root

{
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

4. Optionally you can add a jsconfig.json file in the project root

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ],
      "~~/*": [
        "./*"
      ],
      "@@/*": [
        "./*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ]
}

5. If you have installed the Prettier extension, check settings.json if the following is configured:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  }
}

DEV Community: Philip Gutierrez 🪐

ESLint + Prettier (Vue 3)

1. Install the following dev dependencies

2. Add .eslintrc.js file in the project root

3. Add .prettierrc.json in the project root

4. Optionally you can add a jsconfig.json file in the project root

5. If you have installed the Prettier extension, check settings.json if the following is configured: