We Keep Coding

How set up Prettier and ESLint in my Visual Studio Code

I'm use VSCode for writing on ReactJS, so I use .js and .jsx files, but i have a problem with formating my code. Early my Prettier works good, but now it not working, code not formating when I try save it (CRTL+S).
This is code of my settings.json
{
"editor.formatOnSave": true, //Not working :(
"prettier.tabWidth": 4, //But real tabWidth is 2, and I'm wanna fix it too
"prettier.singleQuote": true,
"prettier.trailingComma": "all",
"prettier.semi": true,
"prettier.jsxBracketSameLine": true,
"prettier.printWidth": 100,
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"workbench.activityBar.visible": true,
"git.enableSmartCommit": true,
"git.confirmSync": false,
"prettier.useTabs": true,
"prettier.useEditorConfig": false,
"workbench.startupEditor": "newUntitledFile",
"eslint.codeAction.showDocumentation": {
"enable": true
}
}

VS code JavaScript error syntax highlighter not working after upgrade

I have recently upgrade VS code. Now it's no longer showing the error highlights. Earlier, if I use any undefined function or variable, it used to underline it with red line.
i.e.. line number 5 on the image is not reflecting in red
Settings
{
"window.zoomLevel": 0,
"sonarlint.ls.javaHome": "C:\\\\Program Files\\\\Java\\\\jdk-12.0.1",
"javascript.updateImportsOnFileMove.enabled": "always",
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"explorer.confirmDelete": false,
"update.mode": "start",
"files.autoSave": "off",
"editor.autoClosingBrackets": "always",
"editor.autoClosingOvertype": "always",
"editor.autoClosingQuotes": "always",
"eslint.debug": true,
"eslint.format.enable": true,
"editor.semanticHighlighting.enabled": false,
"bracketPairColorizer.highlightActiveScope": true,
"editor.tokenColorCustomizations": null,
"typescript.tsserver.useSeparateSyntaxServer": false,
"eslint.alwaysShowStatus": true,
"workbench.colorTheme": "Visual Studio Dark",
"typescript.format.enable": false,
"typescript.format.insertSpaceAfterCommaDelimiter": false,
"typescript.format.insertSpaceAfterKeywordsInControlFlowStatements": false,
"typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"debug.javascript.breakOnConditionalError": true,
"debug.onTaskErrors": "showErrors",
"zenMode.silentNotifications": false,
"eslint.validate": [
"javascript", "javascriptreact", "typescript", "typescriptreact"
]
}
Also have the these extensions installed

You can try configuring eslinter in React that should fix it. Here is a good tutorial about how to do it

How to get browser version and OS information shown in nightwatch console and use in code?

From above image one can see that when we start running nightwatch, in console we can see browser name, version and OS name and version.
Is there a way to get versions value and use in code just like we used to get platform as
process.platform=win32 or darwin

