Occasionally addMissingImports on save imports React again - javascript

I am using typescript and in *.tsx files, especially when i am copying code around, it quite often adds an additional
import React from "react";
// ? On Save
"editor.codeActionsOnSave": {
"source.addMissingImports": true,
"source.fixAll.eslint": true
// "source.organizeImports": true
}


I am using this configuration and works fine.
extensions.json
{
"recommendations": [
"amatiasq.sort-imports",
"dbaeumer.vscode-eslint",
"eamodio.gitlens",
"eg2.vscode-npm-script",
"esbenp.prettier-vscode",
"github.copilot",
"github.vscode-pull-request-github",
"ibm.output-colorizer",
"mhutchie.git-graph",
"ms-azuretools.vscode-docker",
"ms-kubernetes-tools.vscode-kubernetes-tools",
"ms-playwright.playwright",
"ms-vscode-remote.vscode-remote-extensionpack",
"pkief.material-icon-theme",
"quicktype.quicktype",
"redhat.vscode-yaml",
"ryanluker.vscode-coverage-gutters",
"streetsidesoftware.code-spell-checker",
"stylelint.vscode-stylelint",
"tyriar.sort-lines"
]
}
settings.json
{
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[typescript]": {
"editor.formatOnSave": false
},
"[typescriptreact]": {
"editor.formatOnSave": false
},
"diffEditor.ignoreTrimWhitespace": false,
"editor.bracketPairColorization.enabled": true,
"editor.codeActionsOnSave": {
"source.addMissingImports": true,
"source.fixAll": false,
"source.fixAll.eslint": true,
"source.organizeImports": false
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"editor.guides.bracketPairs": "active",
"editor.inlineSuggest.enabled": true,
"editor.suggestSelection": "first",
"editor.tabSize": 2,
"eslint.alwaysShowStatus": true,
"eslint.format.enable": true,
"eslint.probe": [
"html",
"javascript",
"javascriptreact",
"markdown",
"typescript",
"typescriptreact"
],
"files.watcherExclude": {
"**/*.pem": true,
"**/*.tsbuildinfo": true,
"**/.DS_Store": true,
"**/.env.development.local": true,
"**/.env.local": true,
"**/.env.production.local": true,
"**/.env.test.local": true,
"**/.next/**": true,
"**/.pnp.js": true,
"**/.pnp/**": true,
"**/.vercel": true,
"**/build/**": true,
"**/coverage/**": true,
"**/node_modules/**": true,
"**/npm-debug.log*": true,
"**/out/**": true,
"**/yarn-debug.log*": true,
"**/yarn-error.log*": true
},
"github.copilot.enable": {
"*": true,
"markdown": false,
"plaintext": true,
"yaml": true
},
"redhat.telemetry.enabled": true,
"sort-imports.ignore-type-defs": false,
"stylelint.validate": [
"css",
"scss"
],
"terminal.integrated.sendKeybindingsToShell": true,
"window.zoomLevel": 1,
"workbench.iconTheme": "material-icon-theme"
}

Related

Transform JSON form front end so it fits what API expects

I have the following data structure held in state by my React application.
{"assetNum": "SP234",
"eventDate": "2021-08-15 08:30:00Z",
"manufacturers": {
"part1":"mfg1",
"part2":"mfg2",
"part3":"mfg3"},
"part1":{
"inlet":[true, true, true, true, true],
"outlet":[false, false, false, false, false]}
"part2":{
"inlet":[false, false true, true, true],
"outlet":[false, false, false, false, false]}
"part3":{
"suction":[true, true, true, true, true],
"discharge":[false, false, false, false, false]}
}
On the other end I have a .NET API expecting the following data structure:
{"assetNum": "SP234",
"eventDate": "2021-08-15 08:30:00Z",
"details":[
{"part":"part1",
"label":"inlet",
"manufacturer":"mfg1",
"locations":[true, true, true, true, true]},
{"part":"part1",
"label":"outlet",
"manufacturer":"mfg1",
"locations":[false, false, false, false, false]},
{"part":"part2",
"label":"inlet",
"manufacturer":"mfg2",
"locations":[false, false, true, true, true]},
{"part":"part2",
"label":"outlet",
"manufacturer":"mfg2",
"locations":[false, false, false, false, false]},
{"part":"part3",
"label":"suction",
"manufacturer":"mfg3",
"locations":[true, true, true, true, true},
{"part":"part3",
"label":"fischarge",
"manufacturer":"mfg3",
"locations":[false, false, false, false, false]},
]
}
I'm trying to avoid changing the state on the front-end since a lot of other things already depend on it. I'm also trying to avoid changing the API.
How can I go about transforming one object into the other structure anytime the user clicks "SUBMIT"? I was thinking of creating a class with a constructor and a method to generate the other JSON but that might be an overkill? I'm hoping there's a straightforward way to do this in Javascript that I haven't learned yet.
Thanks to all in advance,

Easily achieved using ...
2 x Object.entries
Array#map
and
Array#flatMap
const input = {
"assetNum": "SP234",
"eventDate": "2021-08-15 08:30:00Z",
"manufacturers": {
"part1": "mfg1",
"part2": "mfg2",
"part3": "mfg3"
},
"part1": {
"inlet": [true, true, true, true, true],
"outlet": [false, false, false, false, false]
},
"part2": {
"inlet": [false, false, true, true, true],
"outlet": [false, false, false, false, false]
},
"part3": {
"suction": [true, true, true, true, true],
"discharge": [false, false, false, false, false]
}
};
const output = {
assetNum: input.assetNum,
eventDate: input.eventDate,
details: Object.entries(input.manufacturers).flatMap(([part, manufacturer]) => Object.entries(input[part]).map(([label, locations]) => ({ part, label, manufacturer, locations})))
};
console.log(output);

You can use Object.keys and map your objects
code:
const data = {
"assetNum": "SP234",
"eventDate": "2021-08-15 08:30:00Z",
"manufacturers": {
"part1": "mfg1",
"part2": "mfg2",
"part3": "mfg3"
},
"part1": {
"inlet": [true, true, true, true, true],
"outlet": [false, false, false, false, false]
},
"part2": {
"inlet": [false, false, true, true, true],
"outlet": [false, false, false, false, false]
},
"part3": {
"suction": [true, true, true, true, true],
"discharge": [false, false, false, false, false]
}
};
let model = {
"assetNum": data.assetNum,
"eventDate": data.eventDate,
"details": []
}
Object.keys(data.manufacturers).forEach(key=>{
const row = data[key]
Object.keys(row).forEach(innerKey=>{
let item = {
"manufacturer":data.manufacturers[key],
"part": key,
"label": innerKey,
"locations": row[innerKey]
}
model.details.push(item)
})
})
console.log(model)

CodeMirror Highlight specific Regex-Match

I'm trying to highlight all %()% substrings in the htmlmixed mode. The matching RegExp is ([%(](.*)[)%]).
Here's the code i'm using for CodeMirror:
const code = CodeMirror.fromTextArea(document.querySelector("#id"), {
theme: "dracula",
mode: "text/html",
lineNumbers: true,
firstLineNumber: 1,
spellcheck: false,
autocorrect: true,
extraKeys: { "Ctrl-Space": "autocomplete" },
styleActiveLine: true,
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }
});
Thanks

