Format onsave does not work in VS Code with Prettier - editor

I'm using VS Code with ES Lint and Prettier and they worked fine.
But today I noticed that Prettier doesn't format the code on save as it was doing before. I haven't done any updates or changes so I don't know why is this happening.
When I go into Settings it is already checked:
And if I deleted a ; or add an extra space in the code it shows it as an error in Prettier but I have to do a right click and choose to fix the problems. I don't know why aren't this done automatically as before.
settings.json:
{
"explorer.confirmDelete": false,
"javascript.preferences.quoteStyle": "single",
"typescript.preferences.quoteStyle": "single",
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"window.zoomLevel": 0,
"editor.formatOnSave": true
}
Any ideas on how to solve this annoying problem?

"editor.defaultFormatter": "esbenp.prettier-vscode",
Adding that to the settings.json works for me
Full settings.json:
{
"window.zoomLevel": 0,
"workbench.editor.enablePreview": false,
"workbench.editor.enablePreviewFromQuickOpen": false,
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"git.autofetch": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}

Related

jQuery UI widgets stop working after minifying

Recently I had to update our jquery version from 1.x to 3.5. With that I also had to update Jquery UI to 1.12. I used the opportunity to import our js dependencies as node_modules instead of just having a copy in our repository.
When running our WebApp within the IDE everything works fine and as expected. However, as soon as I build the .exe with pyInstaller (running a grunt task to minify everything into a single app.min.js), I get the error message "g.sortable is not a function". The same problem occurs with jquery.transit.
package.json:
{
"dependencies": {
// snip
"jquery": "3.5.1",
"jquery-ui": "1.12.1",
"jquery.iframe-transport": "1.0.0",
"jquery.transit": "0.9.12",
}
}
configuration.js:
require.config({
paths: {
// snip
'ui.sortable': '<...>/3rdparty/js/node_modules/angular-ui-sortable/dist/sortable',
'jquery': '<...>/3rdparty/js/node_modules/jquery/dist/jquery',
'jquery.transit': '<...>/3rdparty/js/node_modules/jquery.transit/jquery.transit',
'jquery-ui': '<...>/3rdparty/js/node_modules/jquery-ui-dist/jquery-ui',
}
})
Gruntfile.js:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('<...>/3rdparty/js/package.json'),
requirejs: {
compile: {
options: {
baseUrl: '<...>/js',
mainConfigFile: '<...>/js/configuration.js',
optimize: 'none'
}
}
},
ts: { ... },
sass: { ... },
uglify: {
'js': {
files: [
{
expand: true,
src: [
'app/**/*.js',
'!app/**/3rdparty/**/*.js',
'!app/<...>/js/configuration.js',
'!app/<...>/js/patch.js'
]
}
],
options: {
compress: true,
mangle: false
}
}
}
});
};
Again, the javascript files seem to work together properly as there is no problem when I start the webservice in pycharm. It's only when I compile and minify everything that the jquery UI widgets stop working. Other external libraries for whose I started using npm work perfectly fine.
I am kinda clueless at this point.
So, the solution to my problem was to just
import 'jquery.transit';
import 'jquery.ui';
In one of my TypeScript files. Apparently in the whole project that never happened anywhere. It worked before my updates because the jqueryUI version we used had the AMD part of it commented out.

Swagger UI - Hide definition URL path

