Using a node.js file watcher with JetBrains WebStorm - javascript

I've been using Prettier with my projects for a few weeks. I really like it!
I use the JetBrains WebStorm IDE, so I followed these instructions on the Prettier project site for how to set up a file watcher in WebStorm: https://prettier.io/docs/en/webstorm.html#using-file-watcher
Then, every time I save a JavaScript file, Prettier automatically runs on it and WebStorm shows me the changes as soon as the file is saved by Prettier.
I want everyone on my team to use Prettier, but not everyone uses WebStorm. Some people use editors that can't be easily configured with Prettier. So, I followed these instructions on the Prettier project site for how to set up a file watcher as an npm script in my package.json file: https://prettier.io/docs/en/watching-files.html
"scripts": {
"prettier-watch": "onchange '**/*.js' -- prettier --write {{changed}}"
}
I used the onchange package as my file watcher, as suggested in the docs, and I disabled the file watcher in WebStorm since I don't need Prettier to run twice in a row.
The problem is that, when I save a file in WebStorm, the onchange package runs Prettier correctly, but I don't see the changes in the editor, even when I switch out of and then back into the file window with my mouse cursor. When I try to make a new change, and save again, I get this "File Cache Conflict" warning message from WebStorm: "Changes have been made to in memory and on disk. Keep Memory Changes, Show difference, Load File System Changes"
If I choose "Load File System Changes", the version Prettier save successfully loads. But having to see this dialog box every time I save is quite annoying. I would prefer it if the changes were reflected in WebStorm automatically.
It seems like the only way is to use WebStorm's built-in file watcher instead, but then I don't have an easy way to set up Prettier for my coworkers without forcing them to manually install their own independent solutions.
So my question is this: How can I use a generic node.js file watcher as an npm script that makes changes to my files after saving, and have those changes automatically reloaded in WebStorm without this dialog box?

I was facing the same issue and no doubt that dialogue is really annoying and here're the steps that finally helped me resolving the issue.
Go to Webstorm/Phpstorm Settings/Preferences
Open up settings for File Watchers: /Tools/File Watchers/
Double click on your file watcher i.e. Prettier in this case
This will open a modal window for editing watcher. Uncheck Auto-save edited files to trigger the watcher
As per my understanding, unchecking this option will only run file watcher on manually saving the file and will help you getting rid of too much appearance of that modal on every single change. Please don't forget manually saving the file in that case to keep on enjoying Prettier.

Maybe you could try to fiddle with Use "safe write" setting on System settings pane in webstorm

Related

How to run npm start without opening browser for react development on linux

I am learning react and find myself running npm start on the terminal a couple of times but its annoying how it opens a new browser window everytime. I'm trying to stop this from happening on linux.
I found a solution for how to do this on Windows, but how can I do it on Linux?
Adding BROWSER=none to the .env file should get it solved.
If the folder /etc/profile.d doesn't exist create it. Then run touch /etc/profile.d/[any descriptive name here].sh and open it in the text editor of your choice. Then add export BROWSER=none there.
Then logout and login again. If it didn't work then try putting export BROWSER="none" in the file.
This is setting an environment variable.
Hope this helps.
fixed
create a .env file next to your package.json and put BROWSER=none inside
I don't think you need to run npm start so often. I've created my project via create-react-app which comes with Hot Module Reloading or HMR(restarts the server on any saved edit) in-built.
Starting a new React server multiple times can also be problematic as every time it will run on a different port. If you're integrating an API that has CORS set up for a particular port, it won't work on other instances.
What to do?
Create your application using create-react-app(cra) or add HMR using some library if you don't want to use cra. Here is a tutorial for that (haven't tested it).
Always keep a single dev server running. It will automatically reload on code change.
Stop the server by Ctrl + C when you don't want to use it.

Least amount of hassle when enabling inline javascript?

So I'm currently trying to run a react/react-redux/bootstrap web application template using react-app-rewired. To be specific, I run npm start, which runs react-app-rewired start via the predefined start script in my package.json file. The only error that's getting thrown is that in one of the .less files, there is some inline javascript. I'm ok with just allowing that to get through, because I'm sure there's also inline javascript in some of these other files, and having to fix every file this applies to would be a pain. I did some research, and the main way I see people accomplish this is by setting up gulp or webpack to pass enableJavascript as an option. Is there a way to enable inline javascript from the command line, and not take all that time setting up webpack or gulp on a premade program?
If there isn't, what is the way to accomplish this that comes with the least amount of headaches?
Thanks in advance for your help

javascript: Run / Execute from Atom in Browser

While trying to learn javascript, I stumbled upon Typescript and decided to rather learn that. I installed Atom and the atom-typescript module and coded a typescript class, which compiles to a .js file. I created an index.html page with the .js in a script tag.
As far as I understand, in order to test the js code, I have to start a webserver and load index.html.
What would be a convenient way to do that? At least, I would like to manually run the script from Atom with a keyboard shortcut. Ideally, I would like the browser to refresh every time the typescript file changes in Atom.
No google result I could find explains how to do that, is that a difficult thing to do?
What would be a convenient way to do that?
Use browserify to reload your webapp everytime the JS changes. Also use nodemon to restart your webserver each time the backend JS changes.
Example:
Checkout http://typescriptbuilder.com/
Nodemon config:
https://github.com/TypeScriptBuilder/tsb/blob/master/nodemon.json
Wepack config:
https://github.com/TypeScriptBuilder/tsb/blob/master/src/webpack.config.ts
Webpack config during devtime:
https://github.com/TypeScriptBuilder/tsb/blob/8a7d48d71a8327d48822fa15eb52b9adb1953223/src/server/devtime.ts#L15-L82

