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.jsAlso
quasar --version 1.0.5Thanks 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”
ps :
eslintrc.jsmodule.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”
ps :
eslintrc.jsmodule.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
-
