VUE COMMAND LINE INTERFACE run vue cli from anywhere VUE GUI INTERFACE run vue ui from project folder (or maybe anywhere not sure) UPGRADING 1 First take a checkpoint snapshot commit to revert to if necessary 2 upgrade the vu ui cli tool: npm update -g @vue/cli 3 Then can do the upgrade inside it after running vue UI LINTER ISSUES =-=-=-=-=-=-=- After an update I suddenly had a conflict between the linting in formatting document and the vue cli compiler: .... TODO: LINTER ISSUES - On manual format of document with .vue extension the html template part shows multiple errors by linter - invoke the task vue-cli-service lint seems to fix the issues - Formatting the document ctrl-shift-i again reverses the fixes and seems to break it again - By break I mean these kinds of errors: Insert `·/` { "resource": "/c:/data/code/raven-client/ayanova/src/views/inventory-widget-edit.vue", "owner": "eslint", "code": "prettier/prettier", "severity": 4, "message": "Insert `·/`", "source": "eslint", "startLineNumber": 143, "startColumn": 16, "endLineNumber": 143, "endColumn": 16 } .... I fucked with it a lot and surprisingly dont' think I've broken anything but the whole issue resolved (I think) when I changed the vetur setting: from "js-beautify-html" or maybe it was "prettyhtml" to this: "vetur.format.defaultFormatter.html": "prettier", WORKING linter settings that keep both eslint and veture in sync even when formatting document: settings.json: { "git.ignoreMissingGitWarning": true, //"editor.minimap.enabled": false, "editor.codeLens": false, "editor.fontSize": 16, "window.zoomLevel": 0, "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe", "extensions.ignoreRecommendations": false, "editor.minimap.enabled": false, "files.eol": "\n", "LineCount.excludes": [ "**/.vscode/**", "**/node_modules/**", "**/obj/**", "**/bin/**", "**/ayanovadocker/files/**", "**/devdocs/**", "**/wwwroot/docs/**", "**/docs/**", "**/grafana/**", "**/resource/**" ], "LineCount.output": { "txt": true, "json": false, "csv": false, "md": false, "outdir": "linecounts" }, "LineCount.comment": [ { "ext": ["c", "cpp", "cs"], "separator": { "linecomment": "//", "linetol": false, "blockstart": "/*", "blockend": "*/", "blocktol": false, "string": { "doublequotes": true, "singlequotes": true } } } ], "workbench.startupEditor": "newUntitledFile", "vetur.format.defaultFormatter.html": "prettier", "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], "javascript.updateImportsOnFileMove.enabled": "always", "workbench.colorTheme": "Visual Studio Light", "workbench.iconTheme": "material-icon-theme", "editor.lineNumbers": "off", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": {}, "eslint.alwaysShowStatus": true, "vetur.validation.template": false, "vetur.format.enable": true, "editor.formatOnSave": true } package.json with eslint settings: { "name": "ayanova", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test:e2e": "vue-cli-service test:e2e", "test:unit": "vue-cli-service test:unit", "myLint": "npm run lint" }, "dependencies": { "@babel/polyfill": "^7.4.4", "dayjs": "^1.8.14", "jwt-decode": "^2.2.0", "nprogress": "^0.2.0", "register-service-worker": "^1.6.2", "typeface-roboto": "0.0.54", "vue": "^2.6.10", "vue-router": "^3.0.6", "vuetify": "^1.5.14", "vuetify-dialog": "^0.3.6", "vuex": "^3.1.1", "vuex-persistedstate": "^2.5.4" }, "devDependencies": { "@cypress/webpack-preprocessor": "^3.0.0", "@fortawesome/fontawesome-free": "^5.8.2", "@vue/cli-plugin-babel": "^3.8.0", "@vue/cli-plugin-e2e-cypress": "^3.8.0", "@vue/cli-plugin-eslint": "^3.8.0", "@vue/cli-plugin-pwa": "^3.8.0", "@vue/cli-plugin-unit-jest": "^3.8.0", "@vue/cli-service": "^3.8.0", "@vue/eslint-config-prettier": "^4.0.1", "@vue/test-utils": "^1.0.0-beta.29", "babel-core": "7.0.0-bridge.0", "babel-eslint": "^10.0.1", "babel-jest": "^23.6.0", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.2.2", "node-sass": "^4.12.0", "sass-loader": "^7.0.1", "vue-cli-plugin-vuetify": "^0.4.6", "vue-template-compiler": "^2.6.10" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "@vue/prettier" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 10" ], "jest": { "moduleFileExtensions": [ "js", "jsx", "json", "vue" ], "transform": { "^.+\\.vue$": "vue-jest", ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub", "^.+\\.jsx?$": "babel-jest" }, "moduleNameMapper": { "^@/(.*)$": "/src/$1" }, "snapshotSerializers": [ "jest-serializer-vue" ], "testMatch": [ "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)" ], "testURL": "http://localhost/" } } todo: ONGOING search for memory leaks The 7 times system seems to work the best Excercise item a few times to settle it in memory, take heap snapshot, force gc, take total of 3 heap snapshots forcing gc each times Excercise item 7 times exactly, take 3 more heap snapshots forcing gc before each one Compare snapshot 6 to snapshot 3 look for Delta 7 times items to find leak https://developers.google.com/web/tools/chrome-devtools/memory-problems https://nolanlawson.com/2020/02/19/fixing-memory-leaks-in-web-applications/