I want to use Brackets (at best) but it's impossible to install extensions.
Indeed I have a proxy, I configured the brackets.json file like (check this https://github.com/adobe/brackets/wiki/How-to-Use-Brackets)
"proxy" : "http://username:password#server:port/"
I use the same synthax like .npmrc file for node.js and that work, but with brackets, impossible to access extensions.
I try to install extensions with zip file but with this method, extensions don't work properly.
Any idea ?
Thanks for the help !
I was facing the same problem.The thing I was missing was a comma after the above element, here "downloadCount"
As my college proxy server is 172.16.30.80 and port is 8080,my brackets.json file looked like this
{
"brackets-eslint.gutterMarks": true,
"brackets-eslint.useLocalESLint": false,
"fonts.fontSize": "12px",
"fonts.fontFamily": "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', monospace",
"themes.theme": "delkos",
"extensions.sort": "downloadCount",
"proxy": "http://172.16.30.80:8080"
}
I have just added
"proxy": "http://172.16.30.80:8080"
For those who don't know, you can edit brackets.json file by selecting Open Preference File option of Debug in menu bar.
I'm currently tasked with building 2 UI's for a service I've constructed.
The output from both of these UI's will need to end up in the same root folder.
I found the section that names the basic bundles in the "aurelia.json" file, and renamed the bundles created for my project, when built, my project as expected created 2 new bundles in the scripts directory with the new names.
However, upon running my project, I then found that index.html was getting a 404 trying to load the "vendor-bundle" (Which I had renamed to 'service-vendor-bundle').
No problem there, I just edited index.html to reference the new file, and bingo, 404 resolved.
The problem is however, that "service-vendor-bundle" can now not load "service-app-bundle".
I assumed (Probably incorrectly) that, when I renamed the bundles in my aurelia.json file, that the build output would also be configured appropriately to load the files in.
I need to be able to customize this beacuse once the 2 aurelia apps are finished, they will need to share a scripts folder, so I'll need
uione.html to load "scripts\uione-vendor-bundle.js" and "scripts\uione-app-bundle.js"
and I'll need
uitwo.html to load "scripts\uitwo-vendor-bundle.js" and "scripts\uitwo-app-bundle.js"
The final file layout once on the server will look something like the following:
root
uione.html
uitwo.html
scripts
uione-vendor-bundle.js
uione-app-bundle.js
uitwo-vendor-bundle.js
uitwo-app-bundle.js
images
*.png
Both client apps have to be developed separate from each other and be stand alone, so I can't combine them into one app, and I cant put them into seperate folders as the service that will be serving them is a custom in house built service, specifically configured to only serve from a single folder, with a single scripts and images folder.
My aurelia.json file currently looks like this:
.........
"plugins": [
{
"name": "text",
"extensions": [
".html",
".css"
],
"stub": true
}
]
},
"options": {
"minify": "stage & prod",
"sourcemaps": "dev & stage"
},
"bundles": [
{
"name": "uione-app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{css,html}"
]
},
{
"name": "uione-vendor-bundle.js",
"prepend": [
"node_modules/bluebird/js/browser/bluebird.core.js",
"node_modules/requirejs/require.js"
],
..........
and I'm using the Aurelia cli tool (au ...) for my Aurelia based tasks.
Any pointers on how to achieve this would be great.
I think you're on the right track by customizing the bundle names.
What you can do is manually load both the vendor bundle and the app bundle. That way the app modules are already downloaded and ready to use, instead of letting the vendor bundle try to download it manually.
index.html
<body aurelia-app="main">
<script src="scripts/my-special-vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
<script src="scripts/my-special-app-bundle.js"></script>
</body>
I have tested this and it is working fine for me. I am using this manual loading technique in my own project to allow ASP.Net script versioning to provide cache-busting (see my answer here).
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.
Some projects I work on use .es6 extension for JavaScript files that import/export using ES6 module syntax.
While webstorm and webpack seem to have no issues with this setup, VSCode gives a red squiggly saying [js] Cannot find module './filename.es6'.
Is there some way to get VS Code to find modules imported that do not have a .js extension? We would like to use .jsx in a similar fashion.
I have this for a .jsconfig:
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs"
},
"files": [
"**/*.jsx",
"**/*.es6",
"**/*.js"
]
}
...and tried adding .es6 under user settings for VSCode, but suspect I did it wrong or that doesn't solve the issue.
I have several utility script files that are used by multiple extensions. Thus far, I have been copy/pasting those utility scripts to each extension's root folder whenever I make a change. This is becoming less and less feasible. I would like to reference the same utility script files from both extensions' manifests. I have tried this:
{
"background":
{
"scripts":
[
"../utils.js",
"background.js"
]
}
}
But, I when I reload my extension, I get an Extension error saying:
Could not load extension from 'C:\...'. Could not load background script '../../utils.js'.
If I use backslashes instead (this seems like a more likely solution since I'm working with windows...), I get the same error (but with backslashes).
Is it even possible to achieve this type of relative file path?
How about creating a local server that hosts the JS files you need and then your extension can access those JS file through a localhost port and use their functionality? A simple lightweight server would do the trick (maybe bottle.py in Python).
Chrome v33 tightened up extension security so i'm not sure you can access a file like you tried in your manifest.json
Let me know how you get around this problem!
Have you considered using Shared Modules? According to the documentation you can export common functionality from one extension that can thusly be imported into another extension:
"The export field indicates an extension is a Shared Module that exports its resources:
{
"version": "1.0",
"name": "My Shared Module",
"export": {
// Optional list of extension IDs explicitly allowed to
// import this Shared Module's resources. If no whitelist
// is given, all extensions are allowed to import it.
"whitelist": [
"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
]
}
// Note: no permissions are allowed in Shared Modules
}
The import field is used by extensions and apps to declare that they depend on the resources from particular Shared Modules:
{
"version": "1.0",
"name": "My Importing Extension",
...
"import": [
{"id": "cccccccccccccccccccccccccccccccc"},
{"id": "dddddddddddddddddddddddddddddddd"
"minimum_version": "0.5" // optional
},
]
}
"