#Atom livereload install
#Atom livereload update
#Atom livereload free
#Atom livereload mac

Next I'll setup the FTP connection for my site:Ĭtrl+Shift+P to open the command prompt and then type SFTP and click to init.

#Atom livereload update

You may later find you have to save twice if it didn't update the first time, if you run into this a lot you could try increasing this setting.Īlso if you want to work with sass/scss files, you'll need to add these to LiveReload's list of file extensions, find livereload.exts and add ,scss after css.Īlso if you want the scss changes to work like css changes without a full page reload, for other editors there may be a setting but in vs code I forked the repo to build a version that does this for scss files too: - hope to have this merged to the main extension soon. This is a short half second delay that shouldn't be too noticeable but should also give ftp enough time to upload the file. In the settings UI (Ctrl+Shift+P and type settings) search for layForUpdate and enter 500. With these installed I'll setup my site's livereload to have a delay. Then, i'm using Chrome as my browser so I've installed the LiveReload extension for Chrome: & i've installed the LiveReload extension for VSCode too:

#Atom livereload install

In VSCode we can find & install extensions by pressing Ctrl+Shift+P and typing install and then finding the package in the list, or by clicking the extensions link on the left side menu.įor FTP in VSCode i'm using the SFTP extension:

#Atom livereload free

Here's an example of this using VSCode (a free code editor), but should work the same in any other editor (such as Atom or Sublime - you'll need to find the relevant extensions for those editors) or if these don't work for you, you could look into a desktop app such as though those tend to be paid while the editor ones are generally free. This can even work over ftp by setting a short delay in your livereload extension. When you save html/template or js files, your browser will auto reload to show the new changes, while css changes are auto applied live into the design without reloading - as if by magic ). LiveReload is a way to have your code changes live refresh in your browser.Į.g. Visual Studio Code has a broader approval, being mentioned in 1104 company stacks & 2298 developers stacks compared to LiveReload, which is listed in 5 company stacks and 8 developer stacks.LiveReload with FTP Home Subscribe LiveReload with FTP 06 March 2019 on REC, Responsive, Design PedidosYa, Yahoo!, and triGo GmbH are some of the popular companies that use Visual Studio Code, whereas LiveReload is used by Startae, Listium, and Contratobook. Visual Studio Code with 78.4K GitHub stars and 10.9K forks on GitHub appears to be more popular than LiveReload with 1.43K GitHub stars and 180 GitHub forks.

LiveReload and Visual Studio Code are both open source tools. 'Lightweight, Gulp support' is the primary reason why developers consider LiveReload over the competitors, whereas 'Powerful multilanguage IDE' was stated as the key factor in picking Visual Studio Code. LiveReload can be classified as a tool in the 'Live Reloading' category, while Visual Studio Code is grouped under 'Text Editor'.

#Atom livereload mac

Code is free and available on your favorite platform - Linux, Mac OSX, and Windows. Build and debug modern web and cloud applications. On the other hand, Visual Studio Code is detailed as ' Build and debug modern web and cloud applications, by Microsoft'. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. LiveReload monitors changes in the file system. CoffeeScript, SASS, LESS and others just work'. LiveReload vs Visual Studio Code: What are the differences?ĭevelopers describe LiveReload as ' CSS edits and image changes apply live.