ReactJs lang formatting in VS code - code-editor

Every time writing React Code, I need to select the language mode to React Js mode then only I am being able to save the file even if the file is saved as .jsx.
reinstalling vs done.
reinstalling prettier done.
Any other suggestions?
To be able to save files without needing to change the lang mode every time.

Related

Store terminal output into text file after running nodejs command by default

I want to do one very simple thing. Every time I run a command on my VS Code terminal (I'm running small JS programs using node.js), I want to store the output to a text file. Something like this
node ./test_script.js > test_script.txt
Doing this just works. But there are many times I just forget to add the > test_script.txt part while quickly using the terminal. Is there any way to make that part happen by default?
It should automatically get appended to the terminal input if I run node ./test_script.js. I also want the output file to be named the same as the .js file but with .txt extension, so it is dynamically named.
If yes, what is that setting connected to? Is it a VS Code setting, a node.js setting, or a terminal setting? Will it work if I am running a python script as well?
Thanks!

How to watch changes to compiled CSS and update original SCSS?

I know it sounds ridiculous, but Chrome writes to the compiled CSS when using the Developer Tools -> Elements -> Styles with workspace set up. It sees the original partial, but when changing a property, it writes to the compiled (they say it's working as intended, lol). Therefore I would like to:
Watch or intercept 3rd party writes to compiled (changes that didn't occur from the compile due to regular --watch).
Map the change using the sourcemap to the original SCSS file.
Save the changed SCSS file.
That will trigger a new compile. The compiled CSS will probably be the same as how Chrome left it. But this time the values arrive from SCSS and will persist.
I know that if I change stuff on the Sources tab, it does save to the right file. But I don't get a live preview then playing directly with the SCSS file on the Sources tab, only if I save. My workflow includes changing the design live on the Elements -> Style tab, then (for now) copy pasting the values I like to the file. If I have to switch to the Sources tab and I see the unchanged original values there (paste the changes, save, refresh), I might as well just switch to VS Code to do the same thing, it defeats the purpose of how it should work (when no SCSS is thrown into the mix).
I'm using sass from npm but I see this reverse sync would be the task of a custom script that can somehow distinguish the process that wrote to the file to avoid an infinite loop. The files are local but in an Ubuntu VM that has a samba share so they are accessed via a drive letter in Windows (Chrome is told that path). The solution just has to work, I don't care what language or platform.

Afer changing TypeScriptOutDir breakpoints are never hit

I am using Visual Studio Professional 2013 Update 3 and I have created a Node console Application with the "hello world" log instruction. If I set a breakpoint in this instruction and then I run the debugger, it works perfectly fine. It hits the breakpoint and then I can debug as expected (just to make clear that my .map files are created and working correctly).
Now, I clean the project (remove the app.js and app.js.map generated files). I edit the .njsproj file and I add:
<TypeScriptOutDir>lib</TypeScriptOutDir>
I open the project again, update the startup file path by adding the additional "\lib" folder and I start debugging. It runs the code but it does not hit the breakpoint.
Why is not hitting the breakpoint? How the Visual Studio hit detection is working for typescript (node.js) projects since no .pdb files have been created when compiling? And how can I fix that so I can debug a compiled code that it's not located at the same folder as my source files?
Any suggestion, idea, feedback will be really appreciated. Thank you.
Note:
Checking the .js.map file generated in "\lib" I can see how the .ts file reference has an additional "..\" So the reference is alright. Anyway it seems like the problem is detecting the hit in the .js file rather than mapping the .js to .ts lines.
Update:
Steps to reproduce:
Create a new project "Blank Node.js Console Application".
Unload the project.
Edit .njsproj xml and add this line: <TypeScriptOutDir>lib</TypeScriptOutDir>
Reload project.
Update startup file in the project by adding the "\lib" to the path.
Open "app.ts" file.
Set the breakpoint in the unique line of code "1. console.log('Hello world')"
Start debugging.
Result: The app.js is generated in the "\lib" folder, VS runs the file with node, it prints the "Hello world" and finishes. No breakpoint hit.
Is it possible that setting breakpoints over a .ts file is always assuming that the .js file generated will be in the same folder as the .ts file?
I have tested setting the and to "lib" without any success in having the breackpoint in the .ts file and being hit.
Note:
If I set the breakpoint directly over the file generated in "\lib\app.js" it gets hit and the Visual Studio starts debugging but I still need it working setting the breakpoints in the .ts files.
Update2
Using the debug-working project (without the TypeScriptOutDir line in the .njsproj) I've manually changed the .js.map file where it says:
"sources":["app.ts"] to "sources":["app.ts"]
I have changed it to app2.ts:
"sources":["app.ts"] to "sources":["app2.ts"]
app2.ts is a non existing file. When we run the project now the breakpoint is not hit.
I have also tried with an absolute path:
"sources":["W:/VS2013/projects/NodejsConsoleAppHit/app.ts"]
and it also works, but again if pointing to a non existing file it does not work:
"sources":["W:/VS2013/projects/NodejsConsoleAppHit/app2.ts"]
It looks like the app.js.map file is the responsible of mapping the breakpoints we set in the .ts file to the lines in the .js file.
Then, what is wrong with the app.js.map file generated in the lib folder?
If we take a look to this file we can see a reference to the .ts file in the previous folder:
sources":["../app.ts"]
This should be alright since the path from "/lib/app.js" to "app.ts" is "../app.ts". But the result when we run the project is that the breakpoint is not hit.
Why? I have no idea and that is what I need to figure out.
I have also tried to manually modifying this references between relative and absolute without any success...
I have created two "Node.js console application" projects and set a breakpoint in the "hello world" log instruction.
The NodejsConsoleAppHit is the one WITHOUT the TypeScriptOutDir config. Is the one that generates the files in the project root folder and hits the breakpoint.
https://www.dropbox.com/s/mniuhm8mgnly3ff/NodejsConsoleAppHit.zip?dl=0
The NodejsConsoleAppNoHit is the one WITH the TypeScriptOutDir config. Is the one that generates the files in the lib folder and does not hit the breakpoint.
https://www.dropbox.com/s/dyadwxupltcg6gc/NodejsConsoleAppNoHit.zip?dl=0
According to this work item on the Node.js Tools for Visual Studio in CodePlex:
https://nodejstools.codeplex.com/workitem/1428
The issue has been taken in account and fixed. I have tested it myself with "NTVS 1.0 RC VS 2013" and seems to be working fine.
You can get it choosing "NTVS 1.0 RC VS 2013" from the NTVS downloads page:
https://nodejstools.codeplex.com/releases/view/149714
or directly going here:
https://nodejstools.codeplex.com/downloads/get/946895
I have to say that we have been using node-inspector (https://github.com/node-inspector/node-inspector) for debugging in the meantime and it is a tool that works pretty fine and solved all our problems.
Personally still find the VS integration more convenient for ourselves. This is a matter of taste since, after this update of node.js tools, both seem to work fine.

How can I auto minify .js files to .min.js when saving the .js version in Sublime Text 3?

So I'm using Sublime Text 3 on OS X
I'm also using Minify
I know I can go into a .js file then Tools...Minify...Minify File and it creates the .min.js version in the same directory for me. This works fine but I'm forgetful. Is it possible (and if so how) to tap into Save in Sublime so that if I save a .js file it runs minify automatically for me?
Is this a case where I need a key binding for command + s that is smart enough to know if I'm saving a .js file and save/minify it if so and just do a standard save if not?
So far I've not found a good way to do this in Sublime Text but I did find CodeKit for OS X. CodeKit runs along side Sublime and not only does it auto minify .js files it also runs it through JSLint to help catch issues. (It does more than that)
Like Jason said, CodeKit is a great tool that runs along side sublime. Does compress LESS, SASS, CoffeeScript, JS, and I believe few more. That path for the compressed file is configurable. Once all files are set up, you leave CodeKit running and every single time you save a file in sublime CodeKit compiles. If you are running a local host I believe that your browser reloads as well.
When using Minify in Sublime Text, you can change the settings in Preferences -> Package settings -> Minify -> Settings - User, and add the line "auto_minify_on_save": true,. If the user settings are still empty, do not forget the curly brackets :
{
"auto_minify_on_save": true
}
This will work whether you save with Ctrl + s or from the menu.

How to set the working directory of WinGHCi

I just installed WinGHCi. When I try to load an .hs file with Ctrl+L, it opens the file browser in C:\Program Files (x86)\Haskell Platform\2012.2.0.0\winghci which is where I installed this. I don't want it to go there by default, I keep my code files in a different directory on a different drive and I don't want to have to navigate to D:\MyPath\Haskell every time I load a file.
I tried to set the "Start in" field of the shortcut I use to launch WinGHCi but it changed nothing.
How can I make WinGHCi look in my own directory by default?
It opens in the last directory you opened a .hs or .lhs from.
Try opening something from the folder you want, exit, restart.
Did it restart where you were?
Try working like that for a while, and if you like it (I do) then you're fine.
If you really do want to go to the same place every time, perhaps there's a way.
I can't find any setting to control this, but the information is stored in the registy.
Mine is at
Windows Registry Editor Version 5.00
[HKEY_CURRENT_USER\Software\Haskell\WinGHCi 1.0.6]
"WorkingDir"="D:\\Files\\Andrew\\prog\\haskell"
You can save your version of that as resetghci.reg:
To make your own, open regedit and first try the same location. If not, search for WinGHCi.
You can export that subtree but you get the whole lot including recent expressions etc, which I don't think you should reset. Save that as ghcioriginal.reg just in case. Edit away all the lines except WorkingDir and save as resetghci.reg
When you double-click it it will ask you if you're sure you want to add that info to the registry. Yes you are.
Untested:
What follows works on older versions, but Microsoft seem to be going off .pif files and the start command, and I'm not able to test this in Windows 7.
Make a text file called ghci.bat in the same folder as the .reg you made. In it put
#echo off
regedit resetghci.reg
start WinGHCi
You might need to specify the full path to WinGHCi.
The start command is the windows equivalent of making a background process from a shell prompt, so this should terminate immediately.
Make a shortcut to ghci.bat (it will be called ghci.pif) and set it to open minimised and put a nice lambda icon on it (nick it from the winghci executable).
Pop that on your desktop, start menu or shortcut bar, and when you use it, you'll be popped back to your standard location.

Resources