Ionic Firebase App
Published in

Ionic Firebase App

Visual Studio Code / Coder

Visual Code Editor Logo

What is visual studio code (VS Code)?

It is an open source code editor that developed by Microsoft and it’s team. It is very light weight and easy to use for application development. Now as per developer choice it is becoming more popular in developer community. Specially since web and cross-platforms development (like Flutter, Ionic, React Native, Angular, Nodejs and many more) come to us it has been getting more attention with developer and it’s community increasing day-to-day basis around the world. As well their is a huge developer community that has been developing the 3rd party integration plugin tools that help you to build and organized your code in a professional way.

Benefits of Visual Studio Code Editor:

These are the following benefits of VS Code:

  1. Open-Source: It is an open source that developed by Microsoft and easy to use.
  2. Huge Community: It has been growing it’s huge community world wise, so if you have any quires then there a millions of users can help you out to resolve you issues.
  3. Easy UI/UX: It has easy UI/UX with navigation menu bar that helps you to find all options as well as organized your code and build nice application.
  4. In Build Terminal: It has in build console terminal that help you run the command inside the visual studio code itself instead of open your system console.
  5. Plugins: Visual Editor has huge number of inbuilt and third party plugin that help you to install all features of programming inside that only. For example if you are looking to build Flutter app then inside that only you can install Dart and Flutter and configure with your system and start building your application as well as there are lot of others plugins that helps you organized and do formatting of codes.
  6. Light Weight: Visual Studio Code it is very light weight compare to others editors. Suppose if you would like to write a code for Flutter or mobile app development then we usually use Android Studio but it is required high performance and memory system else it will keep crashing, But Visual Studio Code don’t required that.

And there are many more features are available you can keep exploring.

Where to Download Visual Studio Code?

To download this you have to go to their official site here: https://code.visualstudio.com/download

Now based on your operating system choose your editor and download and install in your system.

Now here i am giving the example of Setup and installation guide for Flutter on VS Code.

You can find this on Flutter official website at flutter.dev

Note: You can try Flutter open-source project at https://www.ionicfirebaseapp.com/products/Flutter-Todo-app

First download form above link and install that. Once you install then open your VS Code then update your extension:

Updating the extension

Updates to the extensions are shipped on a regular basis. By default, VS Code automatically updates extensions when updates are available.

To install updates manually:

  1. Click the Extensions button in the Side Bar.
  2. If the Flutter extension is shown with an available update, click the update button and then the reload button.
  3. Restart VS Code.

Creating projects

There are a couple ways to create a new project.

Creating a new project

To create a new Flutter project from the Flutter starter app template:

  1. Open the Command Palette (Ctrl+Shift+P (Cmd+Shift+P on macOS)).
  2. Select the Flutter: New Project command and press Enter.
  3. Enter your desired Project name.
  4. Select a Project location.

Opening a project from existing source code

To open an existing Flutter project:

  1. Click File > Open from the main IDE window.
  2. Browse to the directory holding your existing Flutter source code files.
  3. Click Open.

Editing code and viewing issues

The Flutter extension performs code analysis that enables the following:

  • Syntax highlighting
  • Code completions based on rich type analysis
  • Navigating to type declarations (Go to Definition or F12), and finding type usages (Find All References or Shift+F12)
  • Viewing all current source code problems (View > Problems or Ctrl+Shift+M (Cmd+Shift+M on macOS)) Any analysis issues are shown in the Problems pane:
Dart file

Running and debugging

Note: You can debug your app in a couple of ways.

  • Using DevTools, a suite of debugging and profiling tools that run in a browser. DevTools replaces the previous browser-based profiling tool, Observatory, and includes functionality previously only available to Android Studio and IntelliJ, such as the Flutter inspector.
  • Using VS Code’s built-in debugging features, such as setting breakpoints.

The instructions below describe features available in VS Code. For information on using launching DevTools, see Running DevTools from VS Code in the DevTools docs.

Start debugging by clicking Debug > Start Debugging from the main IDE window, or press F5.

Selecting a target device

When a Flutter project is open in VS Code, you should see a set of Flutter specific entries in the status bar, including a Flutter SDK version and a device name (or the message No Devices).

