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
}
}

I have to start Prettier each time manually as it doesn't start automatically

{
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"liveServer.settings.donotShowInfoMsg": true,
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"workbench.colorTheme": "Monokai Pro",
"workbench.iconTheme": "vs-seti",
"files.autoSave": "onFocusChange",
"editor.fontSize": 18,
"editor.multiCursorModifier": "ctrlCmd",
"window.zoomLevel": 1,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSaveMode": "modifications",
"javascript.format.placeOpenBraceOnNewLineForFunctions": true,
"prettier.arrowParens": "avoid",
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true,
"prettier.tabWidth": 4,
"prettier.useTabs": true,
"editor.formatOnSave": true
}
Default Formatter: esbenp.prettier-vscode
Format on save: clicked
View/Command Palette/Format Document With/ Prettier Code Formatter (default)
Even though I have done the proper settings as above, I have to start prettier each time when I opened vscode. CTRL+S doesnt trigger prettier at first. As soon as I set <View/Command Palette/Format Document With/ Prettier Code Formatter (default)> it starts working.
Do you know what the problem would be with 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

jsonlint is not defined - codemirror

I have ui-codemirror implemented in angular application. After turning on lint I have an error in console:
ReferenceError: jsonlint is not defined
at https://localhost:9000/bower_components/codemirror/addon/lint/json-lint.js:20:3
lint.js:20:3 :
jsonlint.parseError = function(str, hash) {
These are my options for editor
$scope.cmOption = {
value: "/*WRITE YOUR INSTRUCTION HERE*/",
lineWrapping : true,
lineNumbers: true,
textWrapping: true,
indentWithTabs: true,
readOnly: false,
theme: 'neat',
mode: "application/json",
matchBrackets: true,
autoCloseBrackets: true,
gutters: ["CodeMirror-lint-markers"],
lint: true
};
And here lint.js included (at the very bottom of my index, after all other codemirror scripts)
<script src="bower_components/codemirror/addon/lint/lint.js"></script>
<script src="bower_components/codemirror/addon/lint/javascript-lint.js"></script>
<script src="bower_components/codemirror/addon/lint/json-lint.js"></script>

How to use tinymce with highlight.js?

On my website I wanna show syntax highlighted code to readers. I am using Tinymce for editing purposes. I am using Mezzanine CMS and I dunno much about TinyMCE. The problem is when I select preformat for wrapping my code snippet, TinyMCE wraps it with <pre> tags but highlight.js only highlightjs <pre><code> my-code-snippet </code></pre> tags i.e. It will only highlight code that is wrapped by pre as well as code tags.
My current tinymce_setup.js file is like this.
function CustomFileBrowser(field_name, url, type, win) {
tinyMCE.activeEditor.windowManager.open({
file: window.__filebrowser_url + '?pop=2&type=' + type,
width: 820, // Your dimensions may differ - toy around with them!
height: 500,
resizable: "yes",
scrollbars: "yes",
inline: "yes", // This parameter only has an effect if you use the inlinepopups plugin!
close_previous: "no"
}, {
window: win,
input: field_name,
editor_id: tinyMCE.selectedInstance.editorId
});
return false;
}
if (typeof tinyMCE != 'undefined') {
tinyMCE.init({
// main settings
mode : "specific_textareas",
editor_selector : "mceEditor",
theme: "advanced",
language: "en",
dialog_type: "window",
editor_deselector : "mceNoEditor",
// general settings
width: '700',
height: '350',
indentation : '10px',
fix_list_elements : true,
remove_script_host : true,
accessibility_warnings : false,
object_resizing: false,
//cleanup: false, // SETTING THIS TO FALSE WILL BREAK EMBEDDING YOUTUBE VIDEOS
forced_root_block: "p",
remove_trailing_nbsp: true,
external_link_list_url: '/displayable_links.js',
relative_urls: false,
convert_urls: false,
// callbackss
file_browser_callback: "CustomFileBrowser",
// theme_advanced
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "",
theme_advanced_buttons1: "bold,italic,|,link,unlink,|,image,|,media,charmap,|,code,|,table,|,bullist,numlist,blockquote,|,undo,redo,|,formatselect,|,search,replace,|,fullscreen,",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_path: false,
theme_advanced_blockformats: "p,h1,h2,h3,h4,pre",
theme_advanced_styles: "[all] clearfix=clearfix;[p] small=small;[img] Image left-aligned=img_left;[img] Image left-aligned (nospace)=img_left_nospacetop;[img] Image right-aligned=img_right;[img] Image right-aligned (nospace)=img_right_nospacetop;[img] Image Block=img_block;[img] Image Block (nospace)=img_block_nospacetop;[div] column span-2=column span-2;[div] column span-4=column span-4;[div] column span-8=column span-8",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
theme_advanced_resizing_use_cookie : true,
theme_advanced_styles: "Image left-aligned=img_left;Image left-aligned (nospace)=img_left_nospacetop;Image right-aligned=img_right;Image right-aligned (nospace)=img_right_nospacetop;Image Block=img_block",
advlink_styles: "intern=internal;extern=external",
// plugins
plugins: "inlinepopups,contextmenu,tabfocus,searchreplace,fullscreen,advimage,advlink,paste,media,table",
advimage_update_dimensions_onchange: true,
// remove MS Word's inline styles when copying and pasting.
paste_remove_spans: true,
paste_auto_cleanup_on_paste : true,
paste_remove_styles: true,
paste_remove_styles_if_webkit: true,
paste_strip_class_attributes: true,
// don't strip anything since this is handled by bleach
valid_elements: "+*[*]",
valid_children: "+button[a]"
});
}
What changes should I make in my tinymce setup so that when I click on preformat I get <pre><code> </code></pre> tags ?

Found the answer in highlight.js docs. Over here http://highlightjs.org/usage/ under custom initialization I found it. Curently I have put
<script>$(document).ready(function() {
$('pre').each(function(i, e) {hljs.highlightBlock(e)});
});</script>
just before the closing body tag. This will pickup the code found inside pre tags and highlight it.