Nav.navbar autocompletion not working in React - reactjs

I am following this React tutorial. At 10:21, he uses the shortcut nav.navbar to create a nav with className "navbar." However, when I try to do this in my code editor (VS Code) it doesn't autocomplete.
Does anyone know how to fix this?

Coincidently I was following the same tutorial and got curious about that as well. It seems like VS Code comes with the command that expand Emmet abbreviations using tab disabled. You need to go into VS Code settings and enable this option.
You can do that by going into the settings file and adding the line "emmet.triggerExpansionOnTab": true. Another option is from the settings menu within VS Code (File>Preferences>Settings) and use the search box to look for Emmet: Show Suggestions As Snippets, then check the checkbox.
More information:
https://code.visualstudio.com/docs/getstarted/settings
https://code.visualstudio.com/docs/editor/emmet
Emmet expand abbreviation doesn't work in Visual Studio Code with the attributes

on VScode settings search "emmet", look for "Emmet: Include Languages"
add item:
item: javascript
value: javascriptreact

Related

Improving how autocomplete works for img tag in React

I am learning to use React and using Visual Studio Code.
When I insert an image I write: .
I installed the extension: ES7 React/Redux/GraphQL/React-Nativesnippets and it's working with for example RFCE.
Is it possible to add an autocomplete? So for example I just need to enter img and then press control + something that it is autocompleting the whole tag? Or that a menu pops up where I can choose what I want to enter? I tried entering "img" and pressed control + space but it says "no suggestions".
Is it possible to add suggestions to the ctrl + space option?
Yes, you can get some intellisense. You need to ensure the files have the correct extension and that you have installed the correct extensions. I suggest this one:
https://marketplace.visualstudio.com/items?itemName=jawandarajbir.react-vscode-extension-pack

How to save codes on VS Code Mac?

I am using VS Code on a Mac to write ReactJS, however I find that I could not save my code. If I use command and s to save, then the JSX will be a mess, just like shown in the picture:
enter image description here
So how could I solve it? Thank you
I think your code is being saved, but that your code formatting is messing-up your code.
Hit the following combination : Shift+Command+P
This will open a menu on top. Inside that menu type Format Document With..., and select it. It will allow you to format your code with a different auto-format tool. Choose the one that is appropriate for your code i.e. Prettier.

JCK Editor Cleans the Code upon save

I am using JCK Editor in Joomla 3 but when i try to put this code in article and
press save, it cleans up the code and i only get nothing except the word 'Home'
Please help as possible
Thanking you in anticipation
<i class="fa fa-home"></i>Home
You can quickly configure Joomla from stripping away your HTML tags by configuring your user groups ‘Filter Type’ to: ‘No Filtering’ or to your own preference for the respective Filter Groups.
By default JCK will strip the Glyphicons.
You can also set Global Config - Editor to 'none' which will do the same thing.
Personally I use JCE Editor which I find to be more capable.

KDevelop: transform selected text?

I was wondering whether there was a function in KDevelop similar to the one that we used to have in Quanta (miss you, Quanta, btw).
I would like to set a keyboard shortcut, and apply a text transformation upon hitting it. Example:
I select my text to be translated, and I get back: <?=_('my text to be translated'?>
As you can see, this saves me a lot of awkward keystrokes...
I only found this feature in PHPStorm (where it is called "Live Templates"). I defined it like this: <?=t('$SELECTION$')?> and I can call it by hitting CTRL+ALT+J, and select it from the dropdown that appears.
You should be able to do that using a snippet with the following text: <?=_('%{selection}'?>
And you can bind a Shortcut to a snippet.
However my tests showed that this doesn't work correctly - there seems to be a bug somewhere.
As alternative you can write a script that does insert the text. See the documentation.

need to create a custom control

I have below requirement:
I wanted to create a custom control in which developer should be able to access below three properties.
Label:
IsRequired
content.
Example 1:
Name(Label): TextBox/any input control(Content)
Example 2:
Name(Label)*(IsRequired): TextBox/any input control(Content)
Developer should be able to apply globalization to the Label
If the field is required then he should be able to set a property
to enable * symbol
Developer should be able set any input control as a content of the control.
I request your suggestions, if you send me a sample code that would be good for me.
This demo doesn't seem latest but should be a good start. Googling around a bit more with the keywords found in the demo will also yield some relevant results.

Resources