I have just picked up the Visual Studio Code, and am not very familiar with how the settings should actually be.
I have been trying to exclude a file type from Auto Save but I am not able to get this to work.
The auto save works, but the part which defines the exclusion does not work (It is basically suppose to exclude .liquid extension from autosave).
This is what I have done by far; in the settings.json file I added:
"files.exclude": {
"*.liquid": true
},
"files.autoSaveDelay": 1000,
"files.autoSave": "afterDelay"
All other override settings I wrote int the .json file are working property, but this one does not.
Any help is greatly appreciated, thank you.
Currently(2019-12-06), the answer is not. But you can follow the progress in develop.
https://github.com/Microsoft/vscode/issues/42170
This extension helps : AutoSaveExt
It enables to specify what all file extensions to auto-save.
How-to:
install it
keep the auto-save option in vscode to off
open settings.json
add below entry:
"autoSaveExt": {
"debounce": 999,
"extensions": [".c", ".cpp", ".h"]
}
reload window or relaunch vscode
now all files with extensions .c, .cpp and .h will be auto-saved after 999 ms of editing
Original reference : wclr's comment # Allow to set files.autoSave as language specific or folder setting
#42170
I press ⌥ + ⇧ + F in Visual Studio Code for macOS, the shortcut to Format Document, to format a file called foo.rb or foo.html.erb.
Instead of formatting the document it prints out this letter: Ï
How do I get it to format the document?
You can set format associations in VSCode, so .erb files would be treated like .html.
Go to File->Preferences->Settings->Click ... in top right corner->Open settings.json
Then add this piece of code to your settings.json
"files.associations": {
"*.html.erb": "html"
}
This is how I solved this problem. It will remove some of the code highlights but will autoformat HTML templates like an HTML document.
You're going to need all of these settings in VS Code's settings.json file:
"ruby.rubocop.onSave": true,
"editor.formatOnSaveTimeout": 5000,
"editor.formatOnSave": true,
"files.associations": {
"*.erb": "erb"
},
Save the settings file. Install the "ruby-rubocop" and "ERB Formatter/Beautify" extensions on VS Code. Follow the documentation on both of those extensions to install their gem dependencies. Restart VS Code.
Format-on-save functionality will only trigger if the file is actually saved (which only happens if you change the file). Saving a file that has no changes will not trigger format-on-save.
If you're using prettier to format your html/css/js files, it is worth trying prettier-erb-plugin. Just add to your .prettierrc:
"plugins": ["#prettier/plugin-ruby", "prettier-plugin-erb"]
Or install it with yarn:
yarn add -D prettier #prettier/plugin-ruby prettier-plugin-erb
And make sure that VSCode uses local version of prettier from node_modules (or, you probably can install these plugins globally as well). Prettier VSCode plugin usually declared itself as default formatter, but just in case, make sure that in your settings.json is NOT written something like:
"[erb]": {
"editor.defaultFormatter": "aliariff.vscode-erb-beautify"
},
You can use Rufo to format your Ruby code. It is an opinionated formatter (like Prettier is for JS, if you are familiar with it).
You can use the vscode-rufo extension to integrate it with VSCode.
Update the settings.json of Visual Studio code:
File -> Preferences -> Settings -> Extensions -> Scroll down and find "Edit in settings.json"
Or in these paths in your OS
Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json
From Visual Studio Code Ruby extension documentation they recommend to use as an initial configuration:
"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
Look at the linting documentation too for further improvements. Plus as mentioned previously, you can add that .erb should be treated as .html:
"files.associations": {
"*.html.erb": "html"
}
If you have no code formatting
That is, when you hit shift + option + F to format your code, vscode says something like:
install a formatter by clicking on the 'Extensions' tab on the left hand side of vscode, searching for 'ERB Formatter/Beautify' (by Ali Ariff), and installing it.
Run gem install htmlbeautifier
Press shift + command + P and search for
Preferences: Open Settings (JSON)
It should open a file that has a your JSON settings in it; something like this:
{
"window.zoomLevel": 1,
"editor.inlineSuggest.enabled": true
}
Add this to the settings.json file you opened in the previous step
"files.associations": {
"*.html.erb": "erb"
}
Your finished file might look like this:
{
"window.zoomLevel": 1,
"editor.inlineSuggest.enabled": true,
"files.associations": {
"*.html.erb": "erb"
}
}
Close and reopen vscode and it should now let you format with shift + option + F
If you have no syntax highlighting for erb files
The extension called 'ruby' will solve that.
Click on the 'Extensions' tab on the right hand side of vscode.
type in ruby
Install the ruby extension by Peng Lv
You may need to restart vscode
All done!
Reference
More info in this video
Nowadays (March 2019) I think prettier with prettier-ruby are the best options: it can handle Ruby, ERB (as HTML), JS, and many many more.
prettier script.rb # will show you the formatted script
prettier --write script.rb # will overwrite the file with the formatted script
You can use the Prettier VS Code plugin to do that automatically: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
https://github.com/prettier/plugin-ruby
gem install htmlbeautifier
through the search functionality provided in the editor with Ctrl +Shift+ P (or Command + Shift + P on Mac), and then searching for format document.
I use the rubocop instead of rufo.
At the beginning, I used rufo. However, I met the issue
{
boo: {
a: 1,
b: 2,
c: 3
}
}
it always format it for me as
{
boo: {
a: 1,
b: 2,
c: 3,
},
}
add two ,, behind c: 3 and boo: {}. It is that makes my rubocop fail always.
As for, I use the rubocop in the project. Why not use it format my codes directly!
If you are interested, you can do as the following:
install the plugin VSCode ruby and then add the following snippets in the the settings.json
"ruby.format": "rubocop",
"ruby.intellisense": "rubyLocate",
"ruby.useBundler": true,
"ruby.lint": {
"rubocop": {
"useBundler": true
}
},
save it. It works~~(I wish you)
It is now possible to:
Install ruby-rubocop in VS Code
Go to File -> Preferences -> Settings
Search for Editor: Default Formatter and select "misogi.ruby-rubocop"
Go to File -> Preferences -> Keyboard Shortcuts
Search for Ruby: autocorrect by rubocop. There you have the shortcut to run rubocop in order to automatic format your ruby code following your rubocop settings.
You may also right click in your ruby file and you will find the "Format Document" option, which triggers "Ruby: autocorrect by rubocop" once ruby-rubocop is installed.
To format your ruby files, you don't need any extra plugin, you can just map some keys to do "editor.action.reindentLines"
If you use vscode-vim plugin, you can add this to your settings:
"vim.normalModeKeyBindingsNonRecursive": [
{
"before": ["=", "="],
"commands": ["editor.action.reindentlines"]
}
],
Then in normal vim mode, == will reformat your file.
There is a project split into several repositories cloned into separated folders. There is a library which is not referenced in package.json (and mustn't be) of other repositories as it is added via a build script.
How can I override WebStorm so that it does not display "Module is not installed" error for every import from that?
N.b., I need the library where it is, not in node_modules, so adding it to package.json is not a solution.
For me, this warning was displaying for all local imports. I resolved it by adding the path to the WebPack config file.
Preferences -> Languages & Frameworks -> JavaScript -> WebPack
Other than File -> Invalidate Caches / Restart, which will take some time for WS to reindex, you can use this workaround
You can disable the "Missing module dependency" inspection in the whole project either in Preferences | Editor | Inspections or by hitting Alt-Enter on the highlighted error, then arrow right - Disable inspection.
You can also create a new Scope that excludes that folder in Preferences | Appearance and Behavior | Scopes and then set the inspection's scope to it.
I solved this problem a bit differently. I added file webpack.alias-config.js in my main folder of project:
const path = require('path')
module.exports = {
resolve: {
alias: {
'#': path.join(__dirname, 'src'),
},
},
}
Next I added path to this file (webpack.alias-config.js) in: Settings -> Languages & Frameworks -> JavaScript -> Webpack:
And now I can use this alias e.g:
import MyFile from '#/components/MyFile'
In my case everything was set up correctly, but I had node_modules as exception in Settings: Editor -> File Types -> Ignore files and folders. The problem was solved after I removed it from there and waited for indexing.
For Laravel Mix users, Jetbrains products dont support the Laravel Mix config file.
Use one of these workarounds:
https://youtrack.jetbrains.com/issue/WEB-42186 (I prefer this one, because you dont need to create or edit the existing files)
Path aliases for imports in WebStorm
I've synced my User folder with sublime settings.
But what if I want to use different settings for different machines? For example, in settings of terminal package I define path to Git Bash, and it's
"terminal": "C:/Program Files (x86)/Git/bin/sh.exe"
on one machine, and
"terminal": "C:/Program Files/Git/bin/sh.exe"
on another.
I've tried to use default settings, but they refresh all the time.
Maybe look into this package: https://packagecontrol.io/packages/PackageSync
I've never used it, but according to the README,
PackageSync provides the following user configurable settings:
...
ignore_files [array]
The list of files to ignore when backing up.
So you would want to create a PackageSync.sublime_settings file that has this in it:
{
"ignore_files": "Terminal.sublime_settings"
}
This isn't ideal since it prevents the enitre file from syncing, not just that one entry (the "terminal": "C:/Program Files (x86)/Git/bin/sh.exe" entry), but it should work. (Disclaimer: I have not tried this myself)
Alternative: Possible workaround:
You could also just use the line "terminal" : "~/my_custom_terminal_shortcut" in your settings and then create a ~/my_custom_terminal_shortcut file on each computer that links to the appropriate location
I've installed JSMinifier via Sublime Text 2's package manager and I'd like to set the compiler settings for a specific project.
I can find how to set package specific settings, and I know how to do project specific settings, but is there any way to set project specific package settings?
Try out ProjectSpecific package from PackageControl. I just have added support for
project specific package settings.
Assume you want to turn on "console_log" for scope_hunter.sublime-settings for only
current project, then (after installing ProjectSpecific), add following lines to your
.sublime-project file:
{
...
"settings": {
"project-specific": {
"sublime-settings": {
"scope_hunter": {
"console_log": true
}
}
}
}
}
Seems it cannot be done natively. The package must be programmed to use project specific files (like i.e. SFTP does), but this could be helpful: http://yuji.wordpress.com/2011/07/13/sublime-text-2-beta-project-specific-settings/