I'm very new to vscode but i've set up about all the things I need. One more thing that is quite missing is the autocomplete for className attribute on custom jsx tags (aka react components). It simply does not recommend anything when on a custom tag.
I've tried searching for any extension that does this but couldn't find any, am I missing something here?
As I know there is no way to show react attributes in autocomplete list for custom react tags.
But there is a way to add className attribute quickly by putting a dot and typing your class name then hitting tab. This will create the custom tag with the given class attribute.
To do this, you need to configure Emmet extension (It is a built-in extension)
Add these lines to your VS Code User Settings (or Workspace Settings) file:
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": { "javascript": "javascriptreact" }
If you are on Mac, you can quickly open the User or Workspace Settings file, by pressing
Shift ⇧ + Command ⌘ + P and typing into the Command Palette: >settings.json.
Official Documentation at VS Code Web Site
Related Issue on VS Code Github
Related
I want to use the regular Flowbite CSS code inside my React app.
https://flowbite.com/docs/components/modal/
I added the following code inside my react file:
https://flowbite.com/docs/components/modal/#default-modal
I added the CSS in the header:
And include the following JavaScript file before the end of the body element:
When I include the mentioned code (https://flowbite.com/docs/components/modal/ ), the modal just do not work.
How come this happens, can I fix it somehow?
And also, I do not want to use the Flowbite-react library as it does not have any documentation, and also do not have a lot of templates available.
I tried to add the mentioned steps and experimented, but I did not get the modal running with react
I am trying to customize the theme when using Semantic-UI-React, there are detailed instructions on how to customize themes in Semantic-UI, like we can override variables to change their styles.
But I didn't find any way to customize themes with Semantic-UI-React, since there is no semantic/src/themes and semantic/src/site folders for us to make changes, what comes with Semantic-UI-React is just the default CSS file (the file we import in our index.js file "semantic-ui-css/semantic.min.css").
Is there any way we can customize the theme in Semantic-UI-React? Thanks in advance!
This link may also help in addition to the theming page on the docs site.
https://jsramblings.com/how-to-use-semantic-ui-with-a-custom-theme-in-your-cra-app/
It has a setup script after you run
npm install --save-dev semantic-ui
Yes there is a way to customize themes and create your own
https://react.semantic-ui.com/theming/
Basically just follow instructions from the docs link, install semantic-ui-less, which are not compiled Less files for the Semantic-ui CSS, craco-less which is just a path plugin for CRA configured Webpack so your Less compiler can find files properly without ejecting your CRA, move the files to created folder, modify theme.config, start app and you are ready to customize your own theme, although I didn't find some kind of API for variables on Semantic-ui docs, so I had to browse semantic-ui-less package files for them.
One problem I encountered was that I tried changing the theme for all components in theme.config and it was throwing errors about missing fonts and variables. Don't do this, it's not gonna work, check the Semantic-ui docs about theming, there is a note about it
Themes are per component, so although, for example, material themes are available for menu, button, and site, changing all values to "material" will produce an error for components which are not included in that theme.
https://semantic-ui.com/usage/theming.html#browsing-for-themes
Is there a way to get autocomplete to work with JSX attributes the same way autocomplete works with HTML files. For example, In HTML if I have a tag and start typing onclick than the autocomplete window shows (See Image Bellow). I can't seem to get this to work with JSX. I am using Babel and Emmet packages. Emmet autocompletes the tags, but no attribute autocompletion. Is there an option I need to enable?
I use command react-native init "name project" then open vscode appear to have error message code. (image)
This is what you need to do with VS Code, observe the gif carefully
Steps to resolve error
1. Go to extension
2. Click on more (...) and select Show Built-in extension
3. Search "TypeScript and JavaScript Language Features" - yellow & blue icon
4. Click on Setting icon of extension and select Disable (workspace)
5. Click on Reload / Restart Required
If you are getting this in React Native its probably a known bug in VSCode, that when Google Flow (which competes with MS Typescript) is coded, shows errors erroneously mentioning Typescript.
Your current .js code is supposed to be preprocessed by Flow into another .js file with "proper" js.
So make sure Flow is installed and then disable the Typescript parsing support. Here's the official answer on the Flow installation webpage:
Set javascript.validate.enable option to false or completely disable
the built-in TypeScript extension for your project (see gif below)...
Otherwise, you may want to stay as is and just change your code as suggested by C2P1 on March 19, 2018 on the github issue 631
To disable the [js] parser (connected to Typescript),
In VSCode menu: File -> Preferences -> User settings, (or ctrl+,) and add the following line
"javascript.validate.enable": false,
This answer was completed after seeing Idan Dagan's answer (Not the accepted answer) here: js 'types' can only be used in a .ts file - Visual Studio Code using #ts-check
And here's an excellent albeit old page about setting up the react-native environment, from Hackernoon. (You also have the VSCode React-native-full plugin)
Just disable built-in extension for TypeScript in VSCode. On the VSCode Extensions choose "Show Built-in Extensions" and then search for "TypeScript and JavaScript Language Features", Click disable then reload the VSCode. It works for me
In VScode
Press
CTRL + SHIFT + P
Use this command
Open User Settings
copy and paste the next line in the search bar in settings
#ext:vscode.typescript-language-features
ready uncheck JavaScript validation
Helped me to resolve
To disable the [js] parser (connected to Typescript),
In VSCode menu: File -> Preferences -> User settings, (or ctrl+,) and add the following line
"javascript.validate.enable": false,
This is what you are looking for. Unfortunately I haven't Googled a proper solution but we have to disable some JS checking.
https://github.com/Microsoft/vscode-react-native/issues/631
I've solved this with a plugin for VSCode "Flow Language Support". It will control the errors of the code instead of the plug-in TS-JS (built-in plugin of VS Code). In Details of plugin, guides you how to disable the original plugin TS-JS VSCode.
instead of disabling Typescript and Javascript language features extension, you can go to the extension settings, find the option Javascript > Validate: Enable, and uncheck it to remove any warnings.
I have a project that uses React and I would like to trim my CSS build file. React has no html files so I'm not sure how to get UnCSS working with React. Can I use React with UnCSS? If yes how would I proceed?
As already commented it is possible to use React with uncss by supplying the urls to pages. However, there is an alternative way. React has a function renderToString which will return the output HTML as a string. you can write this to a file and pass the file to uncss for it to find all css selectors. Keep in mind that it won't detect classes added dynamically so those will have to be added manually in ignore property of options object passed to uncss. You can read more about it on uncss docs