I am trying to work on a react with flux project using VS Code. The VS Code will give errors and warnings for the JSX in the .js files. I keep the .js extension instead of .jsx as I want the intellisense from VS Code.
How can I have JSX validation and highlighting in .js file in VSCode? Or, is there a way to have proper JSX validation and keep the intellisense in VSCode at the same time?
VSCode (v1.0.0) added new way to associates files. Select language mode and choose Configure.. . To add jsx syntax capabilities and goodies in your file you can edit the file.associations.
"files.associations": {
"*.js":"javascriptreact"
}
If I understand you correctly, if you have a .jsx file extension or manually select the JavaScript React language mode, you get validation and highlighting, but no IntelliSense. If you change the language mode or file extension to JavaScript, you get IntelliSense but don't get the validation and highlighting.
To manually select a language mode, open the command palette (ctrl+shift+p or cmd+shift+p) and start typing 'language'. Select 'Change Language Mode' and then select 'Javascript'.
Unfortunately for now there is no way to have both at the same time. You'll have to wait for the language services to be updated or try to create your own extension to fill the void.
Related
I'm working with ejs files, but in order to reuse some code, I'm using the includes feature. Given that some opening/closing html tags are placed in other files, after I save my changes, something (I don't know if prettier extension or VS code editor) is including the closing tags into my code, causing several problems when I running it.
An other solution is to use a .prettierignore file and put in :
*.ejs
in your settings.json you should add these settings.
just instead of "[css]" type what you want. (the format of the file)
and just please ignore line 2 :) that's not related to this answer.
Edit
as #aegatlin said use this: "[html]".(if "[ejs]" didn't work for you)
I don't use EJS myself, but after playing around with it in VSCode, I noticed that my .ejs files were being treated as HTML files. You can see how your VSCode is interpreting the file by looking in the bottom right corner of the editor. You could search for EJS extensions as well.
You likely have the "Editor: format on save" option enabled. To disable that setting, go to Preferences, and in the search bar type "format on save". Find the setting. Uncheck the box. That should fix the problem.
If, as you mentioned, your closing HTML tags are in other files, then you have invalid HTML and the formatter (both Prettier's and the default one) will autocomplete the closing tag. (I would wager EJS also wouldn't like the lack of closing tags, but since I don't use it I'm not so sure, maybe it's fine.)
Zulhilmi Zainudin has the solution
https://medium.com/#zulhhandyplast/how-to-disable-vs-code-formatonsave-for-specific-file-extensions-c60e8f254243
In vscode setting file, associate ejs extentions files to a « language ». Then you can specify different rules for this that language :
.vscode/settings.json file content :
{
"files.associations": {
"*.ejs": "ejs" // this create the language « ejs » which refers to any .ejs file
},
"[ejs]": { // custom settings for the language « ejs »
"editor.formatOnSave": false
}
}
Somebody who used Notepad++ clearly knows about applying custom syntax highlighting to any text, by selecting an option from the "Language" menu, as shown the screenshot below;
This way, one can highlight the text, as he wish. I would like to know, is there any similar mechanism in Visual Studio Code editor, so that I can manually highlight the text even if its not done automatically.
Thanks.
You can change the Language used for a particular instance by clicking on the Language ID field in the Status bar and select the new language from the list.
This executes the command workbench.action.editor.changeLanguageMode or Change Language Mode from the Command palette.
To do a permanent Language ID selection based on the file extension define a setting
"files.associations": {
"*.myext": "html",
"*.myfoo": "css"
}
I want to autocomplete my code while typing in React JSX code for fister typing But that's not happening. Should I need any additional extensions for that, if yes? any preference for an extension.
If not then what should I suppose to do?
Is there a way in Visual Studio Code to change the default language that is used for new files?
By default if you open a new file, it's set for "Plain Text", I want this to be "HTML" instead.
I am often copy pasting HTML into VSC, editing a bit, then copying it back to a CMS I am using (the CMS editor is horrible). I don't want to save the code on my computer at all, just edit it a bit with HTML syntax highlighting, but I want that to be the default.
You can now set the default language at either the user or workspace settings level using files.defaultLanguage:
"files.defaultLanguage": "html"
This can be done as a one off by changing the language mode:
F1 to launch command palette
Type lang, enter
Type html, enter
Now you can do this change. Check out
"files.defaultLanguage" in settings.
With v1.42 you can either set
"files.defaultLanguage": "${activeEditorLanguage}"
and when you open a new untitled file with an html file as the last active file, the new file will automatically be assigned a languageMode of HTML.
Alternatively, pasting any html code into a new untitled file from a vscode editor will automatically be detected and the languageMode set to HTML. Unless you have specifically set
"files.defaultLanguage": "plaintext"
then the languageMode will not be automatically detected as of v1.43.
Also see https://stackoverflow.com/a/68596936/836330 for a preview language detection feature in vscode 1.59.
A slightly quicker way to accomplish what Daniel had answered:
Press Ctrl+K, then M
Type html, then press Enter
I had a similar issue with VS Code. I wanted to default to Python when opening new files.
Solution: Click on File > Preferences > Settings. In the search area, Type: "files.defaultLanguage". Then fill in the language of your choice.
Perhaps you could create a scratch file with the .html extension? Open that when you need to do some copy/paste editing.
If I have some eRuby in a scss file, I need to make the extension *.scss.erb. However, doing so causes the sytax highlighting for *.erb rather than *.scss. Is there any way to get eclipse to determine the syntax highlighting more intelligently or at least allow manual syntax assignment like in notepad++?
The only workaround I've found so far is to rename the file *.scss, open it, then rename it back to *.erb so it gets processed correctly later on.
There should be.
What you would do is go to Preferences > General > Editors > File Associations and set the default editor for your *.scss.erb extensions, however there's a bug in Eclipse that prevents file associations with more than one period:
https://bugs.eclipse.org/bugs/show_bug.cgi?id=168573
The way I get around the issue is by right clicking the source file in Project Explorer and going to Open With > Other... and selecting Sass Source Editor from there.