You have to add a style property in highlightSelectionMatches.
const code = CodeMirror.fromTextArea(document.querySelector("#id"), {
theme: "dracula",
mode: "text/html",
lineNumbers: true,
firstLineNumber: 1,
spellcheck: false,
autocorrect: true,
extraKeys: { "Ctrl-Space": "autocomplete" },
styleActiveLine: true,
highlightSelectionMatches: {
minChars: 2,
showToken: /\w/,
style:'matchhighlight',
annotateScrollbar: true
}
});
Add below in css:
.cm-matchhighlight {
background: red !important
}

Javascript updates entire column in boolean matrix

I'm trying to update a specific index in a boolean matrix but it update the entire column. what might be the problem?
I'm attaching the code here:
const booleanMatrix = Array(5).fill(Array(5).fill(false));
console.log(booleanMatrix);
booleanMatrix[0][0] = true;
console.log(booleanMatrix);
first and second prints:
[
[ false, false, false, false, false ],
[ false, false, false, false, false ],
[ false, false, false, false, false ],
[ false, false, false, false, false ],
[ false, false, false, false, false ]
]
[
[ true, false, false, false, false ],
[ true, false, false, false, false ],
[ true, false, false, false, false ],
[ true, false, false, false, false ],
[ true, false, false, false, false ]
]
I expect it to be:
[
[ true, false, false, false, false ],
[ false, false, false, false, false ],
[ false, false, false, false, false ],
[ false, false, false, false, false ],
[ false, false, false, false, false ]
]

Your code is equivalent to:
const inner = Array(5).fill(false);
const booleanMatrix = Array(5).fill(inner);
Of course when you update inner, it updates on each row, since each row is pointing to the same thing.
You need to do
let x = Array(5).fill(null).map((i) => Array(5).fill(false));
console.log(x);
x[0][0] = true;
console.log(x);

const booleanMatrix = Array(5).fill(Array(5).fill(false));
This fills an array with 5 references to the same array.
Array(5).fill(false) // reference to one array
When you change one array, you're changing all of them, because they're all the same object in memory.
You need to create 5 different arrays and load each one of them:
let booleanMatrix = [
Array(5).fill(false),
Array(5).fill(false),
Array(5).fill(false),
Array(5).fill(false),
Array(5).fill(false)
];
Alternatively:
let booleanMatrix = Array(5).fill("throwAway").map( () => Array(5).fill(false));
This will create 5 unique arrays

How to change jstree orientation using jquery?

I am creating a bilingual form in which I used a jstree. I am going to switch between 2 languages, with different directions. I know that jstree inherits from body's direction. But i want to programmatically changes it's direction.
here is my jstree code:
$('#productTree').jstree({
"core": {
'data': result.ProductsTree,
"multiple": true,
"check_callback": false,
'themes': {
'variant': 'large',
'stripes': true,
"icons": true,
}
},
"checkbox": {
"keep_selected_style": false,
"three_state": false
},
"plugins":
["checkbox"]
});

You have to enable rtl option in you core options object :
$('#productTree').jstree({
"core": {
'rtl' : true,
'data': result.ProductsTree,
"multiple": true,
"check_callback": false,
'themes': {
'variant': 'large',
'stripes': true,
"icons": true,
}
},
"checkbox": {
"keep_selected_style": false,
"three_state": false
},
"plugins":
["checkbox"]
});

codemirror show hints with angular

How to show hints and define dictionary with ui-codemirror?
$scope.cmOption = {
lineWrapping : true,
lineNumbers: true,
textWrapping: true,
indentWithTabs: true,
readOnly: false,
mode: "javascript",
matchBrackets: true,
autoCloseBrackets: true,
gutters: ["CodeMirror-lint-markers"],
lint: true,
showHint: true
};
I tried with ng-codemirror-dictionary-hint but it gives me an error
instance.showHint is not a function

Categories

Resources