# Integrated Development Environment (IDE) # 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](https://www.bing.com/ck/a?!&&p=5cc5f734c9eaa1a6a620ce33a568ca896d289f142011c238a044d781466dd1d4JmltdHM9MTc5MTg0OTYwMA&ptn=3&ver=2&hsh=4&fclid=2bcefe15-dec4-68c1-1288-e9e5df2a698c&u=a1aHR0cHM6Ly93d3cuZ2Vla3Nmb3JnZWVrcy5vcmcvYmxvZ3Mvd2hhdC1pcy1pZGUv&ntb=1) **Core Features** - **Code Editor:** Syntax highlighting, autocomplete, and real‑time error detection. [Wikipedia](https://www.bing.com/ck/a?!&&p=49462155e7d23e467216dc2afad825ba53479cee982ccd161033637caedd49fbJmltdHM9MTc5MTg0OTYwMA&ptn=3&ver=2&hsh=4&fclid=2bcefe15-dec4-68c1-1288-e9e5df2a698c&u=a1aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvSW50ZWdyYXRlZF9kZXZlbG9wbWVudF9lbnZpcm9ubWVudA&ntb=1) - **Compiler/Interpreter:** Converts source code into executable programs. [Wikipedia](https://www.bing.com/ck/a?!&&p=49462155e7d23e467216dc2afad825ba53479cee982ccd161033637caedd49fbJmltdHM9MTc5MTg0OTYwMA&ptn=3&ver=2&hsh=4&fclid=2bcefe15-dec4-68c1-1288-e9e5df2a698c&u=a1aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvSW50ZWdyYXRlZF9kZXZlbG9wbWVudF9lbnZpcm9ubWVudA&ntb=1) - **Debugger:** Allows breakpoints, variable inspection, and step‑through execution. [GitHub](https://www.bing.com/ck/a?!&&p=15a795ef375911c56fcda46e568df05fe29246ab778ac84eaf6a4e605fe88032JmltdHM9MTc5MTg0OTYwMA&ptn=3&ver=2&hsh=4&fclid=2bcefe15-dec4-68c1-1288-e9e5df2a698c&u=a1aHR0cHM6Ly9naXRodWIuY29tL3Jlc291cmNlcy9hcnRpY2xlcy93aGF0LWlzLWFuLWlkZQ&ntb=1) - **Version Control Integration:** Built‑in support for Git and other systems. [GitHub](https://www.bing.com/ck/a?!&&p=15a795ef375911c56fcda46e568df05fe29246ab778ac84eaf6a4e605fe88032JmltdHM9MTc5MTg0OTYwMA&ptn=3&ver=2&hsh=4&fclid=2bcefe15-dec4-68c1-1288-e9e5df2a698c&u=a1aHR0cHM6Ly9naXRodWIuY29tL3Jlc291cmNlcy9hcnRpY2xlcy93aGF0LWlzLWFuLWlkZQ&ntb=1) - **Build Automation:** Tools to compile and package applications. [Codecademy](https://www.bing.com/ck/a?!&&p=797aaa278483c3038d82a5e220180ffc4d6913cf430d6f2988e580c007531723JmltdHM9MTc5MTg0OTYwMA&ptn=3&ver=2&hsh=4&fclid=2bcefe15-dec4-68c1-1288-e9e5df2a698c&u=a1aHR0cHM6Ly93d3cuY29kZWNhZGVteS5jb20vYXJ0aWNsZS93aGF0LWlzLWlkZQ&ntb=1) - **Plugins/Extensions:** Add support for additional languages and tools. [Wikipedia](https://www.bing.com/ck/a?!&&p=49462155e7d23e467216dc2afad825ba53479cee982ccd161033637caedd49fbJmltdHM9MTc5MTg0OTYwMA&ptn=3&ver=2&hsh=4&fclid=2bcefe15-dec4-68c1-1288-e9e5df2a698c&u=a1aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvSW50ZWdyYXRlZF9kZXZlbG9wbWVudF9lbnZpcm9ubWVudA&ntb=1) **Benefits** - **Improved productivity:** All tools in one place reduce context switching. [GitHub](https://www.bing.com/ck/a?!&&p=15a795ef375911c56fcda46e568df05fe29246ab778ac84eaf6a4e605fe88032JmltdHM9MTc5MTg0OTYwMA&ptn=3&ver=2&hsh=4&fclid=2bcefe15-dec4-68c1-1288-e9e5df2a698c&u=a1aHR0cHM6Ly9naXRodWIuY29tL3Jlc291cmNlcy9hcnRpY2xlcy93aGF0LWlzLWFuLWlkZQ&ntb=1) - **Fewer errors:** Real‑time feedback and debugging tools catch issues early. [GitHub](https://www.bing.com/ck/a?!&&p=15a795ef375911c56fcda46e568df05fe29246ab778ac84eaf6a4e605fe88032JmltdHM9MTc5MTg0OTYwMA&ptn=3&ver=2&hsh=4&fclid=2bcefe15-dec4-68c1-1288-e9e5df2a698c&u=a1aHR0cHM6Ly9naXRodWIuY29tL3Jlc291cmNlcy9hcnRpY2xlcy93aGF0LWlzLWFuLWlkZQ&ntb=1) - **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](https://code.visualstudio.com/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. ```JSON { "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. ```JSON { "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. ```JSON [ { "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. # IDE Usage Builds ```JSON { "version": "2.0.0", "tasks": [ { "label": "Run Build Java Functions", "type": "shell", "command": "c:\\wamp\\bin\\php\\php8.3.0\\php.exe c:\\wamp\\www\\MSHolmes\\assets\\builds\\buildAllFunctionsJava.php", "problemMatcher": [], "group": "build" }, { "label": "Run Build PHP Functions", "type": "shell", "command": "c:\\wamp\\bin\\php\\php8.3.0\\php.exe c:\\wamp\\www\\MSHolmes\\assets\\builds\\buildAllFunctionsPhp.php", "problemMatcher": [], "group": "build" }, { "label": "Run Build CSS Base", "type": "shell", "command": "c:\\wamp\\bin\\php\\php8.3.0\\php.exe c:\\wamp\\www\\MSHolmes\\assets\\builds\\buildAllStylesCSS.php", "problemMatcher": [], "group": "build" }, { "label": "Run Build PHP Configs", "type": "shell", "command": "c:\\wamp\\bin\\php\\php8.3.0\\php.exe c:\\wamp\\www\\MSHolmes\\assets\\builds\\buildAllConfigsPhp.php", "problemMatcher": [], "group": "build" }, { "label": "Run Build All", "dependsOn": [ "Run Build Java Functions", "Run Build PHP Functions", "Run Build CSS Base", "Run Build PHP Configs" ], "group": "build", "problemMatcher": [] } ] } ``` The IDE is very helpful by providing extensions and tasks for streamlining the work processes. The following details the usage of these enhancements. ##### **Extensions** **ftp-kr** - This extension controls the upload of files to the live server based on the configuration parameters established in the file *ftp-kr.json*. The json file below details the elements of the file for Holmes county. ```JSON { "host": "www.msholmes.org", "username": "msholmes", "password": "password", "remotePath": "public_html", "protocol": "ftp", "port": 21, "fileNameEncoding": "utf8", "autoUpload": true, "autoDelete": false, "autoDownload": false, "ignoreRemoteModification": true, "ignore": [ "/.vscode", "/.git", "/images/*", "/scss/*", "/sitemaps/*", ".html", "/builds/*", "/assets/functions_java/_*.js", "/assets/functions_php/_*.php", "/assets/json/*_database.json", "/css/*.css" ] } ``` --- **Live Sass Compiler** - This extension is used to control the compiling of scss files. The extension will automatically compile .scss files when saved, To exclude a file from being compiled include the folder/files path in the *liveSassCompile.settings.excludeList* of the settings.json file. Note that specifically excluded from compiling are all files in the *scss/mixins* folder, all files that begin with the underline character in the *scss/base* folder, and all files in the *scss/common* folder. The *mixin* and *common* files are included in .scss files as needed and thus don't need to be compiled separately. Likewise the individual *base* files are concatenated into the single file *allStylesCSS.css*. The code shown below is on the *liveSassCompile* portion of the total *settings.json* file. ```JSON { "liveSassCompile.settings.generateMap": false, "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "/css" }, { "format": "compressed", "extensionName": ".min.css", "savePath": "/css/dist" } ], "liveSassCompile.settings.excludeList": [ "/.vscode/**", "/scss/mixins/**", "/scss/base/_*.scss", "/scss/common/**" ] } ``` --- **Project Manager** - The suite of projects that management includes 6 TNG projects (Fannin, Holmes, and Delta each with a main and admin), plus 2 non-TNG projects (Willow Wild, Delta-Library each with a main and admin). With the extension installed a json file similar to the one below can be included for all projects. Note that all entered projects are listed in *tags* and *name* alpha order, so *tag* and *name* accordingly. The *rootPath* is the file path to the project folder on your local computer. ```JSON [ { "name": "A-Main", "rootPath": "c:\\wamp\\www\\TXFannin", "paths": [], "tags": ["Fannin"], "enabled": true }, { "name": "B-Admin", "rootPath": "c:\\wamp\\www\\TXFannin-Admin", "paths": [], "tags": ["Fannin"], "enabled": true } ] ``` --- - **GitHub Actions** - The GitHub provides the mechanism to control all files of a project. GitHub controls the sourcing and versioning of each file. Specific files can be excluded by including the folder/file in a .gitIgnore file. Note that in most cases whole folders are excluded as the files contained can be easily restored. ```JSON .md-docs/ .vscode/ css/ images/ scripts/ sitemaps/ jsconfig.json ``` --- ##### **Tasks** **Builds** - There are 4 tasks that are that are used to help 'build' files for the main site. They are as follows: