I'm writing a vscode extension where I'm hoping to squeeze more dynamic functionality out of markdown preview. Effectively the problem I'm trying to solve is:
In markdown preview, there's a checkbox
When user clicks the checkbox in markdown preview, send a message/event to the vscode extension runtime
Vscode extension can listen for this message/event and store the action in local storage
Checkbox state is saved - and subsequent renders of the markdown preview can use this action
Ideally, I'd like to do this while keeping the default markdown preview security (https://code.visualstudio.com/Docs/languages/markdown#_strict). After all, I don't need the extension to or markdown preview script to talk to a remote server - I just want them to be able to talk to one another.
Problem as code
To write the problem as sudo code, I want my markdown preview script to contain something like:
const button = ... // get button element
button.addEventListener('click', () => {
... /*
* Send a message to the vscode extension. Something like:
* `vscode.postMessage('vscode.my-extension.preview-action' + value)`
* (which I can't get to work, I'll discuss why)
*/
});
where then my extension can listen for messages like 'vscode.my-extension.preview-action'.
What I've Tried Already
I have tried acquireVsCodeApi() but because the markdown extension already does that, I can't do it again in the subsequent loaded script. I've also tried registering a uri handler but as far as I can try out the preview script still needs to fetch to that uri, which is still blocked by the default markdown security settings.
Perhaps markdown preview scripts are not the place to do this kind of thing, but I just wanted to leverage as much as possible that's already there with the vscode markdown extension. I want to supplement markdown but not replace it, the functionality I want to add is just icing on markdown documentation.
I've read https://code.visualstudio.com/api/extension-guides/markdown-extension#adding-advanced-functionality-with-scripts and it doesn't tell me much about markdown extension scripts capabilities and limitations.
Thanks to #LexLi I looked at some of the source code in the markdown extension and was able to come up with an ugly hack to make this work in preview scripts. Markdown allows normal clicks. And vscode extensions can handle normal clicks. I've paraphrased the code so there could be small syntax errors.
In the extension I did this:
vscode.window.registerUriHandler({
handleUri(uri: vscode.Uri): vscode.ProviderResult<void> {
console.log(`EXTENSION GOT URL: ${uri.toString()}`);
},
});
Then I made sure my extension/preview script put this in the document
<!-- in the preview script I place a button like this -->
<!-- it even works with hidden :) so I can do more app customization -->
<a
hidden
id="my-extension-messager"
href="vscode://publisher-id.my-extension"
>
cant see me but I'm there
</a>
Then my preview script I can even set href before faking a click:
const aMessager = document.querySelector("#my-extension-messager");
console.log('client is setting attribute and clicking...')
aMessager.setAttribute('href', 'vscode://publisher-id.my-extension?action=do-something');
aMessager.click();
console.log('client clicked');
Logs I saw (trimmed/tweaked from my particular extension to match the contrived example):
client is setting attribute and clicking...
client clicked
[Extension Host] EXTENSION GOT URL: vscode://publisher-id.my-extension?action%3Ddo-something
It's a hack but I can do a lot with this. Within the URL I can encode data back to the extension and kind of pass whatever I want (as long as data is relatively small).
I am trying to recreate the basic dropright example for the Bootstrap 4 component: https://getbootstrap.com/docs/4.1/components/dropdowns/#dropright using Angular 6 and ngx-bootstrap (3.0.1 as of writing). I have found solutions to get the dropdown to open down (standard) or up (dropup) but dropright isn't working.
https://stackblitz.com/edit/ngx-bootstrap-dropdownplacement
From the docs, there seems to be a "placement" input - https://valor-software.com/ngx-bootstrap/#/dropdowns#dropdown-directive - but there are no examples of this and I've tried attaching it to any one of the elements dropdown, dropdownToggle or *dropdownMenu. Basically this is an important part of a sidebar menu, where the submenu dropright.
Can anyone point me in the right direction to get the dropright functionality working with ngx-bootstrap, please?
Sidenote: I have managed to get this working with ng-bootstrap but wouldn't want to switch packages if I don't really have to.
I got your point but I think this happen because of the bootstrap version.
https://getbootstrap.com/docs/4.1/components/dropdowns/#dropright
if you check this url you will see they are using bootstrap v.4.1 and you are using ngx-bootstrap, both have different CSS classes that's why you facing this issue.
If you want to fix this issue. Please do few step:
1) https://www.npmjs.com/package/bootstrap (npm install bootstrap)
2) Than include in angular-cli.json file, like -
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
3) Remove your BsDropdownModule from app.module.ts file
If I missed anything please let me know
Thanks !!
I found the solution to make the placement work. You should add container="body" and of course placement="top right". Although it doesn't work as expected
To show it on top use [dropup]="true"
I've started learning React Native.
I'm using Visual Studio Code as my editor.
I've set up the boiler plate and started the app. But whenever I change a .js file and hit save, VSCode is messing up all the formatting.
I thought I could sort this in the settings.json file but after googling for a while and playing around I can't find the correct setting.
Is this a bug or am I doing something wrong?
Setting file is default one:
UPDATE: I re-installed vscode. Then set up a basic js file with a react native tag and a html tag. I added in:
"editor.formatOnSave": false,
"javascript.format.enable": false
To my settings.json file and the problem still occurs:
The problem is having tags in a js file, I just don't know how to tell vscode to ignore them?
I found out what this was by looking though the extensions. Thanks to #wgj for the hint.
Turns out it was the JS-CSS-HTML formatter. I looked through the instructions and have removed the auto save for now. I'll have to work out the specific settings for this.
It uses js-beautify so if anyone knows the settings I should be looking at would be much appreciated.
I had a similar problem and it turned out my ultimate culprit was...
So I simply disabled it for the workspace.
Same here, all my HTML format messed up after saving, I disable "JS-CSS-HTML Formatter" and problem solved
In the end, what did the trick was changing the file format from JavaScript to JavaScript React on the bottom toolbar.
All my HTML format messed up in js after saving, I disable "JS-CSS-HTML Formatter" and restarted vscode, problem solved.
I found my solution to this problem by converting my components file extension from js to jsx. No more issues and everything is working fine.
Disable js-css-html formatter.
if you are using prettier and beautify together, override the setting as :
"beautify.ignore": [
"**/*.js",
"**/*.jsx"
]
Use Prettier Code Formatter instead of Beautify. Works perfectly for language mode Babel JavaScript
You should search for "format" in settings.json. You'll find a whole lot of TypeScript/JavaScript formatting tweaks in there, but the one that stands out to me is:
// Defines space handling after opening and before closing non empty brackets.
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false
Alternative, you're not a fan of formatting at all, you can turn it off entirely:
// Enable/disable default JavaScript formatter.
"javascript.format.enable": true,
However, a lot of my formatting options come from language server extensions, so if you're using one for React Native specifically, be sure to check the attributes in settings.json, or the docs to see if there are any attributes you can add.
Add this on settings.json file. Whether you are using any extension or not, use this code. It works fine for me:
Solution 1: Just Disable JS-CSS-HTML Formatter
Solution 2: Press Ctrl+, (open settings) after that search Code formatted and change none --> Prettier
If you don't have prettier install from the extension's marketplace.
i just had this problem , apparently its because of the beautify/prettier , try to disable both , then restart Vs code (your editor) . but then if u really want to use prettier , go under its extension settings and make sure its in strict with whitespaces and toogle around a few other settings and you should be fine , cheers .
Just turning off format on save option from the settings would work.
You can select JavaScript React in the task bar under Select Language Mode.
You can try one of the following
uninstall other formatters which are not required. To check how many formatters you have just press ctrl + shift + p or command +shift + p (mac) and type format document after that a menu will appear showing you your formatters
press ctrl + shift + p or command +shift + p (mac) and type settings and click on open users settings and then search for format on save and check the box
that's it!!
Enjoy
changing the file format from JavaScript to JavaScript React on the bottom toolbar worked just fine for me
I have tried all methods but the problem is solved completely by this:
-> Open setting.json
-> "files.associations": {
"*.js": "javascriptreact"
}
->Add above lines and press save the problem will solve
You can type the following command string when creating your project
npx create-react-app name-of-app react-complete-guide
or the following, if you have create-react-app installed already
create-react-app name-of-app react-complete-guide
While debugging my React Native app in Chrome, I'm often unable to set breakpoints in the Sources tab. When I click on a line of code to add the breakpoint, a breakpoint is added instead to the next function declaration line in my module.
This doesn't happen in all of my source modules, but often enough that it prevents me from debugging efficiently.
I'm currently using RN 0.22 but this has been happening on older versions of RN as well (e.g. RN 0.18).
This problem maybe caused by babel. When use normal function and arrow function together, it happened.
"sourceMaps": "inline" in .babelrc fixed this for me.
I've only experienced this issue under the following conditions:
1) The .js file contains multiple functions, and
2) Attempting to set a breakpoint within a function that is not the last function in the .js file
So, a partial workaround is to move a function such that it is the last function in the .js file. Or, you could assign a single function per file. Either way, you will be able to set breakpoints.
This is far from ideal, but it's the only "solution" I've found so far.
I had the same issue, and I have a cozy solution for now :
I put the word "debugger" in the file which I want to debug.
I refresh the browser to see that it stops.
after it stops, I can add as much as breakpoints as I want and remove the "debugger" word from file
Try this package
https://www.npmjs.com/package/react-breakpoint-fix
just install the package and run react-breakpoint-fix from the terminal.
This fixed it for me. I'm using react-scripts#3.x
I read this:
https://www.jetbrains.com/clion/help/folding-and-expanding-custom-blocks.html
and tried following this link:
https://www.jetbrains.com/clion/help/Folding_Custom_Regions_with_Line_Comments.html
but it appears to be broken, since it redirects to "Meet CLion" page.
How do I define custom folding regions in CLion using comments?
CLion is based on IntelliJ IDEA, and thus supports multiple ways, including:
//region Description
//endregion
and
//<editor-fold desc="Description">
//</editor-fold>
These can be easily accessed by selecting the code you wish to wrap in a region, and hitting Ctrl+Alt+T. You can alternatively access it by clicking Code > Surround with... in the menu bar.