HTML Beautify Settings in Brackets - settings

I understand that the Brackets Beautify extension is based on JS Beautify, and that I have a suite of preference settings available because of that, but I have no idea of how to alter them through the Brackets settings.json file. Does anyone have any idea?
Here are my current settings:
{
"debug.showErrorsInStatusBar": false,
"linting.collapsed": true,
"wordWrap": false,
"me.drewh.jsbeautify.on_save": false,
"styleActiveLine": true,
"themes.theme": "explicit-brackets-style",
"fonts.fontSize": "12px"
}
I'm assuming I just need to add new "me.drewh.jsbeautify" lines, but that doesn't seem to work...
I'm specifically looking at HTML settings, BTW.

Like the original library the extension uses a .jsbeautifyrc file for the settings.
It should work if you create such a file in your project root with content like this:
{
"eol": "\n",
"end_with_newline": true,
"preserve_newlines": true,
"max_preserve_newlines": 10,
"indent_inner_html": false,
"brace_style": "collapse",
"indent_scripts": "normal",
"wrap_line_length": 0,
"wrap_attributes": "auto"
}
Additionally, I can only recommend you to have a look at my fork of that extension as it allows more detailed settings.

Related

How to auto-correct Ruby linting errors in VS Code (in 2023)

I'm using VS Code and writing Ruby code on MacOS 12.6. I have installed several extensions for linting. I can see the errors, but I cannot get any of them to provide automatic correction, even for trivial mistakes like single vs double quotes. It always says "no quick fixes available".
If I use the command palette to run "Format document" it will correct these kinds of mistakes. So somehow VS Code knows how to fix these problems. It just won't do it in a convenient way.
You can see in the screenshot which extensions I have installed / active:
Ruby by Peng Lv
VSCode Ruby by Stafford Bunk
Ruby Solargraph by Castwide
ruby-rubocop by misogi
I don't really care which extensions are used. I would be happy with any working configuration that provides this basic functionality.
Here is my entire settings.json
{
"workbench.tree.indent": 16,
"editor.formatOnSaveMode": "modifications",
"editor.formatOnSaveTimeout": 5000,
// "ruby.rubocop.onSave": true,
"ruby.useBundler": true, //run non-lint commands with bundle exec
"ruby.useLanguageServer": true, // use the internal language server (see below)
"ruby.lint": {
"rubocop": {
"useBundler": true // enable rubocop via bundler
},
"reek": {
"useBundler": true // enable reek via bundler
}
},
"ruby.format": "rubocop", // use rubocop for formatting
"eslint.format.enable": true,
"eslint.options": {
"extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
"html",
"javascript",
"vue"
],
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// "[ruby]": {
// "editor.defaultFormatter": "misogi.ruby-rubocop",
// "editor.formatOnSave": true
// },
"[json]": {},
"ruby.codeCompletion": "rcodetools",
"ruby.intellisense": "rubyLocate",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.tabSize": 2,
"[ruby]": {
"editor.defaultFormatter": "misogi.ruby-rubocop"
},
"editor.formatOnSave": true,
"ruby.rubocop.useBundler": true,
}
Note
This question sounds similar to: vscode( vscode-ruby + rubocop ) how to auto correct on save?
But that question is old and the answers reference config settings that aren’t recognized anymore.
There is a revived Rubocop for Visual Studio Code extension by Loran Kloeze available on the Visual Studio Marketplace.
This extension is a fork of the original Rubocop extension and adds a few features, such as Rubocop server support for improved performance and specifically, a feature to Implement quick fixes for Rubocop.
Even with the original extension by m1sogi, you should have been able to use the global auto correct function. The new quick fix feature is probably more useful though...

VS Code setting editor.autoClosingBrackets languageDefined - where are these language settings defined?

