Prettier dialog pops up when I save and does not complie



  • Hi All, I’ve been pretty excited to try out quasar but it seems I may have a config issue

    I’m following along with Danny video https://www.youtube.com/watch?v=GV-D85D9KJQ&t=512s

    I just setup a new quasar app and editing the MainLayout.vue. But as soon as I try to add a style to the component and save I keep getting this dialog that stops the project from compiling.

    46b1a0d6-ea44-4f64-a5c8-641f946f7425-image.png

    I have Prettier. Vutur and Eslint installed.

    my VS config, i have been trying to turn of settings to see if it will fix things but not sure whats wrong

    {
        "workbench.colorTheme": "Community Material Theme Palenight High Contrast",
        "editor.fontSize": 18,
        "emmet.showSuggestionsAsSnippets": true,
        "cSpell.language": "en-GB",
        "editor.tabSize": 2,
        "workbench.iconTheme": "material-icon-theme",
        "prettier.singleQuote": true,
        "editor.formatOnSave": true,
        "editor.formatOnPaste": true,
        "prettier.trailingComma": "none",
        "prettier.printWidth": 100,
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "[javascript]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "[vue]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
     
        // "editor.codeActionsOnSave": {
        //     "source.fixAll": true
        // },
        // "vetur.format.defaultFormatter.html": "prettyhtml",
        // "vetur.format.defaultFormatter.js": "prettier-eslint"
    }
    

    package.json is default as installed

    {
      "name": "quasar-todo",
      "version": "0.0.1",
      "description": "A Quasar Framework app",
      "productName": "Quasar Todo",
      "cordovaId": "com.rezaseedin.quasartodo",
      "capacitorId": "",
      "author": "Reza  Seedin <reza.seedin@gmail.com>",
      "private": true,
      "scripts": {
        "test": "echo \"No test specified\" && exit 0"
      },
      "dependencies": {
        "@quasar/extras": "^1.0.0",
        "quasar": "^1.0.0"
      },
      "devDependencies": {
        "@quasar/app": "^1.0.0"
      },
      "engines": {
        "node": ">= 10.18.1",
        "npm": ">= 6.13.4",
        "yarn": ">= 1.21.1"
      },
      "browserslist": [
        "last 1 version, not dead, ie >= 11"
      ]
    }
    
    

    I do not have a eslint or prettier src files. (Should I is that the best practice?)
    Looking for some guidance. Do I need to add prettier into the pkg.json or is it my settings thats messed up?

    Thanks in advance.
    Reza


Log in to reply