i am using material ui and vscode. autocomplete really annoys me when I write styles in makeStyles because it doesn't understand that I'm writing styles as styled components.
For example, he constantly puts ";" where it would be ",". These are trifles, but these trifles appear dozens of times a day.
Tried to find some mui extensions for vscode but couldn't. There was an attempt to use tabnine for autocomplete, and it does the job, but I don't like how tabnine works in general.
By the way, in another project where I use the styled-components library - everything is ok, there vscode successfully copes with autocompletion. I do not understand what can be done with mui.screen
I also thought about trying webstorm, but it seems redundant to switch to another IDE because of this alone.
Related
The site now I am developing has a collapsable source code view panel.
And I have no idea how to implement a React component to do the exactly the same thing and I am really sorry that I can only afford an example what I want.
There is a code view panel on this site and I want exactly same panel like the one on this site.
https://ftmscan.com/address/0xce761d788df608bd21bdd59d6f4b54b2e27f25bb#contracts
On the solidity source code view panel there is a collapse function and I am not sure how to implement this function.
Is there any module that can parse solidity code or do I have to make a new logic to parse code?
To summarize my questions;
Make a React Component that can view source code.
How to add collapse function to that component?
Additionally, I am currently using material-ui 4.12.3 and React version is 17.0.2
It looks like they are using the Ace editor.
There are multiple React implementations of the Ace editor on npmjs. I recommend you look into one of those. (Then you'll also get expand/collapse in the code editor "for free".)
I'm learning Javascript and up until now when I wanted to change anything in the DOM, I was using Google Chrome devtools to do that. Now I'm moving to write my code inside the JavaScript file, that accompanies the webpage, in Atom but the problem is the extremely useful autocomplete features of Chrome devtools is not available in Atom. For example when I type this code:
document.addEventListener('click', function(){
const mainHeading = document.querySelector('h1');
mainHeading.style.backgroundColor = 'red';
})
Chrome devtools is intelligent enough to suggest backgroundColor with a capital C to prevent any typing errors but the same thing doesn't happen in Atom. In fact Atom does not have any suggestions at all. I have tried installing different JavaScript plugins such as atom-ternjs or autocomplete-javascript, to name a few but none is working when you want to write the code to manipulate the DOM. Any suggestions to solve this is greatly appreciated.
Here's a quick solution using Atom Ternjs.
Navigate to the menu bar and click Packages-> Atom Ternjs -> Configure Project.
Here, select the browser option under libs
Then, just scroll down and click on Save and Restart Server.
I hope this helps.
I'm using TabNine extension now and I'm satisfied with the performance. It uses deep learning to learn and predict the variables and lines of code you might want to write based on those variables and the more lines you write in a particular project the better it gets at giving the suggestions.
I know VSCode supports auto import for JavaScript.
For some reason, it does not work with React Native. There is even a dedicated section on the VSCode website for this. But it only answers how to fix this problem for Typescript (using allowSyntheticDefaultImports). I want it for JavaScript (ES6).
I tried explicitly setting "javascript.suggest.autoImports": true, in my settings.json but that wouldn't change anything, since true is the default anyways.
How to get auto imports for React Native with JavaScript in VSCode?
PS: This plugin (suggested in this similar question) is also only for TypeScript. Besides that, since VSCode includes auto import out of the box there should be a solution without an extension for RN and JS.
You might have the 'Auto Imports' option disabled.
In VSCode go to Settings and search for 'Auto Imports' option, it should be something like this:
Just activate it if it's disabled and you'll be fine.
Install Auto Imports VSC extension, and enable Auto-imports options(for JS) in the VSC settings (File -> Preferences -> Settings).
You may try ctrl+space (for example, after placing the cursor inside the <Text> element) and select the import element from the displayed options.
For me the issue was neither the plug in nor VSCode.
I tried selecting suggestions with library name besides it and it worked for me. i.e if I want component then I will select Componet react from the suggestion and it worked.
Is there a way to mix react-md and material-ui components?
I'm trying to use componenets from both libraries, but they override the styles from each other.
Any ideas?
i dont think think thats an good idea , beacuse i have tried the same ,initially it works fine but when you want to add more styles, or try to customise it ran into errors, styles collide with each other and you wont get desired result.
and it will also gives problem in server side rendering.
if react-md or material ui standalone not fullfilling your requirements than you can also take look at semantic-ui
I can not remove following warning in react code. "Attribute className is not allowed here".
Warning in PhpStorm
Unknown HTML tag attribute can not be set to camelcase only lower case is saved, and turning the check off is not helping.
Settings in Languages & Frameworks > JavaScript > Libraries
Can you help me I have warnings for every attribute in jsx. Editor is set jsx harmony.
My problem with warnings in jsx was solved by instaling React-Template plugin.
You should add Reactjs library.
Using Reactjs in JavaScript and TypeScript
In my case, I've just added Reactjs support for TypeScript:
I'm a little late on the scene but performing Invalidate Caches/Restart... solved the issue (after switching to JSX Harmony).
Had a similar problem like the asker - after updating to IntelliJ 2016.3, the values of the classNames were marked as errors (not the "className" attribute itself, but it's similar to what he had).
My solution was to select "Uninject language or reference" from the little lightbulb that appears when you put your cursor on the error:
Have no idea why it works.
Couldn't find any decent React/JSX plugins for Intellij either, except from the above mentioned "React-Templates" which did wonders in the past.
But it seems Intellij's native (I guess) support for JSX & React is not bad, except for annoying things like this.