Embracing your Code Editor

Photo by Frame Harirak on Unsplash

Code editors are fancy text editors with built-in features for software development. Being familiar with your code editor of choice will boost productivity, code quality and make programming a lot more enjoyable. There are many code editors out there each with their unique advantages and disadvantages. For the most part, it doesn't matter which one you use so long as you are comfortable and familiar with your editor of choice.

In this lesson, we will focus on Visual Studio Code (or VS Code for short), a popular code editor known for its simplicity and integrations. You can download VS Code from the official webpage here.

Let's talk about some of our favorite VS Code features and integrations.

Syntax Highlighting

Syntax highlighting is a common feature amongst all code editors. It makes reading code a lot easier. Make sure that the proper extension is selected so that the right syntax is highlighted. Here, we are working with a Python file. The editor recognizes that there is an import statement and that file.csv is a string literal.


Linting

Linting is a tool used to detect syntax, logical and formatting errors in the code. The linter parses through a file to underline potential problems.

Here is a sample file with some obvious mistakes. Critical problems that prevent the code from running are underlined in red while warnings are underlined in yellow.


We can also hover over the underlined issues for a more detailed problem description.


Click on the error count button at the bottom left to see all issues detected in the code.


VS Code uses pylint as the default linter for Python code. To change your python linter:

  • press CTRL/CMD + SHIFT + P to open the command palette
  • search for Linter
  • click on Python: select linter and select your linter of choice

  • Git Integration

    My personal favorite integration is the Git integration. This lets us use common git functionalities inside the editor. To access this integration, click on the third button on the right navigation bar.

    Switching Branches:


    Commit and Push changes:


    View file changes:


    Navigation

    Code Navigation helps us navigate the codebase more efficiently even if we don't know where all of the files are. In this gif, I am using code navigation to see where the sample method is defined.


    We can also navigate files within a codebase using CTRL/CMD + P and searching for the file name.


    Built-in Terminal

    Most code editors, including VS Code, comes with their own terminals. We can access the terminal by clicking New Terminal in the Terminal drop down menu.


    We can run the file using this terminal.


    We can also run highlighted lines using the SHIFT + ENTER shortcut or by selecting the option after right clicking the lines.



    There are a lot more integrations out there than the ones mentioned above. Anyone can build their own open source integration to make development easier.

    Check out the VS Code cheat sheet for productivity boosts.

  • macOS
  • Windows
  • Linux



  • « Previous: Introduction to GitTutorialsNext: Data Representation »