I got the answer from https://github.com/nightwatchjs/nightwatch/issues/2445.
module.exports = {
'Demo test GitHub': function (browser) {
console.log(browser); // this will output all the details
browser
.url('http://www.google.com') // visit the url
}
};
so browser object gives following details:
NightwatchAPI {
capabilities:
{ acceptInsecureCerts: false,
acceptSslCerts: false,
applicationCacheEnabled: false,
browserConnectionEnabled: false,
browserName: 'chrome',
chrome:
{ chromedriverVersion:
'83.0.4103.39 (ccbf011cb2d2b19b506d844400483861342c20cd-refs/branch-heads/4103#{#416})',
userDataDir:
'/var/folders/5l/mgjzx80j4pb1trj_zlqrn7cc0000gp/T/.com.google.Chrome.WEyC7u' },
cssSelectorsEnabled: true,
databaseEnabled: false,
'goog:chromeOptions': { debuggerAddress: 'localhost:51082' },
handlesAlerts: true,
hasTouchScreen: false,
javascriptEnabled: true,
locationContextEnabled: true,
mobileEmulationEnabled: false,
nativeEvents: true,
networkConnectionEnabled: false,
pageLoadStrategy: 'normal',
platform: 'Mac OS X',
proxy: {},
rotatable: false,
setWindowRect: true,
strictFileInteractability: false,
takesHeapSnapshot: true,
takesScreenshot: true,
timeouts: { implicit: 0, pageLoad: 300000, script: 30000 },
unexpectedAlertBehaviour: 'ignore',
version: '83.0.4103.116',
webStorageEnabled: true,
'webauthn:virtualAuthenticators': true,
'webdriver.remote.sessionid': '034ce20513343a06554a87cb14d45ce9' },
currentTest: [Getter],
desiredCapabilities: null,
sessionId: '034ce20513343a06554a87cb14d45ce9',
.
.
.
So if we want something like browser name, version, OS name, etc use below:
console.log(browser.capabilities.platform) //prints... Mac OS X
console.log(browser.capabilities.browserName) //prints.. chrome
console.log(browser.capabilities.version) //prints... 83.0.4103.116

How to rewrite this datepicker code?

I use this library and I have some JS code for initialization:
$(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
maskInput: true,
pickTime: false
});
$('#datetimepicker3').datetimepicker({
language: 'en',
maskInput: true,
pickTime: false
});
$('#datetimepicker4').datetimepicker({
language: 'en',
pickDate: false,
maskInput: true,
pickSeconds: false,
pick12HourFormat: true
});
$('#datetimepicker5').datetimepicker({
language: 'en',
pickDate: false,
maskInput: true,
pickSeconds: false,
pick12HourFormat: true
});
});
I don't like it because if I have 10 more elements I will have 50 more strings of repeated code, so the thing I wanna do is this:
var DateTimePicker = {
constructor: function(id, language, maskInput,pickTime,pickSeconds,pick12HourFormat){
this.language = language;
this.maskInput = maskInput;
this.pickTime = pickTime;
this.pickSeconds = pickSeconds;
this.pick12HourFormat = pick12HourFormat;
this.id = id;
return this;
},
initialization: function() {
document.getElementById(this.id).datetimepicker({
language: this.language,
maskInput: this.maskInput,
pickTime: this.pickTime,
pickSeconds: this.pickSeconds,
pick12HourFormat: this.pick12HourFormat
});
}
};
var firstDatepicker, secondDatepicker, firstTimepicker, secondTimepicker;
firstDatepicker = Object.create(DateTimePicker).constructor('#datetimepicker2','en', true, false, false, false);
secondDatepicker = Object.create(DateTimePicker).constructor('#datetimepicker3','en', true, false, false, false);
firstTimepicker = Object.create(DateTimePicker).constructor('#datetimepicker4','en', true, true, false, true);
secondTimepicker = Object.create(DateTimePicker).constructor('#datetimepicker5','en', true, true, false, true);
firstDatepicker.initialization();
secondDatepicker.initialization();
firstTimepicker.initialization();
secondTimepicker.initialization();
This gives me an error:
Uncaught TypeError: Cannot read property 'datetimepicker' of null
So I think I am trying to do something really weird. I suspect that datetimepicker is an object which I am trying to manipulate incorrectly. Could you please help me with this, I am just learning JS.

The error you get is because you're calling datetimepicker() on a DOMElement. Use $(this.id).datetimepicker() instead.
That being said, I would argue that your 'simplified' version is actually more complex and difficult to maintain.
If you look at the settings you're using you only really have two different settings; those with pickSeconds and pick12HourFormat and those without. As such you could just use two classes by placing the relevant one on the required datepicker. Try this:
$(function() {
$('.simple-datepicker').datetimepicker({
language: 'en',
maskInput: true,
pickTime: false
});
$('.adv-datepicker').datetimepicker({
language: 'en',
pickDate: false,
maskInput: true,
pickSeconds: false,
pick12HourFormat: true
});
});
Obviously the class names can be adjusted as you require, but you can now use the above code for an infinite number of datepickers in your page, so long as they have the right class added to them.

Integration of 'jonblum:jquery-cropper' in Meteor

How do I add the JavaScript code in my Meteor application? This is what I want to include:
Here is the code:
$('.cropper-example-1 > img').cropper({
aspectRatio: 16 / 9,
autoCropArea: 0.65,
strict: false,
guides: false,
highlight: false,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false
});

How to include the jonblum:jquery-cropper package:
Run meteor add jonblum:jquery-cropper.
Run mkdir public in your project root.
Place the image you want to crop in your /public directory.
Include the image, for example:
<template name="lena">
<div class="cropper-example-lena">
<img src="/lena.jpg" alt="Lena">
</div>
</template>
Implement the Template.myTemplate.onRendered function and include the Cropper code, for instance:
if (Meteor.isClient) {
Template.lena.onRendered(function () {
$('.cropper-example-lena > img').cropper({
aspectRatio: 16 / 9,
autoCropArea: 0.65,
strict: false,
guides: false,
highlight: false,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false
});
});
}
Finally, include the template, e.g. {{> lena}}.
Result: