Prettier shows a red button and doesn't work - visual-studio

I am trying to format my code using Prettier, but when I try to format it by saving the file, by clicking "Format document with" or by any other way it just doesn't format and the Prettier button turns red and appears this ! icon.
I reinstalled VS Code and Prettier hundreds of times. Any idea of how I can fix this?
Here are the images of what is happening:
Image of the red button:
When I click, it returns to its normal color, but nothing happens

There are two cases here, you're either working on a:
non-Node project (doesn't have package.json) - delete any unnecessary package.json files from current folder and immediate parent folders.
Node.js project (contains package.json file) - Run npm install, or npm install prettier --save-dev (in the terminal at the folder level) if it still doesn't work.
I had the same problem. In my case, I had a useless package.json file in the parent folder, which was causing all the issue. I was working on a simple HTML, CSS and JS project.

Related

VsCode works only with npm run dev

I have a laravel project with vue in Visual Studio Code, the problem is that all the changes are not saved (therefore they are not seen) ... it only works when I do npm run dev, when compiling everything its when I can see the new changes but, The idea would not be this, but to make a change and see it live (debbugin).
In the pic you can see what i mean....
the code (black square) says "Visita" so:
1- i save the file
2- go to the browser to see the text/button/change
3- you can see in the green square the diference (i cant see the change, thats the problem)

WebStorm ESLint output window

I have WebStorm with ESLint enabled and it's working fine.
But from VS Code I'm used to see the eslint output window for the whole project I'm working on, not only for the current file (and hidden inside the scrollbar)
I cannot figure out how to do this in WebStorm - is it even possible?
You can see all errors coming from ESLint in Inspection Results tool window that opens when you run Analyze/Inspect Code:

Typescript Combine Javascript Output into Single File bundles up JS files also

My project has an app.js node file in root, and typescript files for the client side in in a sub folder, set to spit out an all.js on save. After a reinstall, typescript suddenly started concatenating app.js to the bottom of the amalgamation.
I've tried adding False into the njsproj file without any luck.
Any ideas?
EDIT>
The problem went away after installing an earlier version Node JS tools for visual studio. I have no idea why.

Get changes in .css that where not made using compass

Lets Say I have this structure of files
/sass/screen.scss
/sass/file1.scss
/css/screen.css
And I left it all good, the thing is other developer took over the project and he didn't know I used compass and he Did many changes directly to the screen.css
So I guess you can imagine that I am asking about this because I took over the project again...
Is there a pseudo automatic way of putting all the changes not included in the .scss files so I can create another .scss with all them and continue using compass just with an import?
It's like when you commit, you get the diff; but copying line by line would be too much time consuming.
I've had the same problem and solved it by doing the following:
Compile or convert your css file (the wrong one) to a nested version
(regular multiline css). You can do that using a local editor or
use this online tool and save it to
another location or as a duplicate
compile your (the right one) sass library to screen.css (nested or multiline)
Download UltraCompare.
You can download a fully working 30 day trail version. 4 Open both
files in the editor
In the top toolbar press the red = sign (Just Differences). And it
will show you all the diffs of the files
Copy/paste the diffs and run it through a sassify parser like this
one
Save it as your new.scss

How do I make a graphical asset in Visual Studio update?

I'm working on an XNA project and modify a graphical asset outside of Visual Studio. In order for those changes to show up in the application, I need to remove the reference to the original image, and then re-add the same image to see the changes. This happens whether I do a complete rebuild or not. Is there a way to streamline this process so that my project shows the changes I've made without having to remove the content reference and then re-adding it after each change.
XNA is pretty smart, and only wants to re-run assets through the content pipeline when it detects something has changed. For some reason it isn't seeing the changes you are making.
Make sure you are modifying the correct file. For example if your original image is at c:\myImage.png and your project is as c:\myGame when you add the image to the Content Project it gets copied to c:\myGame\myGameContent. Editing the image at c:\myImage.png wont get noticed. You need to edit c:\myGame\myGameContent\myImage.png
If you are editing the correct file and it still won't update, try touching another file. As smart as the engine is, it will run everything through the Content Pipeline when it detects 1 item has changed.* If that still doesn't work If you look at the top of the Solution Explorer there is a refresh button. Try pressing it as it should make sure your Solution Tree is in sync with the files on disk.
*note this is true for v3.1 it could have changed for 4.0
When you drag an item into a Visual Studio project (like, in this case, a Content Project), it will copy the file into the project directory. By default it does not reference the file you drag in (although that is available as an option).
(If the file you drag in is already in the project directory, it just leaves it there.)
The upshot of this is that you need to work on your content files in the content project directory, if you want to see your updates happen immediately.
If you don't know where the files are being copied to, select one of them in your content project and press F4 (properties window). Find the "Full Path" entry. That is where your files are stored.

Resources