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
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
Question Part 1
In my current setup, I have a folder that looks like this:
/wwwroot <-- Hosted in localhost
/_project <-- Contains gruntfile.js
/_dev <-- Contains Source Code
The wwwroot folder is hosted in XAMPP and open in my browser. The _project folder contains my gruntfile.js, and _dev contains all the JS and SCSS that is compiled into JS and CSS by Grunt.
This has worked fine for a year or two, but recently, I updated my packages, and the generated sourcemaps have begun breaking. Chrome shows a blank code panel in Sources, and Firefox Dev displays a 404 error's HTML in the sources code panel. The sources were now being looked for inside the /wwwroot folder. Because of this, the sources 404 and aren't shown, and I can't use sourcemap debugging which I rely on.
Relevant parts of Gruntfile:
uglify: {
common: {
options: {
mangle: false,
compress: true, // true or false or {}
preserveComments: 'all', // true or 'all' or 'some'
sourceMap : true
},
files: {
// '../wwwroot/Content/includes/js/libs.js': ['../_dev/js/common/libs/*.js'],
'../wwwroot/Content/includes/js/buildbar.js': ['../_dev/js/common/buildbar/*.js'],
'../wwwroot/Content/includes/js/framework.js': ['../_dev/js/common/framework/*.js'],
}
},
}
Short of painfully rearranging my directory structure... how can I fix this?
Question part 2:
I've tried using grunt-uglify-contrib's sourceMapRoot option as follows:
uglify: {
common: {
options: {
mangle: false,
compress: true, // true or false or {}
preserveComments: 'all', // true or 'all' or 'some'
sourceMap : true,
sourceMapRoot: "C:/Users/quint/Documents/Github/build-siteengine/a/a/a/a"
},
files: {
// '../wwwroot/Content/includes/js/libs.js': ['../_dev/js/common/libs/*.js'],
'../wwwroot/Content/includes/js/buildbar.js': ['../_dev/js/common/buildbar/*.js'],
'../wwwroot/Content/includes/js/framework.js': ['../_dev/js/common/framework/*.js'],
}
},
}
For some reason, though, the paths that show in the Sources panel in Firefox Dev are missing four directories, hence why I've added the /a/a/a/a. Why would this be happening?
This also doesn't solve my problem, since in Firefox Dev clicking on the line numbers open the file in the browser and don't take me to the line of code in the debugger, and in Chrome there is no effect.
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 have a TypeScript project in Visual Studio Code with the following task:
{
"version": "0.1.0",
// The command is tsc.
"command": "tsc",
// Show the output window only if unrecognized errors occur.
"showOutput": "silent",
// Under windows use tsc.exe. This ensures we don't need a shell.
"windows": {
"command": "tsc"
},
"isShellCommand": true,
// args is the program to compile.
"args": [],
// use the standard tsc problem matcher to find compile problems in the output.
"problemMatcher": "$tsc"
}
This works well when we hit "Ctrl + Shift + B" to build.
Is it possible to have another task that when we press "F5" to run/debug it runs a command through the command line?
Thank you.
TASK RUNNERS VS DEBUGGING PLUS LIVE PREVIEW
Task Runner
Currently, for VSCode version 0.5.0, you can use a task runner, identified in your task.json, to run multiple tasks using the same runner. At this time, configuring different tasks runners is not possible. For example, if you were using Gulp as a task runner you might have something like the following:
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [
{
"taskName": "serve-dev",
"isBuildCommand": false,
"isTestCommand": true,
"showOutput": "always",
"args": []
},
{
"taskName": "serve-build",
"isBuildCommand": false,
"isTestCommand": true,
"showOutput": "always",
"args": []
}
Now the Gulp tasks would be defined and coded with Gulp but the important thing to note is the isBuildCommand and isTestCommand as these correlate to CTRL+SHFT+B and CTRL+SHFT+T respectively. So these two tasks would be available as keyboard shortcuts. In addition, if you add additional tasks they will each be enumerated and accessible with CTRL+SHFT+P then type "RUN" then select "TASK: Run Task". Each of your tasks with be enumerated, listed and selectable.
The following code just demonstrates how eash VSCode task is related to a task runner task:
//automate build node server start and restart on changes
gulp.task('serve-build', ['optimize'], function () {
serve(false /* is Build */);
});
//automate dev node server start and restart on changes
gulp.task('serve-dev', ['inject'], function () {
serve(true /* is Dev */);
});
Debugging
Now for debugging with Node.js or Mono you have similar options. You will want to configure your launch.json or press the 'gear icon'. You can set the debugger to debug or run your app and use the VSCode 'F5' or PLAY button or menu's to start/stop/restart your app. From there you just use your favorite browser and access the server of your app. You can also use an external debugger to 'attach' to your app. Following is a sample launch.json:
{
"version": "0.1.0",
// List of configurations. Add new configurations or edit existing ones.
// ONLY "node" and "mono" are supported, change "type" to switch.
"configurations": [
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Debug src/server/app.js",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Workspace relative or absolute path to the program.
"program": "src/server/app.js",
// Automatically stop program after launch.
"stopOnEntry": true,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArgs": [],
// Environment variables passed to the program.
"env": { },
// Use JavaScript source maps (if they exist).
"sourceMaps": false,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": null
},
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Run src/server/app.js",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Workspace relative or absolute path to the program.
"program": "src/server/app.js",
// Automatically stop program after launch.
"stopOnEntry": false,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArgs": [],
// Environment variables passed to the program.
"env": { },
// Use JavaScript source maps (if they exist).
"sourceMaps": false,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": null
},
{
"name": "Attach",
"type": "node",
// TCP/IP address. Default is "localhost".
"address": "localhost",
// Port to attach to.
"port": 5858,
"sourceMaps": false
}
]
}
Notice the 'stopOnEntry' property for the RUN and DEBUG setups. This is how you can use the debugger to run or debug the app. From there you would just use the debug 'PLAY' button combined with the debug menu to select the appropriate configuration.
Live Preview
Live Preview is not currently implemented in VSCode. Two of my favorites so far are BrowserSync and Live.JS.
GULP TASK WITH NODEMON
Following is some code that may help point the way to configuring Gulp to run a node.js server. Remember that Gulp tasks can require other tasks to run first. In the code above, the Gulp task "serve-build" requires another task "optimize" to run first. "optimize" can require other tasks to run and so forth.You can chain these tasks so that your top level tasks run all of your sub-level tasks. Following is a function that's executed from a Gulp task in the gulpfile.js setup:
function serve(isDev) {
log('Start pre processes and node server...');
var nodeOptions = {
script: config.nodeServer,
delayTime: 3,
env: {
'PORT': port,
'NODE_ENV': isDev ? 'dev' : 'build'
},
watch: [config.server]
};
return $.nodemon(nodeOptions)
.on('restart', ['vet'], function (ev) {
log('*** nodemon restarted');
log('files changes on restart:\n' + ev);
setTimeout(function () {
browserSync.notify('reloading now ...');
browserSync.reload({ stream: false });
}, config.browserReloadDelay);
})
.on('start', function () {
log('*** nodemon started');
startBrowserSync('isDev');
})
.on('crash', function () {
log('*** nodemon crashed: script crashed for some reason');
})
.on('exit', function () {
log('*** nodemon exited cleanly');
});
}
So the following Gulp tasks actually just run this function which runs nodemon via the Gulp nodemon plugin to make production / "build" or test / "dev" builds using a parameter variable:
//automate build node server start and restart on changes
gulp.task('serve-build', ['optimize'], function () {
serve(false /* is Build */);
});
//automate dev node server start and restart on changes
gulp.task('serve-dev', ['inject'], function () {
serve(true /* is Dev */);
});
MAPPING GULP TASKS TO THE VSCODE TASK RUNNER
Finally, you can map your top-level Gulp tasks like "serve-dev"
and "serve-build" by adding entries to your VSCode tasks.json and using isBuildCommand and isTestCommand to map to CTRL+SHFT+B and CTRL+SHFT-T respectively.
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [
{
"taskName": "serve-dev",
"isBuildCommand": false,
"isTestCommand": true,
"showOutput": "always",
"args": []
},
{
"taskName": "serve-build",
"isBuildCommand": false,
"isTestCommand": true,
"showOutput": "always",
"args": []
}
VSCode Output
VSCode also has a task.json property to show output of your running tasks in VSCode. This will open the OUTPUT window of VSCode just like using SHFT+CTRL+H or selecting the menu VIEW then selecting SHOW OUTPUT. At this time the output window does not display color.
Just set "showOutput" to always. Perhaps this could replace your need to start a terminal/command line window thats running your node app. You can also set this property to never or silent depending on your needs. You can find more info about these properties in the VSCode documentation.
You can also STOP a running task by with CTRL-SHFT-B or CTRL-SHFT-T or use the menus after starting a task.
Finally, if you must compile your code and run the app in a terminal I think you will need to use a script/batch file in your task.json configuration that runs your task runner and then starts your node server.
If you don't want to use gulp and just do the typescript compilation then a simple way is to go to terminal and run tsc -w <filename.ts>, no need of tasks.json.
It watches for file changes and converts them to js files.
Then whenever you hit 'F5' it should run the updated js file pointed in launch.json.
If you want tsc to convert mutiple ts files you can also add tsconfig.json in your application root with "rootdir", then just run tsc -w and F5 to execute application.
sample tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "ES5",
"outDir": "<js dir>",
"rootDir": "<point to all ts dir>"
}
}
I believe this was solved by a later feature, namely the pre launch task. You can have it run a task before it launches node/Chrome with F5.
http://tstringer.github.io/javascript/vscode/nodejs/gulpjs/2015/10/14/vscode-prelaunchtask.html