IONIC - 3.1 Installing VsCode
Click here for more videos available on our youtube channel !To build our project we need a text editor. A text editor is a piece of software dedicated to creating and editing text files. There are several options out there: Atom, Sublime Text or Visual Studio Code, among others. In this course we go with Visual Studio Code, but you are free to choose another editor according to your preferences — it does not change anything for the project itself. With a code editor you can build front-end pages in HTML, CSS or JavaScript, and on the back-end side you could work with languages such as PHP.
To install VS Code, head to the official Visual Studio Code website and click Download. The site detects your operating system and gives you the right build — Mac, Windows or Linux. Run the installer following the standard download protocol, which is straightforward.
A quick tour of Visual Studio Code
Once VS Code is installed and opened, the left sidebar gives you the main tools. Explorer lets you browse your folder tree. Search lets you find files and contents. Source Control is where Git integration lives, so all your version-controlled files appear here. Run and Debug is available when you need to launch a debug session. Then there is Extensions, which is one of the most important panels: it lets you install plugins that boost your productivity.
To start coding, use File > Open Folder, pick the folder you created on your desktop, then right-click in the Explorer and choose New File to create something like index.html. For Ionic and Angular projects, useful extensions include Angular Essentials and Angular Language Service, which provide ready-to-use snippets and tag suggestions to speed up writing Angular code. Extensions make your work easier and help organize and structure your code to improve quality.
This is why I use VS Code: it offers a huge ecosystem of extensions that you can install based on the ratings and the use cases they cover. The integrated terminal also lets you run commands without leaving the editor, which makes the whole experience very smooth. That is all for this video on installing Visual Studio Code — we will now move on to the practical part of the project.
Summary
This lesson introduces Visual Studio Code as the primary text editor for the Ionic course. It explains what text editors are, compares popular options (Atom, Sublime Text), and covers VS Code's download and installation from the official website. The lesson walks through the key interface components including the Explorer panel, Search section, Source Control, Extensions marketplace, and integrated Terminal, with emphasis on extensions' importance for improving code quality and productivity.
Key points
- Text editors are software tools designed to create and edit text-based files; VS Code is chosen for its extensive extension ecosystem
- VS Code's core sections: Explorer for file navigation, Search for locating files, Source Control for version management, and Extensions for enhancing functionality
- Extensions are critical tools that facilitate code writing, provide syntax suggestions for multiple languages (HTML, CSS, JavaScript, Angular), and improve code organization and structure
- The Terminal in VS Code enables direct command execution, making it easy to perform development tasks without switching applications
- VS Code is selected because it offers extensive customization through extensions, an intuitive and user-friendly interface, and strong support for multiple programming languages
FAQ
What are text editors and why do we need them?
Text editors are software applications designed to create and edit text-based files. They are essential for developers to write code in various languages (HTML, CSS, JavaScript for frontend; PHP for backend). VS Code is recommended for this course because it provides a professional environment with many useful features.
What extensions should I install in VS Code?
The lesson recommends installing Vue Language Service extension and Angular language support. These extensions provide code suggestions, syntax highlighting, and auto-completion specific to these frameworks, making development faster and more organized.
How do I create a new project folder in VS Code?
Create a new folder on your system using your file manager. Then in VS Code, use File → Open Folder, navigate to your folder, and click to open it. VS Code will then display the folder structure in the Explorer panel where you can create and manage your files.