I have a launch.json file for my python project debug configuration. I am using the inputs option and going with pickString to allow the job that I want to debug to be selected from a dropdown. Here is an example:
"inputs": [
{
"id": "jobName",
"description": "Enter the job to run: ",
"type": "pickString",
"options": ["test", "test1"]
}
This works fine but the issue is that many jobs will be added to the jobs folder and to allow debugging of that specific job I will have to add it manually to launch.json. I am hoping to find a way to instead just read the job names from the jobs folder then use those as the options in my launch.json.
In the extension Command Variable there is a command extension.commandvariable.file.pickFile that you can use for this.
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.
I am using Don Jayamanne's Python extension and it is working well. The only issue I have is for every project I work on, I have to copy the \.vscode\launch.json file. I was wondering if there is a way to place that file somewhere globally so the settings are applied to all my projects. Something similar to how the global settings.json works for user settings.
In other words I am looking for a way to avoid having to copy \.vscode\launch.json to every folder I store and write python code in.
Yes, it is possible - you need to put the requisite launch config directly in your user settings file, as described here.
From the linked page:
... currently it is not possible to have one global launch.json file which would be used everywhere, but what works is to add a "launch" object inside your user settings (preferences > user settings). This way it will be shared across all your workspaces
Example:
"launch": {
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${file}",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "/usr/local/bin/node"
}
]
}
How to embed current file path in a custom user keymap? I'm referring to this documentation:
http://sublimetext.info/docs/en/reference/build_systems.html
Which has been deprecated but I do not see equivalent documentation for $file_path variable which I need to use in my keymap in the latest documentation. I'm not having any luck. My keymap looks like this (trying to launch Google Chrome with flag to package my application):
{
"keys": [
"shift+ctrl+g"
],
"command": "exec",
"args": {
"cmd": [
"c:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"--pack-extension=${file_path}"
]
}
}
The official documentation is here: https://www.sublimetext.com/docs/3/build_systems.html
You may toggle the version switch in the bottom of the sidebar. The $file_path variable still exists though, so it probably should work. You may try removing the wrapping braces { and }
I do web development and am trying out Sublime Text 2. Is there a keyboard shortcut to open the current file in specified browser (e.g. Chrome)?
Any help to get setup in Sublime Text for web development is appreciated!
I'm not really sure this question is approprate here, but you can add a new "Build System" under Tools -> Build System -> New Build System...
As with all configuration in Sublime Text its just JSON, so it should be pretty straight forward. The main thing you are going to want to configure is the "cmd" key/val. Here is the build config for launching chrome on my mac.
{
"cmd": ["open", "-a", "Google Chrome", "$file"]
}
Save that as Chrome.sublime-build, relaunch Sublime Text and you should see a new Chrome option in the build list. Select it, and then you should be able to launch Chrome with Cmd+B on a Mac (or whatever hotkey you have configured for build, maybe its F7 or Ctrl+B on a Windows machine)
At least this should give you a push in the right direction.
Edit:
Another thing I end up doing a lot in Sublime Text 2 is if you right click inside a document, one of the items in the context menu is Copy File Path, which puts the current file's full path into the clipboard for easy pasting into whatever browser you want.
Sublime Text 3
(linux example)
"shell_cmd": "google-chrome '$file'"
"Open in Browser context menu for HTML files" has been added in the latest build (2207). Its release date was 25 June 2012.
Windows7 FireFox/Chrome:
{
"cmd":["F:\\Program Files\\Mozilla Firefox\\firefox.exe","$file"]
}
just use your own path of firefox.exe or chrome.exe to replace mine.
Replace firefox.exe or chrome.exe with your own path.
This worked on Sublime 3:
To browse html files with default app by Alt+L hotkey:
Add this line to Preferences -> Key Bindings - User opening file:
{ "keys": ["alt+l"], "command": "open_in_browser"}
To browse or open with external app like chrome:
Add this line to Tools -> Build System -> New Build System... opening file, and save with name "OpenWithChrome.sublime-build"
"shell_cmd": "C:\\PROGRA~1\\Google\\Chrome\\APPLIC~1\\chrome.exe $file"
Then you can browse/open the file by selecting Tools -> Build System -> OpenWithChrome and pressing F7 or Ctrl+B key.
Install the View In Browser plugin using Package Control or download package from github and unzip this package in your packages folder(that from browse packages)
after this, go to Preferences, Key Bindings - User, paste this
[{ "keys": [ "f12" ], "command": "view_in_browser" }]
now F12 will be your shortcut key.
You can install SideBarEnhancements plugin, which among other things will give you ability to open file in browser just by clicking F12.
To open exactly in Chrome, you will need to fix up “Side Bar.sublime-settings” file and set "default_browser" to be "chrome".
I also recommend to learn this video tutorial on Sublime Text 2.
On windows launching default browser with a predefined url:
Tools > Build System > New Build System:
{
"cmd": ["cmd","/K","start http://localhost/projects/Reminder/"]
}
ctrl + B and voila!
There seem to be a lot of solutions for Windows here but this is the simplest:
Tools -> Build System -> New Build System, type in the above, save as Browser.sublime-build:
{
"cmd": "explorer $file"
}
Then go back to your HTML file. Tools -> Build System -> Browser. Then press CTRL-B and the file will be opened in whatever browser is your system default browser.
Here is another solution if you want to include different browsers in on file.
If you and Mac user, from sublime menu go to, Tools > New Plugin. Delete the generated code and past the following:
import sublime, sublime_plugin
import webbrowser
class OpenBrowserCommand(sublime_plugin.TextCommand):
def run(self,edit,keyPressed):
url = self.view.file_name()
if keyPressed == "1":
navegator = webbrowser.get("open -a /Applications/Firefox.app %s")
if keyPressed == "2":
navegator = webbrowser.get("open -a /Applications/Google\ Chrome.app %s")
if keyPressed == "3":
navegator = webbrowser.get("open -a /Applications/Safari.app %s")
navegator.open_new(url)
Save.
Then open up User Keybindings. (Tools > Command Palette > "User Key bindings"), and add this somewhere to the list:
{ "keys": ["alt+1"], "command": "open_browser", "args": {"keyPressed": "1"}},
{ "keys": ["alt+2"], "command": "open_browser", "args": {"keyPressed": "2"}},
{ "keys": ["alt+3"], "command": "open_browser", "args": {"keyPressed": "3"}}
Now open any html file in Sublime and use one of the keybindings, which it would open that file in your favourite browser.
On mac and sublime text 3 , which version is 3103, the content should be
{
"shell_cmd": "open -a 'Google Chrome' '$file'"
}
Tools -> Build System -> New Build System. The type following as your OS, save as Chrome.sublime-build
Windows OS
{
"cmd": ["C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", "$file"]
}
MAC Os
{
"cmd": ["open", "-a", "/Applications/Google Chrome.app", "$file"]
}
Save the file - Chrome.sublime-build in location
C:\Users\xnivirro\Downloads\Software-Installed\Sublime-2\Data\Packages\User
Sublime View in Browswer - https://github.com/adampresley/sublime-view-in-browser (Tried with Linux and it works)
egyamado's answer was really helpful! You can enhance it for your particular setup with something like this:
import sublime, sublime_plugin
import webbrowser
class OpenBrowserCommand(sublime_plugin.TextCommand):
def run(self, edit, keyPressed, localHost, pathToFiles):
for region in self.view.sel():
if not region.empty():
# Get the selected text
url = self.view.substr(region)
# prepend beginning of local host url
url = localHost + url
else:
# prepend beginning of local host url
url = localHost + self.view.file_name()
# replace local path to file
url = url.replace(pathToFiles, "")
if keyPressed == "1":
navigator = webbrowser.get("open -a /Applications/Firefox.app %s")
if keyPressed == "2":
navigator = webbrowser.get("open -a /Applications/Google\ Chrome.app %s")
if keyPressed == "3":
navigator = webbrowser.get("open -a /Applications/Safari.app %s")
navigator.open_new(url)
And then in your keybindings:
{ "keys": ["alt+1"], "command": "open_browser", "args": {"keyPressed": "1", "localHost": "http://nbrown.smartdestinations.com", "pathToFiles":"/opt/local/apache2/htdocs"}},
{ "keys": ["alt+2"], "command": "open_browser", "args": {"keyPressed": "2", "localHost": "http://nbrown.smartdestinations.com", "pathToFiles":"/opt/local/apache2/htdocs"}},
{ "keys": ["alt+3"], "command": "open_browser", "args": {"keyPressed": "3", "localHost": "http://nbrown.smartdestinations.com", "pathToFiles":"/opt/local/apache2/htdocs"}}
We store sample urls at the top of all our templates, so the first part allows you to highlight that sample URL and launch it in a browser. If no text is highlighted, it will simply use the file name. You can adjust the command calls in the keybindings to your localhost url and the system path to the documents you're working on.
I have similar situation like you. I dont wannt sublime open editor for binary like jpg png files. Instead open system default application is more reasonable.
create one Build. Just like the accepted answer. But it will both open default application and hex editor.
Pulgin OpenDefaultApplication https://github.com/SublimeText/OpenDefaultApplication
It will have context right click menu OpenInDefaultApplication. But It will both open default application and hex editor as well
Pulgin: Non Text Files https://packagecontrol.io/packages/Non%20Text%20Files Add config in the user settting
"binary_file_patterns": ["*.JPG","*.jpg", "*.jpeg", "*.png", "*.gif", "*.ttf", "*.tga", "*.dds", "*.ico", "*.eot", "*.pdf", "*.swf", "*.jar", "*.zip"],
"prevent_bin_preview": true,
"open_externally_patterns": [
"*.JPG",
"*.jpg",
"*.jpeg",
"*.JPEG",
"*.png",
"*.PGN",
"*.gif",
"*.GIF",
"*.zip",
"*.ZIP",
"*.pdf",
"*.PDF"
]
I choose the third way, it's quite sutiable for me. It will open jpg file in system default application and quickly close the edit mode automaically at the same time. As to the first two ways, you can set "preview_on_click": false, to stop openning automaticlly the hex editor compromisely.
or try this
"cmd": ["cmd","/K","start http://localhost/Angularjs/$file_name"]