Visual Studio Code Simple Web Server



Visual Studio Code Simple Web Server

Functions

  • Directly Open, Edit and Save on server files.
  • Save the local file or directory to server(upload and backup option)
  • Download the file or directory from ftp server.
  • Create a directory on the remote server directly.
  • Deletedirectory(recursive) and files directly from the server.
  • Rename Change the file name on the FTP server.
  • Compare a local file server file.
  • Remote directory open to workspace (Beta version)

Available commands

  • config - Set the ftp connection information.
  • create directory - Create a directory on ftp server.
  • open - Open the file directly from ftp server and when you save upload it to the ftp server.
  • save - File or directory upload to ftp server.(Available from the context menu)
  • download - Download the file or directory from ftp server to the workspace.
  • delete - Delete the file or directory directly from ftp server.
  • rename - Change the file name on the FTP server.
  • diff - Compare a local file server file.
  • Remote directory open to workspace - (Beta version) Open the directory directly on workspace from the ftp server. Similar to remote synchronization.(Caution : So remote delete a files is only possible using 'Delete' in the context menu)

Caution

Be sure to check the console(Ctrl + Shift + U)('OUTPUT -> ftp-simple') for a response to the all action.

Startup Settings

  1. Press 'F1'
  2. Enter 'ftp-simple'
  3. Pick 'CONFIG'
  4. Enter ftp connection information and save

Config setting example

See the easy-ftp details.

  • name - string - Display name.
  • host - string - server domain or ip.
  • port - number - (option) port (Default: : 21)
  • type - string - (option) ftp type. 'ftp' or 'sftp' (Default: : 'ftp'). If 'ftp' does not work, try 'ftp2'.
  • username - string - username for authentication.
  • password - string - (option) password for authentication.
  • privateKey - string - (option) (only sftp) String that contains a private key for either key-based or hostbased user authentication (OpenSSH format) Default: none
  • passphrase - string - (option) Use sftp 'privateKey' only. For an encrypted private key, this is the passphrase used to decrypt it. Default: none
  • agent - string - (option) (only sftp) Path to ssh-agent's UNIX socket for ssh-agent-based user authentication. Important: Windows users: set to 'pageant' for authenticating with Pageant or (actual) path to a cygwin 'UNIX socket.' Default: none
  • agentForward - boolean - (option) (only sftp) Set to true to use OpenSSH agent forwarding (auth-agent@openssh.com) for the life of the connection. agent must also be set to use this feature. Default: false
  • secure - boolean - (only ftp) Explicit FTPS over TLS, default: false
  • secureOptions - object - (only ftp) Options for TLS, same as for tls.connect() in Node.js.
  • path - string - (option) remote root path. Default: '/'
  • autosave - boolean - (option) To determine whether the automatically uploaded when you open a file directly and modify and save. Default: true
  • backup - string - (option) The local path you want to back up before file saving on the server.
  • confirm - boolean - (option) Only save option. When you save the file, ask if you want to overwrite the file if it already exists.. Default: true
  • project - object - (option) Only save option. Pre-specify local workspace path and server root path to save directly without selecting a path. Overwrite unconditionally.
  • ignore - array - (option) Only 'Remote directory open to workspace' option. Path to be ignore. Use glog pattern. (Caution : server path (ex:/home) + ignore pattern (ex:/**/node_modules) => /home/**/node_modules)

Example

Remote Config(option)

'File - Preferences - Settings' and type in the format shown below.

  • ftp-simple.remote-workspace - string - (option) You can modify the local workspace path when you open a remote file. Modify this option if remote file encoding is not UTF-8.(VSCode appears to have encoding recognition bugs if the workspace path is longer.)
  • ftp-simple.remote-workspace-load-all - boolean - (option) Indicates whether all files are loaded during initial run. If false, the sub folder ([DIR]) will load when it is clicked. Default: true

Example

Features

This extension provide preview of HTML which execute on web server.When you save files, this extension automatically reload browser or side panel (live preview feature).You can call these features from the context menu or editor menu.The main features are as follows.

  • Preview on side panel (ctrl+shift+v): Open preview of HTML on side panel. With this feature, you can easely check the operation of HTML, CSS and JavaScript.
  • Launch on browser (ctrl+shift+l): Open Web Page on default browser. You can check all operation with web page.
  • Stop the web server (ctrl+shift+s): Stop the web server. This feature can be used only from command palette.
  • Resume the web server (ctrl+shift+r): Resume the web server. This feature can be used only from command palette.
  • show UI Page (ctrl+shift+u): Show UI Page. You can change options at UI page.

Extension Settings

Description

This extension contributes the following settings:

  • previewServer.browsers: Browsers to launch. Even if you do not set this option, default browser launch if the ignoreDefaultBrowser is false. Default setting is null.
  • previewServer.ignoreDefaultBrowser: Controls whether launch default browser or not. Default setting is false.
  • previewServer.isWatchConfiguration: Controls whether resume the Web Server or not, when change settings. Default setting is true.
  • previewServer.port: Port number of the Web Server. If you set null, vscode-preview-server generate random number, and set port as random number. Default setting is 8080.
  • previewServer.proxy: Set proxy. This is usefull when execute web app on another web server. Default setting is '.
  • previewServer.sync: Controls whether synchronized or not. Default setting is true.
  • previewServer.ui: Port number of UI Page. Default setting is 3001.
  • startupProject: Name of startup project. This setting is meaningful only when in the workspace. This value is the name of the folder. When using this workspace and omitting this value, the first folder becomes the startup project Default setting is null.

Simple example

Settings with workspace

How to build locally

  1. Ensure that you have gulp-cli installed globally using npm i -g gulp-cli.
  2. Run npm install to bring in the dependencies.
  3. Run gulp build to produce i18n files.
  4. Press F5 key to launch extension.

Known Issues

Preview on side panel somethimes don't work with CDN, Link etc.

Acknowledgements

This extension use browsersync.I would like to thank browsersync team for useful work.

Lisence

Visual Studio For Web Development

Connect visual studio code to remote server,Visual studio code remote access,Visual Studio Code Local server,Remote file modify with Visual Studio Code,modif. Visual Studio has intellisense and has nice support for plug-ins, but is bulky. While, Visual Studio Code is a fast, powerful multi-language IDE with out of the box front-end development, but is a. Writing a web api is the perfect use case for using visual studio, if you are developing for something else than.net I personally use Visual Studio Code but each tool should be used for its purpose - Please remember to click 'Mark as Answer' the responsES that resolved your issue. In this tutorial for Visual Studio development using Node.js and Express, you create a simple Node.js web application, add some code, explore some features of the IDE, and run the app. If you haven't already installed Visual Studio, go to the Visual Studio downloads.





Comments are closed.