How can I set the indent size of html to tab in atom-beautifier ?
I tried the following in .jscsrc but it doesn't have any effect.
{
"html": {
"indent_char": " ",
"indent_size": 1,
"indent_with_tabs": true
}
}
The atom-beautifier package is deprecated and the author has suggested that users migrate to the atom-beautify package:
Please use: https://atom.io/packages/atom-beautify It's much better :)
The atom-beautify package supports a .jsbeautifyrc to configure the indent size:
{
"indent_size": 2,
"indent_char": " ",
"other": " ",
"indent_level": 0,
"indent_with_tabs": false,
"preserve_newlines": true,
"max_preserve_newlines": 2,
"jslint_happy": true,
"indent_handlebars": true
}
{
"indent_char": " ", //Tab here. Make sure editor doesn't change it.
"indent_size": 1,
"indent_with_tabs": true
}
I've put this at $ATOMPATH/packages/atom-beautify/.jsbeautifyrc AND $ATOMPATH/packages/atom-beautify/src/.jsbeautifyrc.
atom-beautify is still buggy as heck with tabs. Also make sure that you turn off "soft tabs" in Atom.
Here's a gist of some tips for killing spaces:
https://gist.github.com/zamicol/c5c926500ddde49006122f9e4e52e48f
Related
Here in the WordPress documentation about new block theme They have said about overriding theme.json. I did something like that, but I don't know how o use it? Currently I have a theme.json file in the theme root (and it is working like a charm). I have this:
{
"version": 2,
"settings": {
"appearanceTools": true,
"color": {
"custom": false,
"defaultPalette": false,
"palette": [
...
]
}
}
}
Also, I have two separate files (dark.json and light.json inside styles directory). Both dark.json and light.json are something like this:
{
"version": 2,
"settings": {
"appearanceTools": true,
"color": {
"custom": false,
"defaultPalette": false,
"palette": [
...
]
}
}
}
But what I get is the original palette in theme.json when using the Gutenberg editor. How can I choose two customized palettes?
I've found it! You can go to Dashboard -> Appearance -> theme Customize.
Then in the top right corner of this page, You can see a black and white icon titled "styles". It does show the list of style variants.
BTW, when I was searching I found this article about new block theme style variations. Hope this helps someone else.
I have found a few versions of my same question here , here, and here but when I try the suggested solutions I am still unsuccessful
I notice I am only able to apply inline css rules in my current extension. When I try bringing those rules into a separate css file I can't get the rules linked to the elements on the page.
I have played around mostly with the manifest.json file assuming my problem is somewhere there. I have tried including only css, matches, and js lines of the content_scripts. I have played around with different permissions. I didn't originally have the web accessible resources section.
Here is my manifest.json file as it currently looks:
"manifest_version": 2,
"name": "food project",
"version": "0.1",
"description": "My cool extension.",
"content_scripts": [
{
"css": ["./content.css"],
"matches": ["https://www.target.com/*", "file:///*/*"],
"js": ["./content.js"],
"all_frames": true
}
],
"permissions": ["tabs", "*://*/*"],
"browser_action": {
"default_popup": "popup.html",
"default_title": "Demo extension",
"default_icon": "/images/logo.png",
"default_badge": "Media Rep"
},
"web_accessible_resources": ["./content.css"]
and in my content.js file:
function addButtonElement() {
const newButton = document.createElement("button");
newButton.textContent = "Click me";
newButton.className = "buttonn";
newButton.style.background = "blue"
newButton.style.position = "relative";
newButton.style.top = "12.5em";
newButton.style.left = "50em";
newButton.style.zIndex = 8000;
newButton.style.color = "white";
newButton.style.width = "10%";
newButton.style.height = "30%";
newButton.style.borderRadius = "20px";
newButton.style.padding = "0.5em";
newButton.style.boxSizing = "border-box";
const currentButton = document.getElementById("headerMain");
document.body.insertAdjacentElement("afterbegin", newButton, currentButton);
}
document.body.onload = addButtonElement;
content.css file:
.buttonn {
border: solid 4px red !important;
}
I have other functionality in with the js file that is working, and like I said, inline css works. Not really sure why I can't seem to get rules from my CSS file to apply from that file.
one page I am trying this on is
https://www.target.com/p/general-mills-cheerios-honey-nut-breakfast-cereal-19-5oz/-/A-14765766#lnk=sametab
Solved! (kind of)
I think there was maybe a caching issue on my machine...? I had been working on this late into the night yesterday and added in the !important command as one of my last steps to be sure my inline rules weren't taking precedence over the CSS.
When I came back to this project in the evening today it all worked!
The power of walking away did it again.
I am new at posting here, so not sure if best practice is to delete the question entirely, but I am tempted to leave it to remind others in the future that taking a break is sometimes the answer :)
Some of the lines added into my manifest.json file above weren't necessary to use my .css file
This is the version I have now that it is working as hoped:
{
"manifest_version": 2,
"name": "food project",
"version": "0.1",
"description": "My cool extension.",
"content_scripts": [
{
"css": ["./content.css"],
"matches": ["https://www.target.com/*"],
"js": ["./content.js"]
}
],
"permissions": ["tabs"],
"browser_action": {
"default_popup": "popup.html",
"default_title": "Demo extention",
"default_icon": "/images/logo.png",
"default_badge": "Media Rep"
}
}
I'm trying to change the indent size for CSS/SCSS to two spaces in Atom Beautify, but it has no effect and the indent remains at four spaces. Even if I set it to two spaces in my .jsbeautifyrc file, it has no effect. Am I missing something?
{
"indent_size": 2,
"indent_char": " ",
"indent_level": 0,
"indent_with_tabs": false,
"preserve_newlines": true,
"max_preserve_newlines": 10,
"jslint_happy": false,
"space_after_anon_function": false,
"brace_style": "collapse-preserve-inline",
"keep_array_indentation": false,
"keep_function_indentation": false,
"space_before_conditional": true,
"break_chained_methods": false,
"eval_code": false,
"unescape_strings": false,
"wrap_line_length": 0
}
atom-beautify uses its own configuration, which can be changed in the following two ways in Atom:
In the Settings GUI
Ctrl + , to open Settings (or File > Settings)
Select Packages
Find atom-beautify and click on Settings
Find CSS and click to expand the Settings for CSS
Enter your desired indent size where it says Indent Size:
Repeat previous 2 steps for SCSS
In config.cson
File > Config... to open config.cson
Add the following
"atom-beautify":
css:
indent_size: 2
scss:
indent_size: 2
I recently updated to brackets 1.8 and now I can't disable the auto close brackets. I've got this in my Braskets.json file
"closeTags":
{
"dontCloseTags": [],
"indentTags": [],
"whenOpening": false,
"whenClosing": false
}
Any ideas?
Just realised what the issue is. I needed this line
"closeBrackets": false,
So I have started using Brackets as my IDE, and have been trying to get SASS and everything else I need to work on it. So while I was playing around, I realized I was not able to share my partial files with other partial files. Am using the "brackets-sass" extension by jasonsanjose.
My folder structure for sass is as follows,
sass
|-> includes
_config.sass
_base.sass
_reset.sass
_utilities.sass
_helpers.sass
_main.sass
style.sass
I have a bunch of variables declared in my _config.sass file, but am not able to access them in any of the other partial files. I would like to know how this would be possible, or if this feature of the extension is yet to be implemented how would I do it.
My .brackets.json file looks something like this,
{
"sass.enabled": false,
"path": {
"sass/style.sass": {
"sass.enabled": true,
"sass.options": {
"includePaths": [
"../sass/includes"
],
"outputDir": "../css/",
"imagePath": null,
"sourceComments": "map",
"outputStyle": "nested"
}
},
"sass/includes/*.sass": {
"sass.enabled": false
}
}
}
If i try to import a partial file into another, it prompts the following error,
" file to import not found or unreadable: 'includes/config' #import 'includes/config' "
and if I try to use a variable in any other partial file from _config.sass i get the following error,
" unbound variable $var_name ".
Help would be much appreciated. Thank you.
Cheers
Paths and sass.options are in wrong place, I had similar issues.
I have it working with the following preferences in brackets.json
Works with multiple entry points and include path directories.
Rather than bourbon/neat add your includes.
{
"sass.enabled": false,
"sass.options": {
"includePaths": [
"../node_modules/node-bourbon/assets/stylesheets",
"../node_modules/node-neat/assets/stylesheets"
],
"outputDir": "../css/",
"imagePath": null,
"sourceComments": false,
"outputStyle": "nested"
},
"linting.collapsed": false,
"spaceUnits": 2,
"path": {
"scss/app.scss": {
"sass.enabled": true
},
"scss/teaser.scss": {
"sass.enabled": true
}
}
}
Hope that helps!