Really, I can't find the problem because for the same div some classes are working and some are not.
I tried to find some clues but most users didn't have paths in the tailwind config file.
My code:
fixed is working fine, but bottom-2 and right-4 aren't. Actually, I don't know if w-[405px] is working.
Add mode: 'jit', to your tailwind.config.js in order w-[405px] works. I think other classes is working you just didn't noticed it or maybe conflict on other styles in your div.
You could try vimesh style. It watches all html element class attribute changes and generate tailwind compatible css at runtime. Just add
<script src="https://unpkg.com/#vimesh/style"></script>
at the head of your page.
We use tailwind at work, not something I'm super in love with but if we're adding tailwind classes that haven't been used in the document yet we have to do it locally for the compiler to add the new classes to your document.
Unsure if this is the only way to do it as its fairly new to us, but if you bring your project to a local environment and use the command
npm run watch
it will signal to tailwind to watch your class names and add the new ones to the compiled list. so if your making custom ones using [] its likely that tailwind hasn't addded those instances to the minified version of their css
For real I dont find how to resolve it. But in my case I just added the same classes to component and after it tailwind started to see it. If someone knows why exact its happening Im still waiting for any ideas
So I started learning React from this (https://youtu.be/Dorf8i6lCuk?t=1946) tutorial and got stuck trying to save a file. The video recommends getting prettier and I did and then when I save the file it auto-formats code into something that doesn't work.
eg:
as per the suggestion a jsx file:
as per suggestion 2: already in Javascript React:
As per the suggestion in the solutions:
Try going to settings > Extensions > uncheck - Enable/disable checkbox. Or Remove all together.
Change code to: (Notice the differences in my code to yours, your div tags are open and return does not have the divs wrapped in ().
function App() {
return (
<div>
Hello!
</div> //this was giving you the error before
)
}
export default App
I'd also double check your version of react that you are running.
If the version is different from the Tutorials, this could cause issues.
This might help:
Prettier's format on save messes up .jsx files
Following #AlexB801 's advice I have fixed the thing. It turns out you must NOT change the extension to .jsx but only change the formatter. Attaching an image. Also another thing to be noted here is that this was not an issue with Prettier. like so:
I've the following snippet in my index.js
class App extends Component {
render() {
return ( <div style = { styles.app } >
Welcome to React!
</div>
)
}
}
The code works, but every time I save (ctrl+s) visual studio format the jsx like that:
class App extends Component {
render() {
return ( < div style = { styles.app } >
Welcome to React!
<
/div>
)
}
}
How can I solve this? thanks
In the end what did the trick was changing the file format from JavaScript to JavaScript React on the bottom toolbar.
I'm publishing it here for future reference since I didn't find any documentation on this topic.
In addition to the above. If you click 'Configure File Association for .js' you can set all .js files to Javascript React
change vscode preferences settings > user settings below:
"files.associations": {
"*.js":"javascriptreact"
}
You can prevent VSC from incorrectly formatting your JSX by adding an association in your settings.json
Code > Preferences > Settings
In the settings window search for associations, click edit in settings.json and then add:
"files.associations": {
"*.js": "javascriptreact"
}
Alternatively, saving the file with a .jsx extension resolves this in vscode.
I had the same challenge and I am hoping to discover a better way of handling this issue in vscode.
I noticed your suggested work-around has to be done each time you open the react file with an extension of .js
Open the Visual Studio Code Settings. Refer the image below to see how to navigate to the settings.
Once the settings tab is open. If you want to make the settings changes for all the projects then select the User sub tab, if only for current project then select the Workspace sub tab.
type "file associations" in the search text box and press Enter.
Click on add item.
set Item : *.js
set Value : javascriptreact
Above changes will start associating all *js files in the project as javascript React files.
Next open any .js file in your project and right click and select Format Document. If you have multiple formatters then associate your favorite formatter. I have used Prettier to handle my formatting.
Install Prettier (if not installed by default) and try to add this to your user or workplace settings:
"prettier.jsxBracketSameLine": true
Do not put linebreak between return and the returned JSX expression.
Trigger autoformat (Alt+Shift+F) and check if works.
I struggled with this but finally found a solution. This is my settings.json
{
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"workbench.startupEditor": "welcomePage",
"window.zoomLevel": 1,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html"
},
"editor.formatOnSave": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.wordWrap": "on",
"editor.tabSize": 2,
"editor.minimap.enabled": false,
"workbench.iconTheme": "vscode-icons",
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"beautify.ignore": [
"**/*.js",
"**/*.jsx"
],
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true
}
I added
"beautify.ignore": ["**/*.js","**/*.jsx"]
Make sure you dont have multiple javascript formatters enabled in your current workspace. (You have to disable the rest of them for your current workspace).
react-beautify mostly does the magic but fails if you have some other JS formatter/beautifier already installed.
In my case, I had react-beautify and JS-CSS-HTML Formatter extension installed. I had to disable the JS-CSS-HTML Formatter for my current workspace.
Here is what worked for me-
I clicked on the Language mode (Javascript React) at the bottom of the screen
Then chose the Configure React Javascript Language based setting option
Then changed the javascript react default formatter to prettier as shown in the pic.
That pretty much did it for me after I saved the React file.
I just added all the combinations mentioned above.
added this
"files.associations": {
"*.js": "javascriptreact"
}
added this also
"beautify.ignore": ["**/*.js","**/*.jsx"]
Deleted additional js formatting
installed prettier
turn ON prettier and formatting
You can install an extension like react-beautify that helps you format your jsx code.
It is found here
This extension wraps prettydiff/esformatter to format your javascript, JSX, typescript, TSX file.
I had to disable the JS-CSS-HTML Formatter extension in VSC. only solution to this problem
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
include :
JavaScript
TypeScript
Flow
JSX
JSON
CSS
SCSS
Less
HTML
Vue
Angular
GraphQL
Markdown
YAML
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
I had similar problem, then I found out it was caused by 'beautify' extension. After I uninstalled the extension, everything is working fine.
After reading many great suggestions and workarounds, I discovered that I could simply place my mouse arrow down over the bright blue horizontal bar at the bottom of VSCode editor window - right click - which opens a popup list window - and deselected = "Editor Indentation".
You can double click JavaScript in the Status Bar at the bottom of VSCode, and then change the format from JavaScript to React (Choose React in the Select language mode to associate with '.jsx')
add this in your .js code,
/* prettier-ignore */
I'm using Ace Editor, and I'm trying to figure out how to get it to live syntax check the HTML markup in the editor.
If I set it to javascript using:
editor.getSession().setMode("ace/mode/javascript");
The live syntax checking (all the little Xs and Is on the left side) works completely fine.
However, If I change it back to HTML using
editor.getSession().setMode("ace/mode/html");
I only get the default editor with code completion for HTML, but no live syntax check.
I know this can be done because on HTML version of the Kitchen Sink (http://ace.c9.io/build/kitchen-sink.html), it shows the code syntax checking if I don't use proper markup.
How do I do this?
Update to latest version and make sure worker-html.js file is present.
There is a specific file "worker-(languageName)" in the folder provided by the Ace Library. You just have to add that file in the folder where you have the "ace.js" file stored for your project. The Live Syntax Checking will start working in your project.
I am doing some light jQuery based Javascript programming with Sublime Text 2. Is there such a thing as code completion for jQuery? I've installed SublimeCodeIntel, but getting nothing.
For instance, consider the following:
<div id="container">hello</div>
<script type="text/javascript">
function doStuff() {
$('#container').html('change it');
}
</script>
When I type $('#container'). I would expect a popup with things like html, val, etc... to popup. Has anyone gotten jQuery intellisense to work at all?
P.S. To be sure, I am not trying to get snippets working, but rather code completion.
Try package installer in sublime
search for jquery and install.
SublimeCodeIntel should work just fine with jQuery, you just need to tell it where to find it. Check out the docs on configuring search paths - basically, you create a ~/.codeintel/config file, and put something like
{
"JavaScript": {
"javascriptExtraPaths": ["/path/to/jquery.not-minified.js"]
}
}
in it. Remember to not use the minified version of jQuery, as some of the variable names can be changed (I think, don't hold me to it for v2). You also don't have the inline documentation. This file can also be created as /path/to/project_root/.codeintel/config if you're using different versions, different plugins, etc. Remember that SublimeCodeIntel can take a little while to index everything, so be patient the first time it runs. I've found it helpful to restart Sublime after indexing is done, just so everything is freshly loaded.
This jQuery package for Sublime text might help
https://github.com/mrmartineau/Jquery
If you have installed a jQuery syntax-file (there is one available from the link provided by Srikanth AD) then my AndyJS2 add-in is available via PackageControl.
AndyJS2 provides completions for both JavaScript and jQuery - use the syntax options by clicking the bottom-right of the ST window to switch between JavaScript and jQuery.
I doubt that it would work well, though, in parallel with SublimeCodeIntel. You can disable this Package, without having to uninstall it, from the Preferences menu, Package Control