VsCode configuration to be compatible with prettier and eslint(Solved)



  • Hi everyone,

    I am new on this forum

    At the moment I have the following config for my vs code

    https://www.vuemastery.com/courses/real-world-vue-js/optimizing-your-editor/

    So I tried to make that config work with quasar this is what I have in a new quasar app

    eslintrc.js content

    module.exports = {
      root: true,
    
      parserOptions: {
        parser: "babel-eslint",
        sourceType: "module"
      },
    
      env: {
        browser: true
      },
    
      extends: [
        "standard",
        // Uncomment any of the lines below to choose desired strictness,
        // but leave only one uncommented!
        // See https://eslint.vuejs.org/rules/#available-rules
        "plugin:vue/essential", // Priority A: Essential (Error Prevention)
        "plugin:vue/strongly-recommended", // Priority B: Strongly Recommended (Improving Readability)
        "plugin:prettier/recommended"
      ],
    
      // required to lint *.vue files
      plugins: ["vue"],
    
      globals: {
        ga: true, // Google Analytics
        cordova: true,
        __statics: true,
        process: true,
        Capacitor: true,
        chrome: true
      },
    
      // add your custom rules here
      rules: {
        // allow async-await
        "generator-star-spacing": "off",
        // allow paren-less arrow functions
        "arrow-parens": "off",
        "one-var": "off",
    
        "import/first": "off",
        "import/named": "error",
        "import/namespace": "error",
        "import/default": "error",
        "import/export": "error",
        "import/extensions": "off",
        "import/no-unresolved": "off",
        "import/no-extraneous-dependencies": "off",
        "prefer-promise-reject-errors": "off",
    
        // allow debugger during development only
        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
      }
    };
    

    .prettierrc.js content

    module.exports = {
      singleQuote: true,
      semi: false
    }
    

    My package.json devdepencies

    "devDependencies": {
        "@quasar/app": "^1.0.0",
        "babel-eslint": "^10.0.1",
        "eslint": "^6.8.0",
        "eslint-config-prettier": "^6.10.0",
        "eslint-config-standard": "^14.1.0",
        "eslint-loader": "^3.0.3",
        "eslint-plugin-import": "^2.14.0",
        "eslint-plugin-node": "^11.0.0",
        "eslint-plugin-prettier": "^3.1.2",
        "eslint-plugin-promise": "^4.0.1",
        "eslint-plugin-standard": "^4.0.0",
        "eslint-plugin-vue": "^6.1.2",
        "prettier": "^1.19.1"
      },
    

    My error trace

     ERROR  Failed to compile with 10 errors                                                                                                                                             2:30:03 PM
    
     error  in ./src/App.vue
    
    Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
    
    /home/dan/Codes/wolfit_pack/wolfit_pack_client/src/App.vue
       9:9  error  Replace `'App'` with `"App"`  prettier/prettier
      10:2  error  Insert `;`                    prettier/prettier
    
    ✖ 2 problems (2 errors, 0 warnings)
      2 errors and 0 warnings potentially fixable with the `--fix` option.
    
    
     @ ./.quasar/app.js 18:0-34 84:25-28
     @ ./.quasar/client-entry.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
    
     error  in ./src/boot/i18n.js
    
    Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
    
    /home/dan/Codes/wolfit_pack/wolfit_pack_client/src/boot/i18n.js
       1:17  error  Replace `'vue'` with `"vue";`            prettier/prettier
       2:21  error  Replace `'vue-i18n'` with `"vue-i18n";`  prettier/prettier
       3:22  error  Replace `'src/i18n'` with `"src/i18n";`  prettier/prettier
       5:17  error  Insert `;`                               prettier/prettier
       8:11  error  Replace `'en-us'` with `"en-us"`         prettier/prettier
       9:19  error  Replace `'en-us'` with `"en-us"`         prettier/prettier
      11:3   error  Insert `;`                               prettier/prettier
      15:18  error  Insert `;`                               prettier/prettier
      16:2   error  Insert `;`                               prettier/prettier
      18:16  error  Insert `;`                               prettier/prettier
    
    ✖ 10 problems (10 errors, 0 warnings)
      10 errors and 0 warnings potentially fixable with the `--fix` option.
    
    
     @ ./.quasar/client-entry.js 25:0-39 58:25-39
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
    
     error  in ./src/components/EssentialLink.vue
    
    Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
    
    /home/dan/Codes/wolfit_pack/wolfit_pack_client/src/components/EssentialLink.vue
       2:10  error  Replace `⏎····clickable⏎····tag="a"⏎····target="_blank"⏎····:href="link"⏎··` with `·clickable·tag="a"·target="_blank"·:href="link"`  prettier/prettier
       8:20  error  Replace `⏎······v-if="icon"⏎······avatar⏎····` with `·v-if="icon"·avatar`                                                            prettier/prettier
      26:9   error  Replace `'EssentialLink'` with `"EssentialLink"`                                                                                     prettier/prettier
      35:16  error  Replace `''` with `""`                                                                                                               prettier/prettier
      40:16  error  Replace `'#'` with `"#"`                                                                                                             prettier/prettier
      45:16  error  Replace `''` with `""`                                                                                                               prettier/prettier
      48:2   error  Insert `;`                                                                                                                           prettier/prettier
    
    ✖ 7 problems (7 errors, 0 warnings)
      7 errors and 0 warnings potentially fixable with the `--fix` option.
    
    
     @ ./node_modules/babel-loader/lib??ref--1-0!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/layouts/MainLayout.vue?vue&type=script&lang=js& 46:0-53 50:19-32
     @ ./src/layouts/MainLayout.vue?vue&type=script&lang=js&
     @ ./src/layouts/MainLayout.vue
     @ ./src/router/routes.js
     @ ./src/router/index.js
     @ ./.quasar/app.js
     @ ./.quasar/client-entry.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
    
     error  in ./src/i18n/en-us/index.js
    
    Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
    
    /home/dan/Codes/wolfit_pack/wolfit_pack_client/src/i18n/en-us/index.js
      5:11  error  Replace `'Action·failed'` with `"Action·failed"`                  prettier/prettier
      6:12  error  Replace `'Action·was·successful'` with `"Action·was·successful"`  prettier/prettier
      7:2   error  Insert `;`                                                        prettier/prettier
    
    ✖ 3 problems (3 errors, 0 warnings)
      3 errors and 0 warnings potentially fixable with the `--fix` option.
    
    
     @ ./src/i18n/index.js 1:0-27 3:11-15
     @ ./src/boot/i18n.js
     @ ./.quasar/client-entry.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
    
     error  in ./src/i18n/index.js
    
    Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
    
    /home/dan/Codes/wolfit_pack/wolfit_pack_client/src/i18n/index.js
      1:18  error  Replace `'./en-us'` with `"./en-us";`  prettier/prettier
      4:3   error  Replace `'en-us'` with `"en-us"`       prettier/prettier
      5:2   error  Insert `;`                             prettier/prettier
    
    ✖ 3 problems (3 errors, 0 warnings)
      3 errors and 0 warnings potentially fixable with the `--fix` option.
    
    
     @ ./src/boot/i18n.js 3:0-32 8:12-20
     @ ./.quasar/client-entry.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
    
     error  in ./src/pages/Error404.vue
    
    Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
    
    /home/dan/Codes/wolfit_pack/wolfit_pack_client/src/pages/Error404.vue
       4:11  error  Replace `⏎········src="~assets/sad.svg"⏎········style="width:30vw;max-width:150px;"⏎······` with `·src="~assets/sad.svg"·style="width:30vw;max-width:150px;"·/`             prettier/prettier
       9:27  error  Replace `⏎······Sorry,·nothing·here...<strong>(404)</strong>⏎····` with `Sorry,·nothing·here...<strong>(404)</strong>`                                                      prettier/prettier
      12:11  error  Replace `⏎······color="secondary"⏎······style="width:200px;"⏎······to="/"⏎······label="Go·back"⏎···` with `·color="secondary"·style="width:200px;"·to="/"·label="Go·back"`  prettier/prettier
      23:9   error  Replace `'Error404'` with `"Error404"`                                                                                                                                      prettier/prettier
      24:2   error  Insert `;`                                                                                                                                                                  prettier/prettier
    
    ✖ 5 problems (5 errors, 0 warnings)
      5 errors and 0 warnings potentially fixable with the `--fix` option.
    
    
     @ ./src/router/routes.js 18:13-41
     @ ./src/router/index.js
     @ ./.quasar/app.js
     @ ./.quasar/client-entry.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
    
     error  in ./src/pages/Index.vue
    
    Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
    
    /home/dan/Codes/wolfit_pack/wolfit_pack_client/src/pages/Index.vue
       3:9  error  Replace `⏎······alt="Quasar·logo"⏎······src="~assets/quasar-logo-full.svg"⏎····` with `·alt="Quasar·logo"·src="~assets/quasar-logo-full.svg"·/`  prettier/prettier
      12:9  error  Replace `'PageIndex'` with `"PageIndex"`                                                                                                         prettier/prettier
      13:2  error  Insert `;`                                                                                                                                       prettier/prettier
    
    ✖ 3 problems (3 errors, 0 warnings)
      3 errors and 0 warnings potentially fixable with the `--fix` option.
    
    
     @ ./src/router/routes.js 9:13-38
     @ ./src/router/index.js
     @ ./.quasar/app.js
     @ ./.quasar/client-entry.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
    
     error  in ./src/router/index.js
    
    Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
    
    /home/dan/Codes/wolfit_pack/wolfit_pack_client/src/router/index.js
       1:17  error  Replace `'vue'` with `"vue";`                prettier/prettier
       2:23  error  Replace `'vue-router'` with `"vue-router";`  prettier/prettier
       4:20  error  Replace `'./routes'` with `"./routes";`      prettier/prettier
       6:19  error  Insert `;`                                   prettier/prettier
      17:24  error  Delete `·`                                   prettier/prettier
      27:5   error  Insert `;`                                   prettier/prettier
      29:16  error  Insert `;`                                   prettier/prettier
    
    ✖ 7 problems (7 errors, 0 warnings)
      7 errors and 0 warnings potentially fixable with the `--fix` option.
    
    
     @ ./.quasar/app.js 20:0-48 53:25-37 59:19-31 70:26-38
     @ ./.quasar/client-entry.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
    
     error  in ./src/router/routes.js
    
    Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
    
    /home/dan/Codes/wolfit_pack/wolfit_pack_client/src/router/routes.js
       1:1   error  Delete `⏎`                                                                                                                                      prettier/prettier
       4:11  error  Replace `'/'` with `"/"`                                                                                                                        prettier/prettier
       5:29  error  Replace `'layouts/MainLayout.vue'` with `"layouts/MainLayout.vue"`                                                                              prettier/prettier
       6:16  error  Replace `⏎······{·path:·'',·component:·()·=>·import('pages/Index.vue')·}⏎····` with `{·path:·"",·component:·()·=>·import("pages/Index.vue")·}`  prettier/prettier
      10:2   error  Insert `;`                                                                                                                                      prettier/prettier
      13:26  error  Replace `'ssr'` with `"ssr"`                                                                                                                    prettier/prettier
      15:11  error  Replace `'*'` with `"*"`                                                                                                                        prettier/prettier
      16:29  error  Replace `'pages/Error404.vue'` with `"pages/Error404.vue"`                                                                                      prettier/prettier
      17:5   error  Insert `;`                                                                                                                                      prettier/prettier
      20:22  error  Insert `;`                                                                                                                                      prettier/prettier
    
    ✖ 10 problems (10 errors, 0 warnings)
      10 errors and 0 warnings potentially fixable with the `--fix` option.
    
    
     @ ./src/router/index.js 3:0-30 24:12-18
     @ ./.quasar/app.js
     @ ./.quasar/client-entry.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
    
     error  in ./src/store/index.js
    
    Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
    
    /home/dan/Codes/wolfit_pack/wolfit_pack_client/src/store/index.js
       1:17  error  Replace `'vue'` with `"vue";`    prettier/prettier
       2:18  error  Replace `'vuex'` with `"vuex";`  prettier/prettier
       6:14  error  Insert `;`                       prettier/prettier
      17:24  error  Delete `·`                       prettier/prettier
      26:5   error  Insert `;`                       prettier/prettier
      28:15  error  Insert `;`                       prettier/prettier
    
    ✖ 6 problems (6 errors, 0 warnings)
      6 errors and 0 warnings potentially fixable with the `--fix` option.
    
    
     @ ./.quasar/app.js 19:0-46 32:25-36 38:19-30 48:26-37
     @ ./.quasar/client-entry.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
    

    Also

    quasar --version
    1.0.5
    
    

    Thanks in advance for any guidance on this



  • Hello, me too I’m new here,
    It tells that you have errors of syntax in your config and it asks for replaces ‘String’ by “String”. I am not specialized in these configs, but it is like you have configure your syntax checker with one style of javascript but you have created your project with another style. I hope it could help you



  • Hi @yo,

    My errors come from a quasar generated project that I wanted to use with the best practices for Vue formating.

    The errors will disappear if I choose prettier when I generate my project, but I wanted to use my own settings for prettier and Eslint.

    So that doesn’t work.

    Thanks for the follow up on my post.



  • @wolfiton you have put “standard” instead of “prettier”

    prettier doc

    ps :
    eslintrc.js

    module.exports = {
      ...
      extends: [
        "standard", // replace by prettier
      ]
      ...
    ]
    


  • This post is deleted!


  • @yo said in VsCode configuration to be compatible with prettier and eslint:

    @wolfiton you have put “standard” instead of “prettier”

    prettier doc

    ps :
    eslintrc.js

    module.exports = {
      ...
      extends: [
        "standard", // replace by prettier
      ]
      ...
    ]
    

    You are right, I was too tired to realize but Vue CLI standard is different from quasar CLI lint options.

    Oh well, I hope that will solve my problem.

    I will come back tomorrow with the results.

    Thanks @yo




Log in to reply