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
Related
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"
}
]
}
}
I just started using TypeScript, and was using the TypeScript Playground here: https://www.typescriptlang.org/play/index.html
It has decent intellisense, and autocompletes on enter, as well as auto-completes parenthesis and brackets.
However, once I decided to use it in VS 2015, I noticed that enter no longer selects the suggested dropdown, and neither parenthesis nor brackets are auto-added. When programming in C#, these features work out great.
How do I enable this behavior in Visual Studio? I would assume that if it exists on the website, it would definitely exist in a full blown IDE like VS.
Can I enable similar refactoring features to C#, like automatic variable/property renaming across the project if I change a variable name? Using Ctrl-R Ctrl-R to rename a variable doesn't seem to work, it only changes the line I'm on.
Edit:
VS 2015 Update 3
Typescript for VS 2015 v 1.8.6.0
Typescript for VS 2015 v 2.0
Edit2: Upgraded to the TS 2.0 VS plugin. The Automatic Brace Completion checkbox is no longer greyed out, yet enabling it does not seem to have an effect on brace completion.
Edit3: These features are in Visual Studio Code.
TypeScript 2.0.2 RC for Visual Studio 2015 — August 30, 2016 fixed this issue. You can download here.
Click Details to see list of all the versions.
Make sure you have the latest TypeScript VS extension installed.
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.
ReSharper TypeScript seems to be not working at all in my VS 2015 installation. Despite of the correctly placed TypeScript definitions ReSharper does not recognize the defined types, gives zillion red underlines, and of course intellisense does not work on the variables.
The error message is for example: Could not find symbol 'JQuery'
Some more diagnostics:
Compiling the project in VS 2015 compiles with no error. Making an intentional error in the source then build generates one correct error message
Intentionally making a spell in the type definition file paths, it underlined with red correctly. When correcting the path, underline diasppears
Opening the very same project in VS 2013 all works like a charm, ReSharper is working correctly
Originally used ReSharper 9.1.2 this issue was there. Now upgraded to the latest 9.1.3 and the issue remained.
Any ideas?
If you see this kind of behaviour - lots of red, but clean compile, especially after an upgrade - you should try to clean the caches. Go to ReSharper → Options → General → Clean caches, then restart Visual Studio.
Since the problem occurs in more than one version including latest as of writing, you also have the option to switch off TypeScript support in ReSharper. After all, if a feature is broken, why use it?
How to switch it off according to their web site:
If necessary, you can disable/enable ReSharper features in TypeScript
files by clearing the corresponding check box on the Environment |
Products & Feature page of ReSharper options.
Source: JetBrains help page for ReSharper (retrieved 29 March 2018)
After this change you may have to restart Visual Studio for the new settings to take effect.
I have found that sometimes, the Visual Studio Project file is corrupted, containing multiple references to .ts files. This can cause a different, but related error, where ReSharper thinks there are multiple declarations of a symbol.
To resolve, if you are using version control, it is simple.
Make a commit
Delete the folder containing the duplicated files
Revert changes to the repository
Add the folder back to Visual Studio
Save the project file
As I mentioned, this doesn't solve the original problem, but can help in situations where ReSharper reports duplicate symbols.
I have VS2013, and want to work with resharper and style cop together in the IDE (have all the notifications of style cop, all the quick fixes together)
installed Resharper 8.1
Installed latest StyleCop-4.7.49.0
Configured my .csproj to work with stylecop and have build errors and all (straight from StyleCop settings). Copied to the .sln folder the Settings.StyleCop file.
However - Resharper don't recognize it - no notifications within the code, no mentioning in Resharper > Tools,
How can I make them speak with each other?
StyleCop 4.7.49 is not compatible with Resharper 8.1. The StyleCop - Resharper integration is not completely in sync with all the latest versions so to get full compatibility you need to run Resharper 8.2.
Specifically the version called:
ReSharper 8.2 (release date 2014-03-20) http://download.jetbrains.com/resharper/ReSharperSetup.8.2.0.2160.msi