Develop Reference

How to get React .js file to format correctly

I have a file named App.js in Visual Studio Code and the file actually renders fine in the browser, but it does not format correctly:
I have switched the file type to javascriptreact:
But it still won't format with SHIFT-ALT-F.
Here is my settings.json file:
{
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"explorer.confirmDelete": false,
"files.autoSave": "afterDelay",
"editor.formatOnSave": true,
"explorer.confirmDragAndDrop": false,
"editor.acceptSuggestionOnEnter": "off",
"editor.fontSize": 12,
"window.zoomLevel": 0,
"workbench.editor.enablePreview": false,
"editor.renderWhitespace": "all",
"[javascriptreact]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[json]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"editor.wordWrap": "on",
"git.enableSmartCommit": true,
"git.autofetch": true,
"diffEditor.ignoreTrimWhitespace": false,
"workbench.sideBar.location": "left",
}
What else do I need to set so that SHIFT-ALT-F properly formats my React Javascript file?

Carousels not loading properly

I have launched a website but I can't figure out why the carousels don't load up correctly each time the site is visited and it sometimes requires reloading it multiple times - The images have all been downsized for web and I don't know how to fix it,
http://alexburger.co/Graphic.html
https://codepen.io/glittergirl/pen/pZwaaQ
$(window).load(function() {
"use strict";
$('.main-carousel').flickity({
cellAlign: 'left',
contain: true,
wrapAround: true,
imagesLoaded: true,
autoPlay: true,
bgLazyLoad: 1
// adaptiveHeight: true
});
$('.main-carousel2').flickity({
cellAlign: 'left',
contain: true,
wrapAround: true,
imagesLoaded: true,
autoPlay: true,
bgLazyLoad: 1
// adaptiveHeight: true
});
});

Browser-Sync - All events Hook - Gulp

Recently I discovered browser-sync. Now the application I want to write requires a kind of google map functionality. I noticed that natively browser-sync only supports "scroll,click and forms". I need to hook into all events or at least when panning/interacting with a map, so that it sync's cross browsers.
I found a blog discussion that concluded to have solved this and links to browser-sync-client project https://github.com/BrowserSync/browser-sync-client
Since there is no documentation and only a small example. Can anyone tell me how to implement it within a gulp setup?
I tried to do the following but wihtout any luck:
var browserSync = require('browser-sync').create(),
client = require("browser-sync-client");
gulp.task('browser-sync', function () {
browserSync.use(client);
browserSync.init({
server: {
baseDir: "./wwwroot"
},
ghostMode: {
clicks: true,
forms: true,
scroll: true
},
logLevel: "debug",
open: true,
minify: false,
clientEvents: [
"scroll",
"input:text",
"input:toggles",
"input:keydown",
"input:keypress",
"form:submit",
"form:reset",
"click",
"contenteditable:input",
"mouseup",
"mousedown",
"select:change"
],
ghostMode: {
clicks: true,
scroll: true,
forms: {
submit: true,
inputs: true,
toggles: true,
keypress: true,
keydown: true,
contenteditable: true,
change: true
},
mouseup: true,
mousedown: true
},
capture: true
});
});

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

JSHint: Function conventions

I would like my JSHint to yell at me when I don't follow Crockford's function conventions - i.e.:
"There should be no space between the name of a function and the ( (left parenthesis) of its parameter list. There should be one space between the ) (right parenthesis) and the { (left curly brace) that begins the statement body"
Is there an option to enable this? I thought "white":true would work but it doesn't seem to. I know JSLint will complain about this as well.
My .jshintrc:
{
"white": true,
"node": true,
"browser": true,
"esnext": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 2,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"regexp": true,
"undef": true,
"nomen": false,
"unused": true,
"strict": true,
"trailing": true,
"smarttabs": true,
"sub": true,
"globals": {
"angular": false,
"d3": false
}
}

I think that this may be something best done with jscs. In fact there are presets for Crockford available.
As JSHint moves to version 3, it will no longer be focused on being a style tool. (Read JSHint 3 Plans).