Skip to main content

Integrated Development Environment (IDE) Setup

What is an IDE?

An IDE provides a unified workspace that helps developers write, test, and debug code efficiently. It replaces the need to use separate tools (e.g., standalone editors, compilers, and debuggers) by integrating them into a single application. GeeksforGeeks

Core Features

  • Code Editor: Syntax highlighting, autocomplete, and real‑time error detection. Wikipedia
  • Compiler/Interpreter: Converts source code into executable programs. Wikipedia
  • Debugger: Allows breakpoints, variable inspection, and step‑through execution. GitHub
  • Version Control Integration: Built‑in support for Git and other systems. GitHub
  • Build Automation: Tools to compile and package applications. Codecademy
  • Plugins/Extensions: Add support for additional languages and tools. Wikipedia

Benefits

  • Improved productivity: All tools in one place reduce context switching. GitHub
  • Fewer errors: Real‑time feedback and debugging tools catch issues early. GitHub
  • Better code organization: Project explorers and automation help manage large code bases.

IDE of Choice

My IDE of choice is Microsoft Visual Studio Code (vsCode). The vsCode is available for Windows 10, 11 or MacOS 10+. The product is free and can be downloaded at: Visual Studio Code Download.

Extensions

Given that vsCode is open source many extensions are available as desired. The following extensions are those that I use. Not all are necessary but most provide assistance in development. The list is divided into three groups. 

  1.  Essential - These extensions provide utilities that enhance the workspace environment essential to TNG structure. 
    • ftp-kr - Can be set to automatically upload files to the main server when saved. See Settings below.
    • GitHub Actions - GitHub Actions workflows and runs for github.com hosted repositories in VS Code
    • GitHub Copilot Chat - Provides AI support for development. Great tool. Basic Copilot is free. Expanded Copilot Pro (which I use) is available with subscription.
    • gitIgnore - Allows specific files/folders to be ignored by GitHub. See Settings below.
    • Live SASS Compiler - Compiles selected Sass/Scss to CSS upon file save. See Settings below.
  2. Recommended - These provide utilities that enhance the workspace but are not essential to the TNG structure.
    • Auto Rename Tag - Auto renames paired HTML tags. Change the opening tag and the closing tag automatically changes.
    • Prettier Code Formatter - Code formatter for Javascript, php, css, and json files. Ensures all files have standard formatting.
    • Print - Provides for printing of file or selected code.
    • Project Manager - Provides easy switching between multiple projects. See Settings below.
    • SCSS IntelliSense - Advanced autocompletion and refactoring support for SCSS.
    • TODO Highlight - Highlight TODOs, FIXMEs, and any keywords, annotations within the code.
  3. Your choice - These provide cosmetic user enhancements to the vsCode workspace and are left to your choice.
    • Better Comments - Improve code commenting by annotating with alert, informational, TODOs, and more!
    • Icons - Provides colored icons that display by the files in the navigation panel.
    • ESLint - Integrates ESLint JavaScript into vsCode.
    • Minify - Minifies Javascript files for faster page loads. Used on command, and (optionally) re-minify on save.
    • One Dark Pro - Theme for Visual Studio Code.

Settings

Some of the Extensions mentioned require a special setup. Note that the following code are json code formatted files. Json files have a couple of strict format restrictions. Be sure to read the chapter on JSON Files.

  • ftp-kr - Implementation of the ftp (File Transfer Protocol) extension requires a ftp-kr.json file in the .vscode folder. The element values of lines 2-4 must be changed for each project.
    • The element value of line 9 is the most critical. Indicating true indicates that after a file is saved the file will also be uploaded to the server. It is generally best to set this value to false.
    • To manually upload a file, right click the file name and select 'Upload this' from the generated dropdown menu.
    • Folders and files that should never be uploaded to the live server can be identified in the parameters of the ignore element. Note that the inclusion of the image file types prevents local images from being automatically uploaded.
{
  "host": "www.txfannin.org",
  "username": "txfannin",
  "password": "password",
  "remotePath": "public_html/",
  "protocol": "ftp",
  "port": 0,
  "fileNameEncoding": "utf8",
  "autoUpload": false,
  "autoDelete": false,
  "autoDownload": false,
  "ignore": [
    "/.vscode",
    ".git",
    ".html",
    ".jpeg",
    ".jpg",
    ".png",
    ".pdf"
  ]
}
  • Live SASS Compiler - The SASS compiler requires the code below to be included in the .vscode settings.json file. Only include lines 2-15 as 1 and 16 are already included in the settings.json file. Lines 10-12 causes the compiled file to be compressed and placed in the css/dist folder.
    • Note that the compiled expanded code is placed in the main css folder while the compiled compressed file is placed in the css/dist folder.
    • Note also that the liveSassCompiler.excludeList element in line 15 excludes the files in the scss/base folder from being compiled. 
{
  "liveSassCompile.settings.generateMap": false,
  "liveSassCompile.settings.formats": [
    {
	  "format": "expanded",
	  "extensionName": ".css",
	  "savePath": "/css"
	},
	{
	  "format": "compressed",
	  "extensionName": ".min.css",
	  "savePath": "/css/dist"
	}
  ],
  "liveSassCompile.settings.excludeList": ["/.unused/**", "/.vscode/**", "/scss/base/**"],
}

CAUTION: When the extension is installed the text "Watch Sass" appears at the bottom of the vsCode Workspace. Selecting the text will turn on the compiler and change the text to "Watching Sass."

Warning: Be sure to select the "Watch Sass" text to ensure your changes to the file get compiled. If you don't you may spend a lot of time trying to figure out why the changes did not activate. Trust me... I know!!

  • Project Manager - Although not identified as essential this extension is Highly Recommended. The extension is designed to facilitate the management of multiple projects. When working with 5 domains and 2 projects for each the movement between project can get very awkward. This extension provides ease of use out of caucus.
    • The extension displays a folder icon in the left panel icon menu list. Selecting the icon displays a tree list contains all included projects from a json settings file.
    • After installation select the folders icon to create an initial settings file. Along the top of the navigation panel are several icons. Select the pencil icon to displays the settings.json file in the editor panel.
    • The code below illustrates the json file elements for two of the ten projects in my current settings file.
[
  {
	"name": "A-Main",
	"rootPath": "c:\\wamp\\www\\STCounty",
	"paths": [],
	"tags": ["Delta"],
	"enabled": true
  },
  {
	"name": "B-Admin",
	"rootPath": "c:\\wamp\\www\\STCounty-Admin",
	"paths": [],
	"tags": ["Delta"],
	"enabled": true
  }
}

Use the name value to order the projects. Use the tags value to group the projects within a group. The list of projects are always listed in alpha order by tags-name. Thus, the use of the leading A-, B- in the name element. Set the rootPath value to point to each project folder on your local drive.

Note: the code presented must be in json format. The json structure has a couple of basic formatting rules. Be sure to read the json section in Book 3.

Back to top