As I am extremely new to programming I might just be overlooking some obvious issue so please bare with me.
I wanted to use custom snippets to extend the already existing ones to speed up my future workflow.
I created a snippets.json file, which contains this code
{
"html": {
"snippets": {
"page": "header>h1^main+footer{${0:©}}",
"a:link": "a[href='http://${0}']"
}
},
"css": {
"snippets": {}
}
}
when typing page, then pressing tab (or ctrl+e) in my HTML file, it doesn't output the Markdown, instead it just prints header>h1^main+footer{}
I put the a:link in there because it's a snippet that already exists within Emmet to test if the issue was with my custom snippets file.
And yes, the issue persists, instead of giving me the Markdown it only says a[href='http://']
Inside the Atom settings are 2 checkboxes:
Format Line Breaks
Use Emmet Comments
I have checked and unchecked both individually and together, nothing has resolved the Problem.
Settings inside of Atom
Related
I've been having a problem when trying to comment out a line in a css.liquid file with the VScode shortcut (CTRL+/).
Whenever I do this it puts {%\s*# in front of the line and doesn't comment out the code. I tried disabling all extensions but it's not helping. I haven't touched any settings. When I switch to CSS or Liquid it will comment out fine, but Liquid CSS doesn't work.
Does anybody recognize this issue?
===== This ended up being a problem with the extension itself, it has since been fixed!
I see this issue has been reported lately: Incorrect comment blocks in Liquid files with this extension enabled.
I see this in the liquid css language configuration file:
"comments": {
"lineComment": "{%\\s*#",
"blockComment": [ "/*", "*/" ]
I don't know what the lineComment value is supposed to be but I have never seen a regex value there in other language configuration files - so it may be a mistake.
I built an extension which may be able to help until the language configuration file is fixed: Custom Language Properties.
Install it.
Run the command Custom Language Properies: Check for new language extensions.
Make this setting in your settings.json:
"custom-language-properties": {
"liquid-css.comments.lineComment": "",
}
If this doesn't work immediately, try a reload of vscode.
This basically sets the lineComment's to null and so the blockComment will be used instead. I am not familiar with Liquid comment styles so let me know if that is not how line comments are supposed to work. Demo:
I just jump to laravel 9 recently (from few months ago), kinda wondering about,
Is it possible to generate all css classes (including custom classes), BUT, only when APP_ENV on .env is not production?
I tried to overcome No.1 (see below explanation), by using const APP_ENV = import.meta.env.VITE_APP_ENV; on tailwind.config.js - so I can do if - else thing, to load things, but it produce an error - offset is longer than source length! offset 81 > length 59. Is it possible to get .env variables on tailwind.config.js?
As I tried to find another way for No.2. I'm narrowing my objective on No.1 and No.2, so, I tried to load all possibilities of my "custom classes" only on dev. By using safelist - to generate all my-own custom class, but it seems not working well, since, the custom class that I want to add doesn't added. I'm using this - pattern: /./ - since I saw this article says so (please, correct me if I'm wrong), but, it's indeed "hitting" all other classes, not just my custom classes. I want to add all of my "custom css class" without adding the variants one-by-one. Maybe something like variants: *? (I already check around on tailwind docs, but couldn't found something like that)
I tried a proper way, to just load all my custom classes like pattern: /ctm/, but as stated on tailwind documentation
Patterns can only match against base utility names like /bg-red-.+/, and won’t match if the pattern includes a variant modifier like /hover:bg-red-.+/.
How can I do so, without me typing & guessing all of the possibility of variants?
Explanation how I try to overcome For question No.1 -
I tried using these code on app.js
const APP_ENV = import.meta.env.VITE_APP_ENV;
if (APP_ENV == 'production') {
//need to use ()
import ('../css/app.css');
}
and with below code on app.blade.php
#if (config('app.env') != 'production')
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
#endif
But, when it comes to a custom classes on tailwind.config.js - for example
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
colors: {
'ctm-dark-purple': '#2a234f', //<--- custom class here
'ctm-light-dark-purple': '#2a234f', //<--- custom class here
},
},
},
It doesn't generate that custom classes, since I "block" the generated class and swap it into cdn mode on dev.
So, in-summary, how can I "generate all css classes" only on "development" mode? Along with my "custom css class"? If that's not possible, then, is it possible to overcome No.3? I want to add all of my "custom css class" without adding the variants one-by-one. Maybe something like variants: *?
My main reason is simply, I want to apply classes directly on web-browser console and see the changes more faster, rather than back-and-forth modifying-then-save the code on text-editor.
Thanks a lot!
Log -
Updating Problem No.3 - since forgot to mention precisely what I want
My question is similar to this one but the answer given there is for Vim and I need one for VS Code. I'm a real newbie, and I tried to solve this myself, but these attempts failed me:
Markdown Preview GitHub Styling - Says it allows user-defined custom css, but it styles html preview, not the text in the editor
Markdown Theme Kit - Points to custom .css files, but the included ones don't tell me how to do it differently for different heading levels
Markdown Header Coloring - Claims to do exactly this, but when I try to put in user-defined css to give each heading level a different color, I still get color changes between headings of the same level, even after closing/restarting VS Code.
Help is very appreciated.
There is a built-in way to style text, including Markdown headings, in the editor without an extension, using VSCode's Colour Theme settings:
Open your settings.json (~/.config/Code/User/settings.json) or Ctrl+p "settings", and between the top-level {} insert for example:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "heading.1.markdown entity.name.section.markdown, heading.1.markdown punctuation.definition.heading.markdown",
"settings": {
"foreground": "#9cecfb",
"fontStyle": "bold",
}
},
{
"scope": "heading.2.markdown entity.name.section.markdown, heading.2.markdown punctuation.definition.heading.markdown",
"settings": {
"foreground": "#83a4d4",
}
}
]
}
I faced the same issue and find a way with the VSCode extension "Markdown header coloring"
Basically you have to
install the extension
set some custom settings in settings.json. You can find examples of custom settings in the section "User defined header coloring"
do not forget to reload the window after each modification: open Command Palette → type Reload window
Cheers
Generally new to web design and watching some tutorials on creating some backend for a project, getting really tired of writing out the manually, I see youtubers do .classname and then the class with the div appears, but for some reason it isn't working for me? Any help would be appreciated.
Also, would it be easier to switch to Sublime, my buddies think that it is the way to go.
Cheers.
Go to settings
Go to emmet under the Extensions section.
Click on 'Edit in settings.json'.
Write the following inside the 'emmet.includeLanguages' tag. Otherwise, paste the whole statement.
"emmet.includeLanguages": { "javascript":"javascriptreact" }
Save the settings.json file.
Those videos are likely using emmet. VS Code includes built-in support for emmet completions in html files. For example, typing .classname in an html file will trigger an emmet suggestion that expands to <div class="classname"></div> when you accept it
If you do not see this working:
Make sure the document is in the html language mode
Try manually triggering suggestions after .classname using ctrl+space
Make sure you have not disabled Emmet
I tried everything written in the answers but it wouldnt work, I had to do the following;
go to settings in the bottom left, search for 'emmet'
scroll down to and tick:
'Trigger expansions on Tab'
then it works by typing .divClassName + Tab
Check out this Cheat Sheet for VSC:
Cheat sheet for VSC
Ensure that VScode recognises your file as HTML5 or CSS file. In my case I had emmet enabled, but while I could get emmet abbreviation in a CSS file, they wouldn't work in an HTML file. The issue was that I also had Django template extension installed and the file had Django template code as well, hence VScode considered the file as Django template file, not HTML. You can check this the status bar at the bottom of VScode. Once I changed the file from Django template to HTML by clicking on Django Template in the VScode status bar, emmet started working.
The above answers didn't help me because VS code already came with Emmet installed, but I was missing the information on how to actually trigger it.
For an html element
Type the element e.g. div, h1, whatever, then press tab to complete it
For a class
Type the class name beginning with a dot then press tab to complete it.
For example type .myclass and hit tab and you'll get <div class="myclass"></div>
Note: if your class has spaces, use a dot in place of the space (e.g. for "my great class", you should type ".my.great.class" and hit tab)
Source
This information is from here
Tried mentioned thing from emmet vs code document
go-to .vscode >> settings.json
add line "emmet.triggerExpansionOnTab": true
it worked for me for reference : Emmet in visual studio code
I am using Visual Studio Code (on a Mac) to write AngularJS style HTML. When I insert an inline expression for a CSS value, I get the annoying red Intellisense error, as shown in the screenshot below. Also, please note that I have disabled all extensions to ensure that none were the cause of my issue.
The main question is this: how do I disable the CSS errors in VSCode for Mac?
Thanks for any suggestions!
open your settings.json file by cmd+shift+p OR crl+shift+p and typing setting.json
in that file add this line
"html.validate.styles": false
VSCode is still very new to me, but after some tinkering I found an option that disables all CSS validation rules. I set the value to false and the errors are now longer showing up. The setting in your settings.json file should appear as as follows:
{
"folders": [
{
"path": "/Users/Paulie/Desktop/AngularPractice"
}
],
"settings": {
"css.validate": false
}
}