Related issue on Github.
VS Code's setting editor.autoClosingBrackets: languageDefined says "Use language configurations to determine when to autoclose brackets".
Where does VS Code gets this information from?
Is the "language configuration" referring to language-specific user settings? If so, what setting controls this? If it's the editor.autoClosingBrackets setting that controls this, what's the default behaviour for:
[javascript]: {
"editor.autoClosingBrackets": "languageDefined"
}
Does it force the default behaviour for this language?
Where can I see a list of all language configurations?
I found this setting when I entered Command Palette(⇧⌘P) and typed "settings", and in the listing select the option "Preferences: Open Settings (JSON)", then you can make this setting.
For more informations: VS Code settings you should customize
My configurations:
{
"typescript.updateImportsOnFileMove.enabled": "always",
"explorer.confirmDragAndDrop": false,
"cSpell.userWords": [
"rxgo"
],
"go.toolsManagement.autoUpdate": true,
"js/ts.implicitProjectConfig.experimentalDecorators": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.autoClosingBrackets": "always"
},
"angular.enable-strict-mode-prompt": false,
"[typescript, javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"security.workspace.trust.untrustedFiles": "open",
"editor.tabSize": 2,
"javascript.preferences.importModuleSpecifier": "relative",
"typescript.preferences.importModuleSpecifier": "relative",
"files.autoSave": "afterDelay"
}

WebStorm does not recognize `browser`, `element` etc in Protractor test spec

Following Protractor guide I wanted to create my first test. While the test works unfortunately JetBrains WebStorm does not recognize all of my variables in given test
I have enabled in Libraries/JavaScript:
jasmine
karma
karma-jasmine
HTML
Node.js Core
selenium-webdriver
As seen above Node.js Core library is enabled.
I have also visited this question but unfortunately the angular-protractor is no longer available.
What am I missing?
Your editor will understand it if its imported. Elese it will know where to find browser ot by
Add import statement at top of your file.
import {by, element} from 'protractor';
Use JS Hint RC. It will work like magic.
You can find this by going to
Settings -> Languages and Frameworks -> Javascript(select ECMA Script 6) ->Code Quality Tools- >JS Hint - Enable, use config file.
As for config file, save the bellow file, with following name: '.jshintrc'.
Rate the answer as positive if this worked for you!
{
"jasmine": true,
"mocha": true,
"esversion":6,
"loopfunc": true,
"node": true,
"globals": {
"esversion": 6,
"angular": false,
"browser": false,
"inject": false,
"_": false,
"driver": false,
"protractor": false,
"$": false,
"$$": false,
"element": false,
"by": false,
"list": false
}
}

Can't get alchemy.js graph visualisation to show panel, zoom or search

The alchemy.js lib is create and provides good abstraction for graph layouts. I can't seem to get the application example that has a panel, allows searching and filtering. Zooming does not work either.
Here are the config values:
var config = {
dataSource: team,
cluster: true,
nodeCaption: "firstName",
rootNodeRadius: 30,
nodeCaptionsOnByDefault: true,
directedEdges:true,
showControlDash: true,
showStats: true,
nodeStats: true,
showFilters: true,
nodeFilters: true,
captionToggle: true,
edgesToggle: true,
nodesToggle: true,
toggleRootNotes: false,
search: true,
zoomControls: true
};
Here is the code that is not working:
https://jsfiddle.net/aneesha/mpa6sbsb/6/
So... I dug around and they seem to have left toggleControlDash out of Alchemy.prototype.interactions in the last couple of versions. I went back to their 0.3.1 version, copy/pasted the function into the new alchemy.js file, and now it works.
I'm pretty sure the examples are all built on different versions. I've found some other things that don't work too, I'm just going to go in and fix them on my own. If you're still looking for help on this, let me know :)

How to ignore specific rules in Sublime Linter SCSS (Sass)?

I'm trying to learn how to silence a rule in SublimeLinter-scss-lint (specifically EmptyLineBetweenBlocks).
For SublimeLinter-csslint, I can run scss-lint --list-rules in Terminal, locate the rule I don't like in the output, and add it to the ignore array in SublimeLinter.sublime-settings (as below).
{
"user": {
// ...
"linters": {
"csslint": {
// ...
"ignore": [
// Following rules will be ignored.
"adjoining-classes",
"box-model",
"box-sizing",
"fallback-colors",
"ids",
"universal-selector"
],
// ...
},
// ...
}
}
}
For SCSS, there doesn't appear to be a similar way to find rule names in Terminal, and there's no scss-lint object in Sublime Linter settings. So…how is this done?
Thank you.
Here's a way I found to make it work.
I created a file in my Home directory (~/) named .scss-lint.yml.
In it, I copy–pasted rules I wanted to modify from the default.yml file located in/Library/Ruby/Gems/2.0.0/gems/scss_lint-0.39.0/config/, preserving indentation.
Close and re-open any SCSS files in Sublime to see the changes.
Example:
linters:
EmptyLineBetweenBlocks:
enabled: false
LeadingZero:
enabled: true
style: include_zero
MergeableSelector:
force_nesting: false

Resources