I'm migrating my front end coding form Visual Studio 2015 to Visual Studio Code. I used the Web Compiler plug-in at VS2015 so as I saved my .scss files everything got processed and my changes were automatically reflected at the browser.
Now, same Solution (.NET) and I'm starting to code using VSCode but this is not working out of the box for me. I do know there is a way I can set a task.json and afterwards integrate it with gulp.
But I'm just wondering if there is an easier way like the behavior at VS2015.
Why doesn't the build of VSStudio keeps doing this if the .scss gets save as well when working with both editors at the same time?
I want to save any changes on _*.scss wich are imported at the main.scss and get the browser sync
Related
How would I be able to hide generated js files (Transpiled from Ts files) in the solution explorer?
Lets say I have an angular website. I add this angular project to Visual Studio (Chose Visual Studio 2017 Enterprise as my code editor). There seem to be no straight forward way to hide these generated js files. The solution suggested by Hiding js files in visual studio looks very crude.
I am more into a solution similar to what has been suggested in
Hide .js.map files in Visual Studio Code but it appears to be only applicable to VS code. How can I achieves this in Visual Studio? Where can I see the work space related settings for an existing web-site (angular project) added in visual Studio?
Even through it is not exact answer to your question, I will recommend to not hide js files in particular editor, but organize project in the way, that compiled code located separate from source files. It is common to have src and dist folders inside your project. You can use outDir setting in tsconfig.json in order to achieve this.
I am trying to generate code scaffolding for an in-house API. I created a T4 template which includes several other templates for each code file to be generated. I then wrote a Visual Studio Extension (VSIX) with a WPF form to capture user input and initiate the transforming of the T4 template. I am doing all of this in Visual Studio Professional 2013.
This is what I followed to Invoke the Text Transformation in a VS Extension
https://msdn.microsoft.com/en-us/library/gg586947%28v=vs.120%29.aspx?f=255&MSPPError=-2147217396
When testing the templates locally using Run custom tool, everything works perfectly. However, when testing the VS extension in an Experimental Instance of Visual Studio, the problem I am having is that after the transformation has been invoked [calling ITextTemplating.ProcessTemplate], the generated files are not placed into my open project. I verified that they exist in their appropriate folders in File Explorer.
I have searched high & low and can't find anything that talks about this. Any ideas?
The custom tool is using the Visual Studio API (DTE object) to add the generated files to the projects. I built something very similar and that is what I had to do. This project is a bit old but it is a great starting point for seeing how this can be done.
Basically you need to get a reference to the folder you want to add the new item to and then call AddFromFile. Also don't forget to save the project after you add all the items.
I am using Angular 2 in Visual Studio 2015, inside of an asp .net 4.5 project. When I build and run the project, JavaScript files are created correctly. However, if I make any changes to the TypeScript and recompile, the JavaScript isn't being overwritten. The only way I can get the TypeScript to recompile is by deleting the previous JS file.
I would first suggest opening Visual Studio as Administrator to see if it is a permissions issue, whereby VS2015 cannot overwrite your JS files.
Otherwise, right click on the project in your solution (not the solution itself) and select Properties.
You should have a tab called TypeScript Build as shown in the screenshot below. Ensure that you have Compile on Save checked.
"compileOnSave": true
must be added to tsconfig.json.
I have a rather large HTA that I still need to maintain. I originally wrote it using Notepad++, but because of its growth I am now interested in the Intellisense capabilities offered by TypeScript. It would also be helpful to have Visual Studio's HTML and CSS development tools.
I am aware that I'll have to add type annotations to the application, but it is still worth my while, and can be done gradually.
Using the File -> New Project -> HTML Application with TypeScript outputs a DLL for use with IIS Express or another web server. The output I need is the HTML, CSS and TypeScript compiled to Javascript with references adjusted in the HTML.
In short, I need the following:
Output HTML/CSS files instead of a DLL (The extension should be renamed to .hta but I can do that in a post-build step.
Output TypeScript files as Javascript
Intellisense for all TypeScript/Javascript files included in the project
Optionally, allow adding Javascript/TypeScript libraries via Nuget (I can add them by hand, but I would prefer not to).
Optionally, Visual Studio debugging (Using the debugger keyword in Javascript allows me to start a debugging session with Visual Studio, once the HTA is started using the mshta.exe executable. However, it would be nice to set breakpoints in the editor window without modifying the code.)
How can I use Visual Studio (2013 Professional) for this scenario?
NB. I have extensive experience using Visual Studio for desktop applications (C#/VB.NET and WPF) but I have no experience in Web development. I have a fair knowledge of HTML, CSS and Javascript in the HTA environment.
Update
I tried creating a new web site (File -> New Web Site ...) but I cannot add TypeScript files to the site.
I created a new "HTML Application with TypeScript" project. That gives me points 1-4.
I renamed "index.html" to "index.hta" in the solution -- no need to do this in post-build. Visual Studio recognizes the .hta extension as an HTML file.
I set the build properties to open mshta.exe as an external program, with the full path of the HTA as a command-line argument. I haven't been able to attach the current Visual Studio window to the HTA process (so no breakpoints), but the debugger statement opens a JIT debugging dialog box and prompts to open a new Visual Studio session, with full debugging capabilities.
An unexpected bonus is that I can debug the TypeScript file, and I am not limited to debugging the generated Javascript.
Update
Currently, I would prefer to use Visual Studio Code for HTA development; VS Code was not available at the time that I answered this. For this task, Visual Studio offers no benefits over VS Code.
VS 2013 works very well. There are Grunt/Gulp task runners, some made by MS, others made by third parties, for VS 2013.
Use Grunt or Gulp as part of your build process. You can start Grunt and Gulp as a build task. Either task runner should be used to minify, concatenate and version js, and styles. It can even be used to compile Typescript, though msbuild does a good job with that.
Ignore the dll made by Msbuild. Don't deploy it. The team I am working on is building an spa application on vs2013 with typescript that gets double and deployed to Linux/Apache as a two minimified js files, one css file, some image and font assets, and a index.html file.
When developing SharePoint hosted app in Visual Studio, I cannot find a way, how to tell Visual Studio in debug mode to upload typescript and their generated js files to SharePoint after changing their content.
Normally, if I change the code in javascript file (while debugging in Visual Studio), JS file is automatically uploaded to SharePoint - this is correct and expected scenario.
However, how to make it work with Typescript files? After saving Typescript file, JS file is automatically re-generated , but this JS file and TS file are not uploaded to the server.
It can be partially solved by manually changing content in JS file to trigger automatic upload to SharePoint, however I couldn't find a way to upload TS file.
Is there a way, how to tell Visual Studio to upload Typescript files (and auto-generated js files) to SharePoint in debug mode?
Please note, that I am describing only a case in debug mode (typescript files are uploaded to sharepoint via standard packaging mechanism just fine).
Thank you.
In our case we didn't want fully automatic so we used oofice pnp provisionning with a powershell script.
If you want a fully automated flow I guess gulp watch + a gulp task to do that like gulp sp-sync