Does anyone know if there's a way to auto format ColdFusion documents on VSCode the way it does for HTML files?
Auto format HTML, JS & CSS within CFM/CFML files?
If you want, you can install the Beautify and then add cfc, cfm, & cfml as languages in the settings.json file. After that, you can use "Beautify Selection" or "Beautify File" to modify code. If the plugin can't decide what type of code you are formatting, it will prompt you for "HTML, JS or CSS". (I've assigned a shortcut so I don't have to press CTRL+SHIFT+P to search for the the beautify option.)
SETTINGS.JSON
"beautify.config" : {
"beautify.language": {
"js": ["js","json","cfc"],
"css": ["css", "scss"],
"html": ["htm", "html", "cfml", "cfm"]
},
"html": {
"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "cfm", "cfml"]
}
}
In VS Code, click on Extensions on the left side. Or View >> Extensions (or CTRL-SHIFT-X on Windows). Enter "CFML" in the Search box, and choose KamasamaK's extension (kamasamak.vscode-cfml). It is an excellent extension. There are also others, if you're interested.
Or https://marketplace.visualstudio.com/items?itemName=KamasamaK.vscode-cfml
Related
I have gotten user snippets in VSCode to work for C and C++, but for some reason VSCode is not providing snippet suggestions for .md and .tex files.
Here is a minimal example of tex.json (that doesn't work):
{
"dummy": {
"prefix": "dummy",
"body": [
"some random text for demonstration"
],
"description": "A dummy snippet"
}
}
VSCode provides suggestions in .md and .tex files, just not user snippets. How do I fix this issue or employ some other way to use user snippets for Markdown and Latex?
Update: Snippets are now working in .md files, thanks to the comment by #Mark. I need to type the prefix and press Ctrl + Space. This solution does not, however, work for Latex.
For markdown files try this language-specific setting in your settings.json file:
"[markdown]": {
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
}
}
and you shouldn't need to trigger the snippet suggestion with Ctrl+Space anymore.
[For latex files I don't need that setting - if snippets aren't working in your latex files try the same setting but with latex.]
Sometimes "Ctrl+ Space" is a shortcut for switching input methods on Windows, please turn it off, it works for me
Is there a way to make Visual Studio Code Word-Wrap only specific files (.py, .cpp, etc) and not utilities formats such as .txt, .json, etc?
I just started working on a project and I need to process a lot of txt files and it's annoying not seeing how the content of the file is structured because of the Wordwrap setting.
Yes, this can be done by customizing your settings.json. The quickest way is to use the command palette (CTRL or CMD)+P and begin typing configure language
followed by the file type you are specifically looking to alter
you can then customize the settings as needed. The code below can be added to your settings.json file to make JSON and .txt files always use word wrapping by default
{
...
"[plaintext]": {
"editor.wordWrap": "on"
},
"[json]": {
"editor.wordWrap": "on"
}
}
more information can be found in the official docs
I guess there's some built in snippets because I used to be able to do stuff like type: h2 + tab and get <h2>|</h2>. However my language snippets weren't working, so I switched the file language type to HTML (EEx), for .html.eex files. Now my language snippets work (from a package), but now I don't get any HTML snippets. Is there a way to tell VSCode to treat .html.eex files as if they were HTML files? I sort of want to merge the HTML and HTML (EEx) language file types into one. What's the best way to fix this?
Add this to your settings.json
"files.associations": {
"*.html": "html",
"*.html.eex": "html"
}
I got it working with:
"emmet.includeLanguages": {
"HTML (EEx)": "html"
},
I use CSS like this:
const styles = {
foo: {
color: 'red'
}
}
<div className={styles.foo} />
and I want emmet to expand .foo to <div className={styles.foo}></div>
I don't see any reference to class or className in emmet's config file.
Also looked into preferences.json and didn't find a solution.
It seems very simple to do.
What am I missing here?
My code editor is vscode.
Press Ctrl + , or Cmd + , or File > Preferences > Settings. This will open Settings window.
Go to Workspace tab > Extensions > Emmet.
For the current vs code new version, you'll see a menu called Included Languages. similar to this:
After enter javascript in the item box and after type javascriptreact in the value field and finally press Add item. Your final output must look like the image below:
Emment configuration or enabling is editor specific. In VSCode, You need to enable it for current work space. Follow theses steps. (If you are busy, follow bold letters.)
Press Ctrl + , or Cmd + , or File > Preferences > Settings. This will open Settings window.
Go to Workspace tab > Extensions > Emmet. You'll see Edit in settings.json under Preferences.
You'll see following content by default (my version is 1.35.0) for the new version please see Kevin's comment
{
"folders": [],
"settings": {}
}
Change the content to below
{
"folders": [],
"settings": {
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}
}
See more about emmet configuration
Save the file Ctrl + S.
Go to your .jsx file, type .myClass. Press tab. It should expand to following.
<div className="myClass"></div>
Currently, obtaining {myClass} instead of "myClass" is a pending feature request. But you can go to to <VSCodeInstallationDir>/resources/app/extensions/emmet and apply the patch. (using npm i)
I had this same question. I found this post, and I've concluded emmet doesn't support setting class as anything other than a string. User Freestyle09 suggested user snippets, I've gone ahead and made one for myself, it's not a full solution, but it's the workaround I've settled with.
I'm just using emmet to create the html, and then putting my cursor in to the element, and typing " cn", and I have a user snippet defined for javascript and jsx as follows:
"jsx class name": {
"prefix": ["cn", "className", "classname"],
"body": ["className={${1:styles}.${2:class}}"]
}
there's probably a more elegant way to do it, feel free to build from there. I started with the user snippets page
Code formatting doesn't seem work in Visual Studio Code. I have tried with shift+alt+f, but it wouldn't format html code. I run ctrl+shift+p and type Format and only option I have is Format Document(shift+alt+f) and Format Selection (don't have Format code). I don't understand what I' doing wrong? Do I need to install some kind of extension in order for this formatting to work on html files?
This worked for me:
Right click inside html file that is being edited.
Select "Format Document With...".
Selected "Configure Default Formatter ...".
Changed from "Prettier - Code formatter" to "HTML Language Features".
This worked for me in Visual Studio 2015 (VS2015):
Right-click on the code window with the HTML you want to format
Click 'Un-minify" in the popup menu.
That worked for me when Format Document (Ctrl-K, Ctrl-D) and Format Selection (Ctrk-K, Ctrl-F) failed to format HTML that I pasted into a Visual Studio HTML document.
There are two scenarios here
You are editing an html file with a non-standard html extension. Find fix #1 below.
You are editing a non-html file with html embedded. For this scenario find fix #2.
Both fixes involve installing the Beautify extension so do that first.
Fix 1
To fix this issue, you will need to update your js-beautify extension properties to include those types. From the Beautify documentation:
You can contol which file types, extensions, or specific file names should
be beautified with the beautify.language setting.
{
"beautify.language": {
"js": {
"type": ["javascript", "json"],
"filename": [".jshintrc", ".jsbeautifyrc"]
// "ext": ["js", "json"]
// ^^ to set extensions to be beautified using the javascript beautifier
},
"css": ["css", "scss"],
"html": ["htm", "html"]
// ^^ providing just an array sets the VS Code file type
}
}
Fix 2
In this case when you run the beautify command (after installing the extension) it will prompt you for the language type. Select html and voila.
You might have some error in your html document like maybe you forgot to close a tag. I had the same problem but after fixing that error code formatting works well. If you have a large file then try pasting your code here and validating it here