Using Swagger - UI 3XX
I would like to simply know if this is possible and if so, how:
We currently have a need to hide the definition URL path that Swagger - UI displays.
I know it's not possible to remove this URL and I'm not looking to do that, all I'm wanting to do is to hide /mask the text box from the client viewing this page.
Looking at the new Swagger docs here, there are some awesome tricks and extras you can add, however - nothing I can see in relation to my query.
I'm pretty sure, I could interrogate the HTML, find the id of the element in question and manually change the display of it within the index.html, I would much rather prefer using a build in method, if one exists before getting to that possible solution.
i.e. Something like this is possible and works:
<style> .download-url-input { display: none !important; } </style>
Is this even possible?
In Swagger UI 3.x, you can hide the top bar in one the following ways.
Option 1
Edit dist\index.html and find this code:
const ui = SwaggerUIBundle({
url: "http://petstore.swagger.io/v2/swagger.json",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
Remove layout, SwaggerUIStandalonePreset and SwaggerUIBundle.plugins.DownloadUrl, so that the constructor looks like this:
const ui = SwaggerUIBundle({
url: "http://petstore.swagger.io/v2/swagger.json",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis
]
})
(Source)
Option 2 - Recompile Code
You can also recompile Swagger UI without the top bar plugin as explained here and rebuilding it. You will need Node.js 6.x and npm 3.x.
Edit src/standalone/index.js and remove TopbarPlugin from presets:
// import TopbarPlugin from "plugins/topbar" // <----------
import ConfigsPlugin from "plugins/configs"
// the Standalone preset
let preset = [
// TopbarPlugin, // <----------
ConfigsPlugin,
() => {
return {
components: { StandaloneLayout }
}
}
]
Rebuild Swagger UI – in the project's root directory run
npm install
then
npm run build
Now your dist\index.html does not have a top bar.
For the version 3.x add slice function to:
SwaggerUIStandalonePreset.slice(1)
In the version 4.x (inside swagger-initializer.js file) set layout to "BaseLayout"
window.ui = SwaggerUIBundle({
url: "./swagger.json",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "BaseLayout" // <<< here
});

Add extra info to tooltip for specific bar in nvd3 multiBarChart

I use django with django-nvd3 to generate some charts. I'am not good in javascript at all.
I have this example (java script was created by django-nvd3)
http://jsfiddle.net/rkorzen/87WVr/2/
I want to add extra info to tooltip (if this extra info exist for my bar).
Data is composed of the blocks:
{"values": [{"y": 19, "x": "Checkpoint 1", "info":"ABDG"},
{"y": 17, "x": "Checkpoint 2"}],
"key": "Very good", "yAxis": "1"
},
in this point I want to ad info "ABDG" to tooltip for bar x="Checkpoint 1" and y=19
But don't have idea how :(
I'am not sure if django-nvd3 have some options for this. So decided to ask about js.
Maybe someone Can help:)
Try using extra dict :
'chartdata': {
'x' : 'your_x_axis data',
'name1': 'Somename',
'y1': 'y_axis_data' ,
'extra1': {
"tooltip": {"y_start": "", "y_end": " cal"},
},
}

Highcharts does not work with wicked_pdf

I'm trying to generate a PDF report using the Wicked_pdf gem and Highcharts.
I've already tried to set animation, enableMouseTracking and shadow false.
But when wkhtmltopdf tries to generated the PDF files I got an error.
I really don't not what to do, because when I do the same procedure for an HTML, Highcharts renders perfectly.
I fixed it by setting this options:
plotOptions:
line:
animation: false
enableMouseTracking: false
shadow: false
Also, don't forget to include JQuery and inline your styles and scripts
Try setting this:
series: { 'enableMouseTracking: false, shadow: false, animation: false' : nil}
This solution worked for me. I have a pdf view and a html view and implemented solution has:
<more highchart options>
...
plotOptions: {
line: {
marker: {
enabled: false
},
dashStyle: 'ShortDash'
},
series: { #{request.format == 'pdf' ? 'enableMouseTracking: false, shadow: false, animation: false' : nil} }
},
...
<more highchart options>
Try debugging in the QtWeb browser.
Instructions on debugging javascript in Qt here
You may find that your javascript contains unsupported syntax or keywords, which results in the issue as described.
The Qt WebKit rendering engine that wkhtmltopdf was using doesn't support ES2015, so you might have a simple solution like me, which was to replace keywords like let and const.

Sublime Text 2 up/down arrow movement keybinding

when i have one line of text on sublime text 2, say I have the line "test".
if the caret is between 'e' and 's' and I press the up button, it doesn't do anything.
I would like to change that, so if there is no line above the current one, when I press up, the caret should go to the start of the line.
same with down button.
if there is no line between the current line, the caret should move to the end of the line.
that is the default textmate behavior, and I use it a lot.
can I change that on sublime text 2 with keybindings?
I know it should be something like this:
{ "keys": ["up"], "command": "move", "args": {"by": "characters", "forward": false }, "context":
[
{ "key": "something", "operator": "not_regex_contains", "operand": "\n" }
] }
I cannot find the right context for it. I tried preceding_text not_regex_contains "\n", but preceding_text only returns the text between the start of the current line and the caret.
any ideas?
thank you.
This should work as you'd expect in latest dev builds - http://www.sublimetext.com/dev.
You don't need a keybind to accomplish this. Adding the following line in your Preferences.sublime-settings file should do the trick:
"move_to_limit_on_up_down": true,
The reason for the terminating comma is because these files are in json, and if you have entries after this one, you'll need to separate them by comma. For reference, here's my Preferences.sublime-settings file as an example:
{
"always_show_minimap_viewport": true,
"caret_style": "phase",
"color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
"draw_minimap_border": true,
"ensure_newline_at_eof_on_save": true,
"font_size": 12,
"highlight_line": true,
"highlight_modified_tabs": true,
"move_to_limit_on_up_down": true,
"overlay_scroll_bars": "enabled",
"show_tab_close_buttons": false,
"tab_completion": false
}
You can edit this file by going to Preferences > Settings - User in Sublime.

Resources