I recently start using tailwind CSS in my react app. Tailwind work when I use its class in elements. But Intellisense plugins doesn't suggest classes when I start typing.
I see other people have same problem and saw the solution others explain but after all I can't fix this.
Alos it doesn't work on html files to when I create a .html file
I used tilwind installation document on https://tailwindcss.com/docs/guides/create-react-app to install tailwind.
I play around with some setting and configuration that others said like:
I added these lines to the setting.json file setting.json file
"tailwindCSS.includeLanguages": {
"javascriptreact": "html",
"typescriptreact": "html",
"plaintext": "html"
},
"emmet.triggerExpansionOnTab": true,
"tailwindCSS.emmetCompletions": true,
And also use "npx tailwindcss-cli#latest init" command to create tailwind.config.js file
tailwind.config.js file
But after all it still doesn't work and I don't know what else I should do.
If someone could give me a hand with this problem. Thanks
Try adding this to vscode setting.json:
"editor.quickSuggestions": { "strings": true }
That worked for me as mine seemed to have issues with auto suggestions while typing in strings.
Related
Using VS-code, I'm attempting to use emmet for styled-components in react. I've tried every tip on the internet, but I still can't get it.
I have tried to install extensions like vscode-styled-components
i have added "emmet.includeLanguages": { "jsx": "javascriptreact, css", "javascript": "javascriptreact, css" }, in my settings.json
for reference if we typedf it will be added as display:flex
but still im not getting it help me with solving this issue
You can use vscode-styled-components extension in VSCode.
Link here.
It's an awesome Extension of VSCode.
Describe the bug
In my React Typescript project, I am trying to use CSS modules. I created the project using create-react-app, added TypeScript later. Then I followed the instructions from the docs to setup CSS modules in the project
Added the plugin with npm install -D typescript-plugin-css-modules
Then updated tsconfig.json
{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
}
}
I tried to run it but it didn't run. It complained about import statement here. Though the plugin docs say it shouldn't
So I added global.d.ts, which resolved the error
Now when I run it, the Home link on the header should be white. But I see the default color
To Reproduce
Go to https://codesandbox.io/s/summer-haze-ztnf6?file=/src/index.tsx
See the Link Home
Expected behavior
Home link color should be white
Since you already solved the issue, please have a look for description: problem in accessing the scss variables in react components
in a similar way you can access classes from the module scss files.
Never mind, changing the name of the scss file to header.module.scss fixed the issue.
I am coding a React page with VS Code.
Suddenly, some snippets like rfce started not working even if it's never given me problems. I don't know what's wrong.
picture of before
picture of now
What I did recently was just updated react-router-dom to version 5.2.0 and npm install it.
React snippets are not built-in. That one for example comes from this extension.
Make sure you have it installed and enabled, and that you are working in a file with the proper file extension for them to work.
If on windows, use -rfce instead of _rfce. This worked for me!
I went through the same thing. You can try uninstalling and then installing the extension again
Those React snippets what you are talking about are not built-in, those snippets are coming from an extension.
That extension stopped working for you because you may change some of your settings.
Make sure you have it installed and enabled, and that, you are working in a file with the proper file extension for them to work (try: .jsx & .tsx).
If they are still not working, which was the case at me also, check your settings, because some of the settings can interfere, and make the extension stop working.
Open settings.json by: CTRL + SHIFT + p , type: settings.json, select: "Open settings (JSON)"
Check in the settings.json file if the following setttings are different than mine:
"editor.snippetSuggestions": "top", /*make sure this is NOT "none"*/
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
},
"editor.wordBasedSuggestions": true,
"html.suggest.html5": false,
"typescript.suggest.paths": false,
"javascript.suggest.paths": false,
As fast experiment you can copy the whole code, paste it at the end of the settings.json, save it, restart VSC. If it solved your issue, you can sort the commands one-by-one, to find out which caused the issue of yours.
It might not work, if you use the same file name like Rfce.js
Ensure that the file has extension js, ts etc.,
Uninstalling and installing React snippet from VSCode Extension might work.
Go to Preference - Settings - Extensions - Search for React Snippet and check if the values are correctly checked in.
It seems like that React snippet is not working properly, try to download it manually and install it through the link to the vss file and now install from Vss option in the extension section
I had to uninstall the snippet extension I had which was:
React-Native/React/Redux snippets for es6/es7 v2.0.6 by: EQuimper
and I used the extension:
ES7 React/Redux/GraphQL/React-Native snippets v1.9.3 by:
rodrigovallades
Launch Quick Open:
Linux: Ctrl+P
macOS: ⌘P
Windows: Ctrl+P
Paste the following command and press Enter:
ext install dsznajder.es7-react-js-snippets
I think you unfortunately uninstall it.
you have to install.
ES7+ React/Redux/React-Native snippets
in visual studio. Hope it works
My snippets worked as I thought they should once I fixed auto imports from this post by setting includePackageJsonAutoImports to always on. I used to have to type "-" before they would come up.
Visual Studio Code - Auto Imports / Quick Fix does not work
Update
I added a .eslintc file to the root of my client app and, in it, added this JS Object:
{
"extends": "react-app",
"plugins": ["prettier"]
}
That removes the linting problems from displaying in my IDE but still leaves Prettier in a bad state; that is, when I format, Prettier adjusts my code in a way that produces a ton of errors.
I think I need to next adjust the config rules that are guiding how my Prettier plugin functions. Any help with that would be appreciated. My ultimate goal is to get Prettier/ESLint to function as they do originally when shipped with Create React App. Thanks for the help so far!
End Update
I've been building a project that is using React and Material-UI on the front-end. I'm using VSCode as my IDE with ESlint and Prettier. I had originally initiated the front-end of the project with Create React App.
All had been going well until I did something - and I have no idea what - to make my ESLint become super stringent. It's now presenting problems all over, whereas the same code previously had zero linting problems, and no changes to the code have been made.
I've also been using Prettier and now, because of these linting problems, when I format with Prettier, the code adjusts to address the Linting problems. Which causes actual errors.
I've been searching all over. I installed ESlint Plugins, been digging around, looking for (and creating .eslintrc.json) files. Nothing seems to work. It is making work on this project much more difficult.
What did I do? How do I fix it?
Thank you.
Add or Update your .eslintrc.js file
set indent off
set globals false if it (definition not found)
Hope it helps
module.exports = {
rules: {
indent: 'off',
'new-cap': [0]
},
globals: {
db: false,
mongoose: false,
response: false,
offline: false
}
};
Can anyone tell me how to comment JSX code in VSC?
I looked at the articles listed at the bottom, none of them seem to give a concrete solution, and the ticket appeared to have been closed, claiming that the commenting/uncommenting function has been properly resolved on VSC. However, I am still having troubles after trying out the followings as suggested:
disable sublime-babel extension on VSC
Update my language to Javascript react
In user setting, added the followings:
"emmet.syntaxProfiles": { "javascript": "jsx" },
"files.associations": {
"*.js": "javascriptreact"
},
Any clue would be really appreciated. Exhaused all tricks. Thanks!
How to you comment jsx code out in .js files in VSCode?
https://github.com/Microsoft/vscode/issues/6461
Select the text to be commented then press Ctrl+K and Ctrl+C.
Did you try to install React or Babel plugin?
This might sound dumb but, have you tried re-installing VSCode? Commenting out JSX in a .js file works fine for me without any plugins. (I use windows)
I was having this issue and for me the problem was the extension Babel ES6/ES7.
I've uninstalled that extension.
If that doesn't help you could try changing the Language Mode to JavaScript React