TSLint in Visual Studio 2015/2017? - visual-studio

My organization uses TSLint pretty heavily for quality-checking our Typescript code, and it provides a valuable service to us! However, we use Visual Studio 2015 & 2017 as our main IDE and the only way to get the linting results it to run a gulp/grunt task which prints the output to the Task Runner Explorer console. It works, but it's slow and not the best development experience.
In smaller projects on my own I've used VSCode, which has a fantastic TSLint plugin that highlights linting violations as you make them, and provides access to the auto-fixers that some TSLint rules have. Like this:
Is it possible to get this same functionality in Visual Studio 2015/2017? The immediate feedback is a life saver when writing TypeScript code.

As #Hermann Gruber has mentioned, in Visual Studio 2015 Mads Kristensen's Web Analyzer extension provides support for TSLint of the kind you require.
For Visual Studio 2017 and 2019 I have now personally upgraded Mads' extension, and rebranded it as 'TypeScript Analyzer' as it only supports TSLint. It's available in Visual Studio's Extensions and Updates Gallery under 'TypeScript Analyzer'.

This is something I coded in a day or two (note that I haven't worked with C# for a few years):
https://github.com/vladeck/TSLint
It is a start of (hopefully) worth-wile Visual Studio 2017 extension that can mark .ts code withing the editor, based on the installed tslint and tslint.json configuration.
It is not published on the marketplace yet (a lot more coding to do), but you can download and build it yourself. Give it a try, If you have the time. The more people try it out, the more I will have data needed to make it worth-wile.

This is reported as an issue in the Visual Studio Developer Community.
https://developercommunity.visualstudio.com/content/problem/22907/please-support-tslint-as-how-its-supported-in-vs-c.html
The status is "triaged", so I assume that a comparable feature is not (yet) available. You may want to upvote the issue, so that it gets more attention by the VS development team.
EDIT: As noted in the following question, the visual studio plugin web analyzer provides support for tslint in VS 2015 (but not VS 2017):
Set up TSLint for VS2017

Looks like if you are using typescript 3.0 or higher you just need to add tslint plugin into your tsconfig file. Install typescript-tslint-plugin below and you may need to restart visual studio (or simply close all your files and re-open them)
https://github.com/Microsoft/typescript-tslint-plugin
First
npm install --save-dev typescript-tslint-plugin
Then
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-tslint-plugin"
}
]
}
}

Related

What is background build in Qt VS tools

Relates to Error while using Qt in Visual Studio 2019
I have the same error. Unfortunately I cannot still fix it, as Qt VS Tools for VS 2015 aren't updated. But my question is not how to avoid background build.
My question: what is background build?
Oh, I believe you are running into the 32767 names for this.
Let me preface this by stating that 2015 may have been the last time I used Visual Studio or developed anything for a Microsoft platform.
Part of your answer is in this discussion.
I believe the latest (or more current) name for "background build" is "live code compilation."
This is a resource robbing, highly annoying, syntax checking thing Microsoft thought would be great. It ranks right up there with Microsoft Clippy as far as tragic ideas go.
Basically, as you type, visual studio tries to build your stuff, puts squiggles under errors and generally consumes a whole lot of resources.
If you are using that Qt plug-in to build a QMake project this can cause all kinds of hardship, especially when you have UI files that need to MOC compile and are in the designer modifying the .UI file.
Whatever version of Visual Studio I was forced to use for that project, the first thing I did was find out how to turn that off.
Qt appears to not play well with Visual Studio it seems.
Here is a more complete description if you happen to have the plug-in.
BuildOnSave is an extension for Visual Studio 2019 and 2017 that
builds the current solution as soon a file is saved, and in
combination with the the extension SaveAllTheTime, enables a live,
background build experience while you type.

ESLint support Visual studio 2017

