Anyone have a good solution for formatting Razor files inside of VSCode? I've tried making it work with prettify-vscode and beautify. But in both cases it can't tell that cshtml files. I don't want to change my razor to html as I'll lose a lot of the razor-ness.
You can introduce them as HTML files (File -> Preferences -> Settings) without any 3rd party extensions:
{
"editor.formatOnSave": true,
"emmet.includeLanguages": {
"aspnetcorerazor": "html"
},
"files.associations": {
"*.cshtml": "html"
}
}
Update: v1.17.0 of C# for Visual Studio Code add-on added preview Razor (cshtml) language service with support for C# completions and diagnostics.
There is an extension that we can switch between Language Modes by shortcuts quickly: changeLanguageMode.change
I use these shortcuts for js, html, and cshtml:
{
"key":"ctrl+k j",
"command":"changeLanguageMode.change",
"args": {
"languageId":"javascript"
}
},
{
"key":"ctrl+k h",
"command":"changeLanguageMode.change",
"args": {
"languageId":"html"
}
},
{
"key":"ctrl+k k",
"command":"changeLanguageMode.change",
"args": {
"languageId":"aspnetcorerazor"
}
}
To open keybindings.json and add these shortcuts:
open up the control palette with CTRL +SHIFT + P and select Preferences: Open Keyboard Shortcuts File.
Then use Ctrl + K, Ctrl + F to Format Selection only.
Firstly: open file setting.json, which is in .vscode folder, then add next block:
{
"editor.formatOnSave": true,
"emmet.includeLanguages": {
"razor": "html"
},
"files.associations": {
"*.cshtml": "html"
}
Sometimes is necessary restart vscode
Finally: in the file to format Ctrl + k , Ctrl + f
Related
I am trying to add a contributes.defaultConfiguration in the package.json that will work on all file types/languages. so far all I can find on the Visual Studio Code Documentation for Contribution Points works on a per-language basis, an example from the site can be seen below:
"contributes": {
"configurationDefaults": {
"[markdown]": {
"editor.wordWrap": "on",
"editor.quickSuggestions": false
}
}
}
This is not supported as of VS Code 1.24.
An extension can set these default settings programmatically if they really need to
You can do this as of v1.63:
"contributes": {
"configurationDefaults": {
"editor.wordWrap": "on",
"editor.quickSuggestions": false
}
}
}
Note no language-specific grouping is required.
see release notes: override configuration defaults
I'm trying to debug an application written in Angular 2 build from webpack with VScode. I'm able to use the debugger for chrome extension in VSCode to attach my application. And it did hit the break point of the compiled js file. But it cannot find the sourcemap files.
It seems that webpack will have a webpack:// to host the files which the *.js file pointed to, like in the image:
And I can set the breakpoint inside the ts files inside webpack folder. However vscode is not able to find the ts files. So I change the configuration of webpack to
output: {
path:root('__build');
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
And then all files seemed to map to the absolute paths of the original ts files. And in chrome developer tool it looks like this:
But both chrome and vscode said the files inside this file:// is different from the original ts files. So I'm wondering whether there's a way that in webpack's configuration could make *.js file sourcemap to original ts files. And here's all my configurations:
typescript configuration:
{
"compilerOptions": {
"outDir": "dist",
"target": "ES5",
"module": "commonjs",
"sourceMap": true
}
}
webpack config:
{
entry: "./src/app/bootstrap",
output: {
path: root('__build__'),
filename: env({
'development': '[name].js',
'all': '[name].[hash].min.js'
}),
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
devtool:'source-map',
devServer: {
contentBase: "public/"
}
}
Another thing is that if in chrome developer tools, if I add the original files into the workspace and map the files from file:// to this folder, I can actually set breakpoints inside these files. So I'm wondering there's a way to map to local resources in vscode.
I changed this:
output: {
// ...snip...
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
to this:
output: {
// ...snip...
devtoolModuleFilenameTemplate: function(info){
return "file:///"+encodeURI(info.absoluteResourcePath);
}
},
and now it encodes the spaces properly, and the sourcemap file works as expected.
Thanks to Rob Lourens, this problem is caused by spaces and other special characters in the file path that may break sourcemaps.
I run crouton on my chromebook and use the Crosh shell pretty frequently. Is there any way to specify Crosh as the default New Tab on a Chromebook?
I already attempted using the Crosh extension location as the New Tab URL (chrome-extension://pnhechapfaindjhompbnflcldabbghjo/html/crosh.html) but no luck.
Do you have your own extension? If not create it, with a manifest.json file like this:
{
"manifest_version": 2,
"name": "Crosh Newtab",
"version": "1",
"chrome_url_overrides" : {
"newtab": "main.html"
}
}
Create main.js and add it to main.html. In main.js, open Crosh and close the current window, like this:
chrome.tabs.create({
url: "chrome-extension://pnhechapfaindjhompbnflcldabbghjo/html/crosh.html"
}, function() { window.close() })
doesn't answer your question directly, but you could bookmark the crosh URL and pin it to your taskbar, then access it using shortcuts like Alt+3 (where "3" is the 3rd icon in the taskbar).
Is there a way to only make my OWN browser (Chrome) not be able to go back / forward / refresh?
This happens rather often that when Im developing and playing around in devtools (Changing HTML and CSS just to try things out) I sometimes accidentally swipe back or out of habit hit refresh. I would like to be able to disable the back or forward button via some sort of extension?
I am NOT trying to disable the button on any live-website, just for me locally. Any ideas?
If you want to prevent accidental navigations, there's no need to install any extension. Just open the console, and run the following code:
window.onbeforeunload = function() {
return 'Want to unload?';
};
With this code, you will get a confirmation prompt.
If you really want to prevent the page from unloading via an extension, use the technique described in the answers to How to cancel webRequest silently in chrome extension.
Here's a minimal demo extension that adds a button to your browser. Upon click, you cannot navigate to a different page any more. You can still close the tab without any warning, though:
// background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.webRequest.onBeforeRequest.addListener(function(details) {
var scheme = /^https/.test(details.url) ? 'https' : 'http';
return { redirectUrl: scheme + '://robwu.nl/204' };
// Or (seems to work now, but future support not guaranteed):
// return { redirectUrl: 'javascript:' };
}, {
urls: ['*://*/*'],
types: ['main_frame'],
tabId: tab.id
}, ['blocking']);
});
manifest.json for this extension:
{
"name": "Never unload the current page any more!",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": true
},
"browser_action": {
"default_title": ""
},
"permissions": [
"<all_urls>",
"webRequest",
"webRequestBlocking"
]
}
I followed the instruction for windows 7 to setup chrome. No luck!
{
"cmd":["C:\Program Files (x86)\Google\Chrome\Application", "$C:\Users\gmu\Desktop\June_15_2012"]
}
after entering the file location/path under what format should I have to save. I am a noobie. sorry to ask this question. Anything helps!
If I press f7 getting the following message
Error trying to parse build system: Invalid escape in C:\Users\gmu\AppData\Roaming\Sublime Text2\Packages\User\Chrome.sublime-build:2:9
Thanks
preferences > key bindings-user should look like this in windows:
[
// *RIGHT* { "keys": ["f12"], "command": "open_browser" },
// *WRONG* { "keys": ["f12"], "ctrl": "open_browser" },
{ "keys": ["f12"], "command": "open_browser" },
{ "keys": ["ctrl+e"], "command": "HtmlDialect" },
{ "keys": ["/"], "command": "close_tag_on_slash" }
]
look in your packages folder for a folder called 'openbrow' then open the openbrow.py file in sublime
find the icon for the browser you want to use and goto it's properties to copy the path to it's location on your computer
then in the openbrow file your gonna paste that path where it should go.
for instance ([r'C:\path to your browser', '-new-tab', self.view.file_name()])
here's what my openbrow.py file looks like:
import sublime, sublime_plugin
import subprocess
class OpenBrowserCommand(sublime_plugin.TextCommand):
def run(self,edit):
subprocess.call([r'C:\Program Files
(x86)\Mozilla Firefox\firefox.exe','-new-tab', self.view.file_name()])
hope this helps! KCCO
Install the Sublime View In Browser
extension that, quote:
View In Browser is a Sublime Text 2 plugin that will open whatever is in your current view/tab.
Installation in using instructions in tne README.md file.
I was having the same problem and found this post ! My problem was fixed by just typing this:
{
"cmd": ["C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", "$file"]
}
Notice that double \\ solved my problem ..
And then I saved it as Chrome.sublime-build on:
C:\Users\YourUsername\AppData\Roaming\Sublime Text 2\Packages\User
In my Windows this code is working.
Go to Tools > Build System > New Build System
Then put the code with your browser file path.
{
"cmd": ["C:\\Program Files\\Mozilla Firefox\\firefox.exe", "$file"]
}
Please use double '\\' for '\'.
Hope it will work.