Configure ESLint and Prettier for Vue/Nuxt.js project in VS Code

August 5th, 2021 by Philip Iezzi 2 min read
cover image

I'd like to share my recommended ESLint and Prettier configuration for a Vue.js project built with Nuxt.js (loving it!). As preferred IDE, I am using - guess what? - VS Code. This article is just considered as simple dev notes without digging any deeper, and it's based on my current "best practices".

Install ESLint and Prettier with all recommended plugins into devDependencies using yarn (you might as well use npm):

$ yarn add --dev eslint eslint-plugin-nuxt eslint-plugin-vue
$ yarn add --dev eslint-config-prettier prettier eslint-plugin-prettier
$ yarn add --dev @nuxtjs/eslint-module @nuxtjs/eslint-config @babel/eslint-parser

The following lines were added to my package.json (only an extract, showing you the current versions as of Aug 2021):

  "devDependencies": {
    "@babel/eslint-parser": "^7.15.0",
    "@nuxtjs/eslint-config": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-vue": "^7.15.1",
    "prettier": "^2.3.2"

Configure ESLint in .eslintrc.js (in your project root):

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
    parserOptions: {
        parser: '@babel/eslint-parser',
        requireConfigFile: false,
    extends: [
    plugins: ['prettier'],
    rules: {
        'prettier/prettier': ['error'],
        'vue/html-indent': ['error', 4],
        'vue/singleline-html-element-content-newline': 0,
        'vue/component-name-in-template-casing': ['error', 'PascalCase'],
        'vue/valid-v-slot': [
                allowModifiers: true,
    globals: {
        _: true,

Configure Prettier in .prettierrc (again in your project root):

    "semi": false,
    "singleQuote": true,
    "tabWidth": 4,
    "printWidth": 120

Also create .prettierignore:

# Ignore artifacts:

Configure VS Code Editor: Format on Save to apply auto formatting upon saving, which you can also restrict to specific languages, .vscode/settings.json:

    "vetur.format.defaultFormatter.html": "none",
    // Set the default
    "editor.formatOnSave": false,
    // Enable per-language
    "[javascript]": {
        "editor.formatOnSave": true
    "[vue]": {
        "editor.formatOnSave": true

Now, open any .vue or .js file, fire Cmd-S to save the file and see the magic. If it won't yet work for you, consider restarting VSCode.

Don't worry, a file only gets formatted if you explicitely hit Cmd-S. You can still use autoSave for regular saving, which would not invoke auto-formatting of the whole file. That's the relevant global VS Code user settings (can be found in $HOME/Library/Application Support/Code/User/settings.json on macOS):

    "files.autoSave": "afterDelay",
    "prettier.printWidth": 81,

Done. Happy clean coding!