ESlint static intellisense doesn't seem to be supported in Visual Studio 2017 which makes coding in .js files a complete pain as I have to run the CMD eslint command to get any linting errors. In VSCode I can just use the ESLint extension. What about Visual studio 2017?
Is their any way I can enable it?
How to Get ESLint Working in Visual Studio 2019 and 2017:
2019 v16 & 2017 >= v15.8
I've included the previous version instructions at the end, but do yourself a favor and upgrade if you want this feature.
From the menu: Tools > Options > Text Editor > Javascript/Typescript > Linting
Check Enable Eslint
The global-in-visual-studio .eslintrc file is at your root user directory (Windows 10) along with other visual studio configs. You could still have eslint installed via npm install eslint -g on your machine. VS won't use it. It comes with the react plugin, but you can install other plugins and they'll will work. You can extend configs normally in your project (eslint ref)
It uses Eslint v4 but acc. to MS docs,
if your project has a local installation of ESLint, it will use that version instead
2017 v.15.7
From the menu: Tools --> Options --> Text Editor --> Javascript/Typescript
Set Enable Eslint to True (if it's not already)
Then from the main menu: Tools --> Web Code Analysis --> Edit ESLint Settings
You will have to save the .eslintrc and your.js file for the rules to take effect. There might be a way to enable the intellisense as you type, but I haven't found it. I found that if I update the rules after visual studio has already begin linting, I have to restart the project for the new rule to take effect. Still clunky but this is a great way to quickly implement a coding standard especially when you match it with your text editor format and use an auto-format on save plugin like this one
Just remember to edit the .eslintrc file in the ESLint 2.0.0 format found here
I don't know if this is part of the 15.8.2 update (just added on 8/23/18) or not, but the layout for Options has changed slightly:
As has the menu options under Web Code Analysis:
I suddenly started getting the most picayune errors from it (Like "Expected '===' and instead saw '=='.") which I suspect is due to it having been "improved" to work better.
The eslint version of Visual Studio is not the latest one, that's why you couldn't get the eslint to work as in VSCode.
There is an extension named VisualLinter which let you use the newer version of eslint.
As of 14/8/2018 eslint has much better support in Visual Studio 2017 (15.8.0)
https://learn.microsoft.com/en-us/visualstudio/releasenotes/vs2017-relnotes-v15.8#eslint-improvements

Integrate ESLint with Visual Studio 2015

I am using ESLint for JavaScript. I installed it in my machine and am able to run and check for the errors in the file that I want to. Everything is good but if I have to use it only from command prompt I have to manually run this for each file or a folder. I am thinking about integrating this into Visual Studio so that when I run it like "Run ESLint on solution" it will give a list of warnings/errors for all the JS files in the solution. Even if we can't do that, is it possible to select a file and to run ESLint on that file in Visual Studio 2015?
I added ESLint to external tools in Visual Studio:
But when I run it, it's not showing any errors or anything. It is just showing the details of the help command. How do I run this on a particular file?
Web Analyzer extension has now been built in to Visual Studio in the .NET Core Tooling Preview 1
Follow the link to download the installer for
.NET Core Tooling Preview 1
You can install Web Analyzer extension as well, but after the restart you will get a prompt:
You can use WebAnalyzer plugin for Visual Studio, which does JavaScript linting through ESLint. It should highlight javascript errors every time you save your file, so it's a bit nicer then doing it through the menu. If you don't want to use plugin, you can setup a new menu item in the Tools > External Programs menu. Make sure to use ESLint's visual studio formatter that should allow you to double-click on the error and have Visual Studio take you to the line where the error occurred.

Typescript VS2013

I have Visual studio 2013 Ultimate, and want to use typescript. I installed the plug-in:
http://www.microsoft.com/en-us/download/details.aspx?id=34790
It didn't show any errors during or after the install. When I started VS2013 again and went to File > New > Project, there was a TypeScript thing in the templates. But it said "Install the latest TypeScript for Visual Studio", and trying to create such a 'project' results in a "project creation failed" message.
I also tried making a new file, but there was nothing related to typescript. Making a new file and changing the extension to .ts didn't work either (the icon of the file shows that it's an unknown filetype).
How do I get typescript to work in VS2013?
EDIT: I noticed that there's no typescript listed in de list of installed extensions. Could it be that the plug-in didn't detect my VS2013?
Answering my own question based on the comments on the question and own experiences. For when other people find this question.
It helps to restart your computer after installing the typescript plug-in.
And the Web Essensials 2013 plug-in doesn't mix well with typescript, so disable that to avoid Visual Studio crashing. (credit to Ken Smith; see comments on question).

Can't open a TFS build process template with Community Build Extensions in VS2012 using the dummy-project-with-refrences trick

I'm trying to open a TFS Build Process Template (DefaultTemplate.11.1.xaml) file, incorporating an activity from Community TFS Build Extensions. I'm following instractions from here, section Get the custom activities into Visual Studio. I had no problems with that back in the RC version of Visual Studio 2012 but now, after upgrading to the release version, an attempt to open the file ends up in an error:
System.Xaml.XamlException: 'The type ‘InArgument(mtbwa:BuildSettings)’ of property ‘BuildSettings’ could not be resolved.'
TFS itself doesn't seem to have any problems running builds based on this template.
I am able to open the file without the trick, but then of course the custom activities are not displayed properly.
Check this out:
http://blogs.blackmarble.co.uk/blogs/rfennell/post/2012/08/30/Type-InArgument(mtbwaBuildSettings)-of-property-BuildSettings-errors-in-TFS-2012-RTM-builds.aspx
Quote:
"if the Visual Studio class library project you were using to manage the process template editing was targeting .NET 4.5, it needed to be 4.0. Well with Visual Studio 2012 RTM this is no longer the case, in fact it is the other way around."
I don't really think this is a great answer but I don't have enough rep to comment...
Build action on the xaml file is set to None?
I had a similar issue when opening build templates in VS 2012 RTM, but I was able to open the xaml "a little," meaning that I could open it in the workflow designer, but a lot of it was just the error activity. I found some errors to the effect that I should add references which I had not needed before (neither in VS 2010 or VS 11), such as PresentationCore and PresentationFramework. I wish I remembered more detail to pass on to you on this point.

Resources