Related
I am using a package that provides multiple features for working with Actionscript 3 projects in Sublime Text 2. And while it's working perfect, I can't run the code in the Sublime Text.
I saw in some places that you need to go to Tools > Build System > choose your build (here would appear the action script).
But it doesn't appear, and I can't run the code, giving me the follow error :
No Build System
How can I make this work ?
Use the existing Action Script 3 package for Sublime Text, or create your own custom build system.
Example:
{
"selector": "source.actionscript",
"cmd": [
"mxmlc",
"${file}",
"-library-path+=${project_path}/libs",
"-output", "${project_path}/bin/${project_base_name}.swf",
"-debug=false",
"-static-link-runtime-shared-libraries=true"
],
"file_regex": "^(.+?)\\(([0-9]+)\\): col: (([0-9]+))(.*)$"
}
Make sure you got Adobe Flex SDK (or Apache Flex SDK) installed and that mxmlc is in your PATH environmental variable. Alternatively, you can provide its path in the build file (see the documentation for details).
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.
The Chrome web browser contains a powerful tracer tool, which not only allows tracing and debugging web pages but also allows your own programs to create a specially formatted JSON file and display it as a visual timeline of events in your program, which is extremely useful for debugging performance bottlenecks in a multiprocess/multithreaded system. I am trying to make this tool as accessible and hassle free as possible for users.
Suppose I have created a JSON file in my external program, and now I wish to view it in the tracer. The steps would be:
Open a Chrome window or tab.
Type chrome://tracing in the URL bar.
Click 'Load', browse to my file, and open.
My question is: Can this process be automated from the command line? I have looked it up and found nothing. Perhaps some javascript wizardry is required here.
For background reading:
http://www.gamasutra.com/view/news/176420/Indepth_Using_Chrometracing_to_view_your_inline_profiling_data.php
https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview#
If you want an example input file for the tracer, copy the following text and name it mytimeline.json. Follow the steps above to view it.
[ {"cat":"1", "pid":1000,"tid":1001,"ts":100000,"ph":"B","name":"UpdateLayoutTree","args":{"timestamp-s":"jun 2 12:12:12","frame":10034} }
, {"cat":"1", "pid":1000,"tid":1001,"ts":102000,"ph":"B","name":"subfunc","args":{"timestamp-e":"jun 2 12:12:13", "elementCount":4} }
, {"cat":"1", "pid":1000,"tid":1001,"ts":108000,"ph":"E","args":{"timestamp-e":"jun 2 12:12:13"} }
, {"cat":"1", "pid":1000,"tid":1001,"ts":110000,"ph":"E","args":{"timestamp-e":"jun 2 12:12:13"} }
, {"cat":"1", "pid":1000,"tid":1002,"ts":120000,"dur":15000,"ph":"X","name":"Something","args":{"elementCount":4} }
, {"cat":"2", "pid":1003,"tid":1004,"ts":125000,"ph":"i","name":"Boom","args":{"elementCount":4}, "s": "t" }
]
I have the following sass.sublime-build file in my User directory:
{
"cmd": ["C:/ruby193/bin/ruby.exe", "C:/ruby193/bin/sass", "$file", "$file_path/$file_base_name.css", "--precision", "5"]
, "selector": "source.scss"
}
Yet whenever I open files like Builder.scss the Automatic build is disabled. I have to manually change it to "sass" before it will build (which it does then perfectly fine).
I have similar build files set up with coffee script and it picks up automatically, no problem. Am I missing something?
It looks like the file name is taking preference over the provided selector. Is it fixed if you change your build preferences file to scss.sublime-build?
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"]