Note:

  • If you do not see a Flutter version number or device info, your project might not have been detected as a Flutter project. Ensure that the folder that contains your pubspec.yaml is inside a VS Code Workspace Folder.
  • If the status bar reads No Devices, Flutter has not been able to discover any connected iOS or Android devices or simulators. You need to connect a device, or start a simulator or emulator, to proceed.

The Flutter extension automatically selects the last device connected. However, if you have multiple devices/simulators connected, click device in the status bar to see a pick-list at the top of the screen. Select the device you want to use for running or debugging.

Note: If you want to try running your app on the web, but the Chrome (web) target doesn’t appear in the list of targets, make sure you’ve enabled web, as described in Building a web application.

Run app without breakpoints

  1. Click Debug > Start Without Debugging in the main IDE window, or press Ctrl+F5. The status bar turns orange to show you are in a debug session.

Run app with breakpoints

  1. If desired, set breakpoints in your source code.
  2. Click Debug > Start Debugging in the main IDE window, or press F5.
  • The left Debug Sidebar shows stack frames and variables.
  • The bottom Debug Console pane shows detailed logging output.
  • Debugging is based on a default launch configuration. To customize, click the cog at the top of the Debug Sidebar to create a launch.json file. You can then modify the values.

Fast edit and refresh development cycle

Flutter offers a best-in-class developer cycle enabling you to see the effect of your changes almost instantly with the Stateful Hot Reload feature. See Using hot reload for details.

Advanced debugging

Debugging visual layout issues

During a debug session, several additional debugging commands are added to the Command Palette and to the Flutter inspector. When space is limited, the icon is used as the visual version of the label.

Toggle Baseline Painting

Causes each RenderBox to paint a line at each of its baselines.Toggle Repaint Rainbow

Shows rotating colors on layers when repainting.Toggle Slow Animations

Slows down animations to enable visual inspection.Toggle Debug Mode Banner

Hides the debug mode banner even when running a debug build.

Debugging external libraries

By default, debugging an external library is disabled in the Flutter extension. To enable:

  1. Select Settings > Extensions > Dart Configuration.
  2. Check the Debug External Libraries option.

Assists & quick fixes

Assists are code changes related to a certain code identifier. A number of these are available when the cursor is placed on a Flutter widget identifier, as indicated by the yellow lightbulb icon. The assist can be invoked by clicking the lightbulb, or by using the keyboard shortcut Ctrl+. (Cmd+. on Mac), as illustrated here:

Quick fixes are similar, only they are shown with a piece of code has an error and they can assist in correcting it.

Wrap with new widget assistThis can be used when you have a widget that you want to wrap in a surrounding widget, for example if you want to wrap a widget in a Row or Column.Wrap widget list with new widget assistSimilar to the assist above, but for wrapping an existing list of widgets rather than an individual widget.Convert child to children assistChanges a child argument to a children argument, and wraps the argument value in a list.

Snippets

Snippets can be used to speed up entering typical code structures. They are invoked by typing their prefix, and then selecting from the code completion window:

The Flutter extension includes the following snippets:

  • Prefix stless: Create a new subclass of StatelessWidget.
  • Prefix stful: Create a new subclass of StatefulWidget and its associated State subclass.
  • Prefix stanim: Create a new subclass of StatefulWidget, and its associated State subclass including a field initialized with an AnimationController.

You can also define custom snippets by executing Configure User Snippets from the Command Palette.

Keyboard shortcuts

Hot reloadDuring a debug session, clicking the Restart button on the Debug Toolbar, or pressing Ctrl+Shift+F5 (Cmd+Shift+F5 on macOS) performs a hot reload.

Keyboard mappings can be changed by executing the Open Keyboard Shortcuts command from the Command Palette.

Hot reload vs. hot restart

Hot reload works by injecting updated source code files into the running Dart VM (Virtual Machine). This includes not only adding new classes, but also adding methods and fields to existing classes, and changing existing functions. A few types of code changes cannot be hot reloaded though:

  • Global variable initializers
  • Static field initializers
  • The main() method of the app

For these changes, fully restart your application without having to end your debugging session. To perform a hot restart, run the Flutter: Hot Restart command from the Command Palette, or press Ctrl+F5.

Visual Studio Coder love to build application with it, So are you looking for best open source editor then you should try VS code. And if you have any extra tips and guide then let us know in comment section.

And Follow us Ionic Firebase App for more updates.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store