I am new to Atom and used brackets so far. How can I achieve, that in plain html atom helps me to autocomplete urls. I have installed v1.27.2.
<a href="ind ... do smth ... ">
should be completed to
<a href="index.html">
Tried strg + Enter result: nothing happend
Tried enter result: nothing except the expected line break happend
Tried to modify config.cson file for atom- as described on git.hub on a similar issue
"autocomplete-paths":
scopes: [
{
scopes: [
"text.html.basic"
]
prefixes: [
"src=['\"]"
"href=['\"]"
]
extensions: [
"js"
"png"
"gif"
"jpeg"
"jpg"
"tiff"
"html"
]
relative: true
}
]
No success at all. Thank you very much in advance and kind regards
Ok, finally it was really simple. (Only for the case that someone else will have same problems... ). Following worked for me.
settings / packages / autocomplete-paths / plugin settings.
activate -> enable for HTML support (It's disabled by default... .)
Max File Count -> 8000 (Default is 2000)
Related
Default Emmet autocomplete in VSCode for scss are not helpful:
e.g.
"pos:a" gives "pos:abs($number: 0)" when I want "position: absolute;"
"fs:i" gives "fs:index($list: , $value: )" when I want "font-style: italic;"
etc...
How to fix?
This is fixed in the Insiders Build and will be in v1.55 Stable. See https://github.com/microsoft/vscode/issues/112675
Your test case work fine today in the Insiders:
"fs:i" => "font-style: italic;"
"pos:a" => "position: absolute;"
See image by clicking and follow step by step:
F1 and write "snippet"
Search scss and click or enter
Copy or writing next code. Save and Testing
"example posabs": {
"prefix": "posa",
"body": [
"position: absolute;",
],
"description": "example for you"
}
Are you using scss or sass files? I believe emmet should work out of the box for scss, and perhaps you should install this extension for emmet to work with sass files.
You can check this issue too.
You can also try this in settings.json:
"emmet.includeLanguages": {
"SCSS": "CSS"
}
This is my problem - its unreadable
In order to get .ejs working in general, I've so far added the following. I also have format on save and prettier. I'm looking for proposals to get better formatting of this so that I can read it.
"files.associations": {
"*.ejs": "html",
"*.css": "postcss"
},
"emmet.includeLanguages": {
"postcss": "css",
"ejs": "html"
},
"emmet.syntaxProfiles": {
"postcss": "css",
"ejs": "html"
}
I know that's an old question, but working with .ejs in VSCode is still a problem. But I found the solution (for ? delimeter)
Install EJS language support plugin
Now you have ejs support, highlighting, and snippets, but some tags like
<? for( let item of array ) { ?>
(some data)
<? } ?>
are formatted incorrectly (at least with default html formatter).
To fix this, you can try set custom delimeter to '?' ejs.delimeter = '?'. Now you have correct indentation with <? ... ?> tags.
To use the snippets with our custom delimeter, you need to edit extension snippets (or add your own): install Snippets Ranger plugin, then find needed extension and edit its file. The Snippets Ranger is very handy tool.
I hope I helped somebody to setup VSCode for .ejs files
I would suggest using
EJS language support
which is according to them
Syntax highlighting for EJS, Javascript, and HTML tags. Includes
javascript autocompletion.
and if you are interested in a Linter you should check out
EJS-Lint
which according to them
EJS-Lint parses scriptlet tags (<%, %>, <%_, _%>, and -%>). It ignores
all other tags (i.e. <%=).
Note: This linter does not attempt to check for unclosed EJS tags, so
if you get an error Unexpected token with a line number that doesn't
contain any scriptlets, you most likely forgot to close a tag earlier.
It also is set up to handle old-style includes (<% include filename
%>) by ignoring them. It does not lint included files regardless of
the method of inclusion.
It can work with custom delimiters, just pass it in the options (if
using the API) or pass the --delimiter (-d) flag on the CLI.
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
So I would like Visual Studio Code (with the aid of Emmet) to be able to transform something like
.wrapper
into this
<div class="wrapper"></div><!-- /.wrapper -->
I believe there are solutions for how to do this in Sublime Text and Webstorm, so it would be great to know if there is one for Visual Studio Code as well.
Thanks!
You know you can just add |c to the end of your .wrapper to get a comment added at the end like:
<div class="wrapper"></div>
<!-- /.wrapper -->
Infortunately, that puts the trailing comment on a newline. If that is unacceptable, see remove line break before comment and see emmet comment filter for modifying the filer for comments in vscode.
And put this into your settings.json:
"emmet.preferences": {
"filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
}
I just removed the newline \n from the example comment filter.
Alternatively, it can be done pretty easily with a snippet (in your html.json snippets file):
"emmet with comment": {
"prefix": ".",
"body": [
"<div class='$1'>$2</div><!-- /.$1 -->"
],
"description": "expand with comment"
}
Then type the . and hit tab and type your classname, it will go into both $1's. Tab again to get to the $2 cursor location. [You may have to hit escape if you get suggestions after you type your classname.]
To use the tab completion, change this in your settings:
// When enabled, Emmet abbreviations are expanded when pressing TAB.
"emmet.triggerExpansionOnTab": false,
to true.
To get Emmet to add comments and keep them on the same line as the closing tag, add the following to your user settings file in Visual Studio Code, and then restart VSC.
"emmet.preferences":{
"filter.commentAfter": "<!-- /[#ID][.CLASS] -->",
},
"emmet.syntaxProfiles": {
// Enable XHTML dialect for HTML syntax
// “html”: “xhtml”
"html" : {
"filters" :"html, c"
}
},
I am using visual studio code for writing html but it doesn't have the feature of identifying closing tag for the current selected one.
How can I achieve the same?
Here is how it looks on VS Code:
Can you suggest any extension or how can I achieve this?
VS Code 1.7.1
install this extension
highlight-matching-tag
and change the settings.json to
"highlight-matching-tag.leftStyle": {
"borderWidth": "0 0 0 3px",
"borderStyle": "dotted",
"borderColor": "red",
"borderRadius": "5px"
},
I think you chose PHP or something else for "language mode", change it on HTML
I'm not sure if you have any extensions installed that break the highlighting? If I use your example, it highlights the closing tag fine by default:
Additionally, there is a builtin Emmet command that jumps between the beginning/closing tag. In the command palette, you can search for 'Emmet: Go to Matching Pair".
If you bind it to a shortcut, you can press that for example twice to see the cursor jumping between your tag. The name of the command to bind is editor.emmet.action.matchingPair
I was having the same issue and HTML snippet extension solve it. Just install it Html snippet
and just do some changes in setting, goto file->preferences->setting,
you can now see User settings in the right hand side, add the following code
,"files.associations": {
// extension name : html
"*.php": "html",
"*.html": "html"
}
and you are ready to go. Enjoy :)
The best visual way that i found to do this is with a plugin highlight-matching-tag
"highlight-matching-tag.styles": {
"opening": {
"full": {
"highlight": "rgba(165, 153, 233, 0.3)"
}
}
}
VSCode now supports matching tag highlighting by default:
Install "Bracket Pair Colorizer" extension.
File -> Preference -> Settings -> User Settings(Text Editor). You can edit in json view.
first confirm your visual studio have this extension it install default but for safe side you can check and solve highlight problem with matched div with this steps:
Go to the visual studio and type Ctrl+P
Make sure
Open preferences > setting
Paste this:
"editor.occurrencesHighlight": false,
"highlight-matching-tag.styles": {
"opening": {
"name": {
"underline": "red"
}
}
}
first line for disabled highlights.
you can choose color : red or anything else
may be it's help to you
#thank you
I was having this issue too. If you click and drag it selects all words with that text highlighted, but if you just single click it seems to select the closing tag. So yeah just single click a tag to get the pair, don't double click or click and drag.
I was having this same issue with Some Tags matching and highlighting while others don't.
The Weird thing was if I created a new file, and put a bunch of tags in they all highlighted correctly.
Turns out that that the person that created the original page used </br> for line breaks. This broke the highlighting of open and closing tags where a </br> happened between them. I changed the </br> to <br /> and everything is happy now.
It also happened with <link></link>, that I fixed by removing the closing tag.
I would suggest that if you are having this issue to look for closing tags that are not needed/ required.