How can I compile Sass in Visual Studio 2019 for Mac? - sass

So I would like to use my Macbook to build a new app but the tools I typically use for SASS, mainly the Web Compiler extension, are not supported on Mac. Is there a similar tool I can use on Mac in VS to compile Sass?
I'm using Visual Studio 2019 for Mac, Community Edition.

Looking at the Web Compiler extension it seems to use node-sass to compile the .sass files.
If you can get that working on the command line then you could do one of the following:
Run that command from the Terminal window.
Add a post or pre-build step to the project which runs that command.
Look at installing the BuildWebCompiler NuGet package which looks to be used by the Web Compiler extension to enable files to be generated on build.
Install the Task Runner Explorer extension and setup a package.json with a command that will run node-sass. Then the NPM task runner should be able to detect that and run it.

Related

Like bundle plugin in visual studio 2022 Are there any plugins available for Rider as well?

like bundle plugin in visual studio 2022 ( https://github.com/failwyn/BundlerMinifier )
Are there any plugins available for Rider as well?
If I have a bundleconfig.json file in my project,
Whenever I edit the source, I need a plugin that bundles and minifies the JavaScript files.
thank you.
I'm unaware of any 3rd party out-of-the-box minify plugins for Rider, but you can use File Watchers (using UglifyJs) to achieve the same goal.
Guide to setup Rider UglifyJs.
Note that you will need:
Node.js installed on your machine.
UglifyJs installed npm install --g uglify-js
Javascipt & Typescript plugin enabled in Rider.
'File Watchers' plugin enabled.
I've used this before and it works without issues. Just needs tweaking to suit your needs (such as file watch scopes, output directory, etc).

Xamarin.forms project in Mac terminal without Visual Studio

I'm trying to build a job for Xamarin.forms project in mac terminal without UI method. but, not sure which are the tools are mandatory to be installed. Could anyone help here ?
Installed : Dotnet Core 6 version of visual studio SDK
Build need to be fully in terminal(mac-command line)
Need to do without visual studio application
Why not try build the app from the command line using MSBuild and see what errors it gives you. That way, you can find out what's missing and add things until it builds.
I'm using this command to build my apps from Windows (you may need to change a few things on Mac):
"C:\Program Files\Microsoft Visual Studio\2022\Professional\MSBuild\Current\Bin\amd64\msbuild.exe" C:\Projects\MyApp\src\MyApp\MyApp.iOS\MyApp.iOS.csproj /p:Platform=iPhone /p:BuildIpa=true /p:IpaPackageDir=C:\Projects\MyApp\artifacts\App_iOS /p:IpaPackageName=MyApp.ipa /p:ServerAddress=192.168.0.23 /p:ServerUser="Username" /p:ServerPassword=123456SafePassword /p:ContinueOnDisconnected=false /p:Configuration=Release /restore /target:Build /verbosity:Normal
Here's some useful info on Continuous Integration with Xamarin.

Run c# visual studio project in windows, created in ubuntu

I've got a problem with Visual Studio console application created in Ubuntu 15.04. When I try to run c# program in Visual Studio in Windows 10 I get an error "visual project does not contail any commands in project.json and cannot be start". How to fix that?
I have only json file but I don't have any sln and csproj.
The easiest solution: create new, empty console app and paste content (.cs) files from linux repo to it. Build and compile.
Remember to resolve conflicts which may occur (libs used in linux environment may be problematic in windows).

How to use Bower (installed from nuget) in Visual Studio?

I am trying to use bower inside Visual Studio 2013.
First I installed bower (not bower.js) via nuget's Package Manager Console.
Then I thought I could simply type
PM> bower init
inside the PMC to generate the bower.json.
But then it gave me this error.
bower : The term 'bower' is not recognized...
PS. The path of the PM> is pointing to C:\MyWebProject\MyWebProject\.bin.
What am I missing here??
Open the command prompt
Navigate to web project folder
Run bower init
You should have bower.json created by answering all answers on the cmd prompt.
Srinivas accurately described the steps needed to get you started with a bower.json in your root folder, which is where you want to start. You now have two main tasks:
Define dependencies - use Package Intellisense.
Install dependencies - use Grunt Launcher. They will be installed to the bower_components folder.
Reference dependencies - simply add them to you project (as links).
For more information see Introducing Gulp, Grunt, Bower, and npm support for Visual Studio.
Note that Visual Studio 2015 (currently in preview) has built-in, first-class support for all of the above: Manage Client-Side Web Development in Visual Studio 2015, Using Grunt and Bower.

Where can I find the TypeScript version installed in Visual Studio?

Maybe it's obvious, but I checked everywhere (besides the right place) and googled it. Nothing.
If you only have TypeScript installed for Visual Studio then:
Start the Visual Studio Command Prompt
Type tsc -v and hit Enter
Visual Studio 2017 versions 15.3 and above bind the TypeScript version to individual projects, as this answer points out:
Right click on the project node in Solution Explorer
Click Properties
Go to the TypeScript Build tab
Two years after the question was asked, using Visual Studio Command Prompt still did not produce right answer for me. But the usual Help|About window seems working these days:
UPDATE (June 2017):
VS 2013 does NOT show this info. (Later note: VS 2017 Enterprise edition does not show this info either).
VS uses Microsoft Build Engine (MSBuild) to compile Typescript files. MSBuild can support several major releases of Typescript, but About window shows only the latest one.
Here is how to get to the bottom of it:
A. To check which versions of Typescript are installed with your Visual Studio/MSBuild, inspect contents of C:\Program Files (x86)\Microsoft SDKs\TypeScript folder. For example, I have versions 1.0, 1.8 and 2.2:
B. Check which version of Typescript is requested by your project. In *.csproj file, look for <TypeScriptToolsVersion> tag, or you can add it if it is missing, like this
<PropertyGroup>
...
<TypeScriptToolsVersion>1.8</TypeScriptToolsVersion>
...
</PropertyGroup>
C. Finally, you can check, which version of Typescript is actually used by MSBuild. In TOOLS | Options | Projects and Solutions | Build and Run set MSBuild project output verbosity to Detailed:
Then build your project and inspect the output: you should see the reference to one of Typescript folders described in (A).
Based in the response of basarat, I give here a little more information how to run this in Visual Studio 2013.
Go to Windows Start button -> All Programs -> Visual Studio 2013 ->
Visual Studio Tools A windows is open with a list of tool.
Select Developer Command Prompt for VS2013
In the opened Console write: tsc -v
You get the version: See Image
[UPDATE]
If you update your Visual Studio to a new version of Typescript as 1.0.x you don't see the last version here. To see the last version:
Go to: C:\Program Files (x86)\Microsoft SDKs\TypeScript, there you see directories of type 0.9, 1.0 1.1
Enter the high number that you have (in this case 1.1)
Copy the directory and run in CMD the command tsc -v, you get the
version.
NOTE: Typescript 1.3 install in directory 1.1, for that it is important to run the command to know the last version that you have installed.
NOTE: It is possible that you have installed a version 1.3 and your code use 1.0.3. To avoid this if you have your Typescript in a separate(s) project(s) unload the project and see if the Typescript tag:
<TypeScriptToolsVersion>1.1</TypeScriptToolsVersion>
is set to 1.1.
[UPDATE 2]
TypeScript version 1.4, 1.5 .. 1.7 install in 1.4, 1.5... 1.7 directories. they are not problem to found version. if you have typescript in separate project and you migrate from a previous typescript your project continue to use the old version. to solve this:
unload the project file and change the typescript version to 1.x at:
<TypeScriptToolsVersion>1.x</TypeScriptToolsVersion>
If you installed the typescript using the visual studio installer file, the path to the new typescript compiler should be automatically updated to point to 1.x directory. If you have problem, review that you environment variable Path include
C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.x\
SUGGESTION TO MICROSOFT :-) Because Typescript run side by side with other version, maybe is good to have in the project properties have a combo box to select the typescript compiler (similar to select the net version)
The tsc -v command run technically reads the TypeScript compiler version within the SDK directory set within the Windows Path variable. This doesn't necessarily reflect the latest version installed as the Path variable is not updated with subsequent installations.
The version that VS.NET uses to compile the TypeScript is what's in the project's configuration:
<TypeScriptToolsVersion>1.5</TypeScriptToolsVersion>
To help explain this more in detail I created the following post which has the specifics on the TypeScript versions installed, and which version VS.NET uses to compile the TypeScript files.
Which Version of TypeScript is Installed and Which Version is Visual Studio Using?
I also added a feature request on Microsoft Connect to make viewing and switching the TypeScript targeted version in VS.NET easier. This isn't really a TypeScript feature request as much as it is a VS.NET IDE enhancement.
Allow switching TypeScript configured version from Project Properties IDE
The TypeScript team sorted this out in Visual Studio 2017 versions 15.3 and later, including the free Community edition.
How to See Which TypeScript Versions are Installed in Visual Studio
All you now need do is to go to project properties of any TypeScript Visual Studio project (right-click the project file in Solution Explorer/Properties), then go to the TypeScript Build tab on the left-hand side. This has a 'Typescript version' dropdown that shows you the version the project is using, and if you open it the dropdown shows you ALL versions of TypeScript currently installed in Visual Studio.
The actual installs are currently at C:\Program Files (x86)\Microsoft SDKs\TypeScript and then subfolders by version number, at least on Win10 on my computer. If you want to see the exact version (e.g. 2.8.3 rather than just 2.8) you can find the appropriate tsc.exe in here and look at its properties (Details tab in right-click/Properties in File Explorer).
How to Install Specific TypeScript Version
If you want to install a specific version of TypeScript then these can be found on Visual Studio Marketplace, although specific version numbers can be a little difficult to find in that list. A Google search for, for example, 'visual studio marketplace typescript 3.3.1' will usually find the exact version you want. If you install from here and restart Visual Studio the version will appear in the dropdown. Note also that some of the latest versions of TypeScript (e.g. 4.2) will refuse to install if there's a more recent version installed.
Node.js Console Applications
This answer does not apply to the 'Node.js Console Application' project type, which doesn't have a TypeScript Build tab in project properties. This is because it uses a version of TypeScript installed in the project folder using npm. The version can be seen and changed in the package.json file, and when installed appears under the npm entry in Solution Explorer, and in the node_modules/typescript folder on disk.
On Visual Studio 2015 just go to: help/about Microsoft Visual Studio
Then you will see something like this:
Microsoft Visual Studio Enterprise 2015
Version 14.0.24720.00 Update 1
Microsoft .NET Framework
Version 4.6.01055
...
TypeScript 1.7.6.0
TypeScript for Microsoft Visual Studio
....
You can run it in NuGet Package Manager Console in Visual Studio 2013.
As far as I understand VS has nothing to do with TS installed by NPM.
(You may notice after you install TS using NPM, there is no tsc.exe file).
VS targets only tsc.exe installed by TS for VS extension, which installes TS to c:\Program Files (x86)\Microsoft SDKs\TypeScript\X.Y.
You may have multiple folders under c:\Program Files (x86)\Microsoft SDKs\TypeScript.
Set TypeScriptToolsVersion to the highest version installed.
In my case I had folders "1.0", "1.7", "1.8", so I set TypeScriptToolsVersion = 1.8, and if you run tsc - v inside that folder you will get 1.8.3 or something, however, when u run tsc outside that folder, it will use PATH variable pointing to TS version installed by NPM, which is in my case 1.8.10.
I believe TS for VS will always be a little behind the latest version of TS you install using NPM. But as far as I understand, VS doesnt know anything about TS installed by NPM, it only targets whateve versions installed by TS for VS extensions, and the version specified in TypeScriptToolsVersion in your project file.
I have VS2015 and I have to run a build with TypeScript 1.7, although I have 1.8 installed via npm install typescript -g there are two ways (at least for me they worked):
Go to your .proj file and add <TypeScriptToolsVersion>1.7</TypeScriptToolsVersion> as up as possible. Rebuild, re-run. If it doesn't work try 2.
Go to Control Panel -> System -> Advanced System Settings -> Enviroment Variables. Make sure you add your desired TypeScript version first: C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.7;C:\Users\serban\AppData\Roaming\npm
This will also affect your CLI:
$ tsc -v
message TS6029: Version 1.7.5
First, make sure you have the following address in your Environment Variables Path
C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.0
Then open your Command Prompt and type the following command:
tsc -v
You can do npm list | grep typescript if it's installed through npm.
Open a (normal, not the VS) command prompt or a PowerShell prompt.
tsc.exe -v
tsc.cmd -v
tsc -v
If you installed the same version of TypeScript for Visual Studio and using npm, the output from the above three commands should be the same.
If not, check your System PATH to see where in the path hierarchy and which typescript directory is listed. For PowerShell users, the easy way is:
$env:path -split ';'
Be careful of having nothing or multiple TypeScript directories listed in your System PATH variable. As of June 9, 2017, my System PATH looked like this (just the top part, which is all that matters in this situation):
ps>$env:path -split ';'
C:\Windows\system32
C:\Windows
C:\Windows\System32\Wbem
C:\Windows\System32\WindowsPowerShell\v1.0\
C:\Program Files (x86)\Microsoft SDKs\TypeScript\2.3
C:\nodejs\
C:\Users\{username}\AppData\Roaming\npm
Notice that only the 2.3 directory is included in the PATH, not multiple versions.
In the command prompt, simply type 1 of the following command then hit Enter :
tsc -v
or
tsc -version
or
tsc --version
Note: Make sure you have added Typescript to environment variable path
before running command, details here: How to set environment
variable.
For a non-commandline approach, you can open the Extensions & Updates window (Tools->Extensions and Updates) and search for the Typescript for Microsoft Visual Studio extension under Installed
If you'd like to find out what version of Typescript is being used on a particular project, go to your package-lock.json file. You will find something like this:
"typescript": {
"version": "3.5.3"
}
As of Visual Studio 2022, there is a new TypeScript/JavaScript project type for Angular/React/Vue, the TypeScript SDK is deprecated (but still installable through the VS installer with warnings), and Visual Studio supposedly provides IntelliSense and language support based on the TypeScript version you're using for your project (npm is the preferred way to specify the version of TypeScript you're using, via your package.json file).
Per this answer, though, there are still questions about how to control/discern what specific TypeScript language version Visual Studio 2022 is supporting at any given moment.

Resources