I'm looking to find a way to change which lines of my code are underlined when a methed or class rule is violated. i.e. I just want the line class WhateverClass < ApplicationRecord
to be underlined with the error rather than every line in the class being underlined.
I'm working on an older rails app and, unsurprisingly, just about every class and method has too many lines or too great a complexity. In my VIM setup this isn't an issue (visually) because just the class or def line will be underlined. In VS Code every line is underlined which makes the file hard to read and other violations impossible to find.
Is there a way to change this, or should I just grab another extension?
I'm using the Ruby extension by Peng Lv, here is my my settings.json:
{
"telemetry.enableTelemetry": false,
"editor.tabSize": 2,
"diffEditor.renderSideBySide": false,
"files.trimTrailingWhitespace": true,
"editor.renderWhitespace": "trailing",
"editor.fontFamily": "'Cascadia Code PL', Consolas, 'Courier New', monospace",
"editor.inlineHints.fontFamily": "'Cascadia Code PL', Consolas, 'Courier New', monospace",
"ruby.useBundler": true,
"ruby.useLanguageServer": true,
"ruby.lint": {
"rubocop": {
"useBundler": true
}
},
"ruby.format": "rubocop",
"ruby.codeCompletion": "rcodetools"
}
Related
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...
I am trying to use the w-2/3 class from Tailwind CSS with HAML in a Rails .html.haml file. The forward slash is causing Rails (or HAML) to throw an exception and I don't know how to format it so it's accepted.
Is there a way to use the w-2/3 etc classes or will I have to go back to using .html.erb?
You will have to explicitly add the class, something like
%div{:class => "w-2/3"}
Note you can combine this with the shorthand syntax for classes if you want, e.g.
.foo{:class => "w-2/3"}
The class names used in Tailwind can be overwritten. This might help if you tend to use these classes frequently and don't want to write the extended version (%div{class: 'w-1/2'} or %div(class="w-1/2").
To overwrite the width classes to use _ instead of /, use the following configuration in your tailwind.config.js:
module.exports = {
theme: {
extend: {},
width: (theme) => ({
auto: 'auto',
...theme('spacing'),
'1_2': '50%',
'1_3': '33.333333%',
'2_3': '66.666667%',
'1_4': '25%',
'2_4': '50%',
'3_4': '75%',
'1_5': '20%',
'2_5': '40%',
'3_5': '60%',
'4_5': '80%',
'1_6': '16.666667%',
'2_6': '33.333333%',
'3_6': '50%',
'4_6': '66.666667%',
'5_6': '83.333333%',
'1_12': '8.333333%',
'2_12': '16.666667%',
'3_12': '25%',
'4_12': '33.333333%',
'5_12': '41.666667%',
'6_12': '50%',
'7_12': '58.333333%',
'8_12': '66.666667%',
'9_12': '75%',
'10_12': '83.333333%',
'11_12': '91.666667%',
full: '100%',
screen: '100vw',
}),
}
}
Obviously, this duplicates information from Tailwind and might make framework upgrades more cumbersome.
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.
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 :)
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