VSCode intelliSense autocomplete for javascript

I would like Visual Studio Code to autocomplete all words within the open document instead of the just the scope specific variables it finds. What should I change in the settings?
edit: code version 0.3.0 at time of question.
I just figured it out. This will use all words on the page for auto complete.
// Always include all words from the current document.
"javascript.suggest.alwaysAllWords": true,
// Complete functions with their parameter signature.
"javascript.suggest.completeFunctionCalls": true,
Even though it has been quite some time for this question, I thought I might be of help to anyone else who bumbles across the same question.
So here goes . And this is for the latest version of VS Code as of writing.
For a true intellisense, i.e. for example you intend to get all the methods related to "console" as soon as you press '.' , you can use the respective Typescript definition file.
Now I agree that this fix is targeted at node,and needs the same along with npm on your system. But still, works for all Major JavaScript work you might run across.
on Linux, for this, you'd need "npm" and install TypeScript Definition Manager (tsd) globally.
npm install -g tsd
then within your current project directory (or by changing to the project directory) , open a terminal window and add the following lines
tsd query node --action install
tsd query express --action install
then, as soon as you'll open your .js file in the current directory, you'll get proper autocomplete / intellisense for all DOM object and other possible stuff.
It worked for me, and this is the only reason I use VSCode on linux (for JavaScript at least, even though I like LightTable too)
for further information (and clarifications if I somehow couldnt manage to be clear enough) visit the following link:
Node.js applications on VS Code

xcode 4 + phonegap ... not update JS upon build?

I've run into a weird issue that has had me scratching my head for the past hour.
I'm working on an iPad app using Xcode 4 and PhoneGap. It's using jQuery. I've put all my JS into a scripts.js file.
Things are working well.
I spend about an hour doing a lot of CSS tweaking. I'd update the CSS file, stop the app, rebuild, and push to the iPad simulator or my iPad. That's been working fine. Every update to the CSS file is reflected on the new build.
I then needed to update the JS file. I couldn't get things to work and then I finally realized none of my JS changes were actually be put into the build. I finally blanked out my JS file completely, rebuilt, and it's still not updating.
The file I'm updated is being updated in the finder in the project folder (I can right-click 'view in finder' and that file is, indeed, updated).
So I'm stumped. Is the xcode compiler caching the JS file somehow instead of grabbing the updated file? Is there a way to force it to grab the updated JS?
I found it necessary to hold the Option button when clicking the menu command which turns the command from "Clean" to "Clean Build Folder..." and this caused my assets to be refreshed.
Well, after some more googling, this seems to be a common problem. Xcode seems to cache files even after you've edited them.
One option appears to be to run the 'clean' command before a new build. I tried that, no luck.
Other solutions appear to involve rebuilding the .plist file each time. I don't fully understand that (yet) in terms of how to do that automatically, but did find this workaround:
Open your .plist file
change something (in my case, I rename one of the app icon files each time)
save and build
Doing that magically forces xcode to FINALLY grab all the updated files and do a proper build.
I can't explain why Xcode seems perfectly happy grabbing my updated .css file each and every time but won't update the .html or or .js files without first doing this .plist file edit.
Seems as if Apple still has a few bugs to work out. I guess we'll have to wait patiently for the next 4gig .x relase of it. ;)
Just add a new "Run Script" build phase to your target in XCode and paste this :
touch -cm ${SRCROOT}/www
I do not have mac right now, but few things to try:
Try to look at Your project build (or prebuild or something) action where www folder is supposed to be copied.
Try to change index.html and see if it works.
Try to copy paste all Your javascript code to index.html script tag
Try to validate Your javascript (For example: Google Closure Compiler) and see if it has no problems
None of these worked for me :(
The only way I can get the thing to update its html and js is by running a "corodova run ios" at the command line.
Find the file called copy-www-build-step.sh.
Mine was in [project_folder]/platforms/ios/cordova/lib/copy-www-build-step.sh
In that file, find the lines beginning rsync -a "...
Add -c to the rsync lines, so they ready rsync -a -c "...
copy-www-build-step.sh is the script that copies the files over from www/ to where they go inside the app file. rsync is the unix file copying command they use. Without that -c, rsync just compares the file size on each file and folder and copies them over if the size has changed, and a couple of spaces or quotes don't count as enough of a change. With the -c, it checksums them and compares the checksums, which will catch even the smallest changes.
I think this will work best, because it's not a workaround, it actually fixes the cause of the problem.
I just had this issue, and the build phase command posted here (which is actually now used by the default Phonegap project) did not work for me, since I am editing my files on a Parallels Windows VM, in Visual Studio.
What I did, was use this instead, in the Build Phase of my project:
find "${PROJECT_DIR}/www/." -exec touch -cm {} \;
Thats basically a recursive touch. I then set up Visual Studio to always reload the file, if it has been saved. Hope this helps.
I'm not sure which did it, but I did the following:
Changed an icon value in my MyProject-Info.plist
Quit the simulator
Product -> (hold option) -> Clean Build Folder
Run
I had this same issue with the iOS Simulator, I tried most of the suggestions above with no success, it would not pick up my changes.
Later another possible solution occurred to me, which did work:
Delete the app from the simulator. (ie. Click and hold on the icon, then hit the X when it starts to shake, then Hardware Home)
Then re-run from xCode.
(NB: "cordova build ios" was also required)
Nothing solution of above work
finally i saw there are two index.html file and .js file in the project created using Command line tool of Cordova
So make changes as below shown under Staging folder

Categories