Skip to main content

Appendix B - IDE Setup

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

The extensions mentioned below are those that I use. Not all are absolutely necessary but most provide some sort of assistance in development.

  1. Auto Rename Tag - Auto renames paired HTML tags.
  2. Better Comments - Improve codes commenting by annotating with alert, informational, TODOs, and more!
  3. ESLint - Integrates ESLint JavaScript into VS
  4. frp-kr - Used to automatically upload files to the main server when saved. See Settings below.
  5. GitHub Actions - GitHub Actions workflows and runs for github.com hosted repositories in VS Code
  6. GitHub Copilot Chat - Provides AI support for development. Great tool. Basic Copilot is free. Expanded Copilot Pro is available with subscription.
  7. gitIgnore - Allows specific files/folders to be ignored by GitHub.
  8. HTML CSS Support - CSS Intellisense for HTML.
  9. Icons - Provides colored icons that display by the files in the navigation panel.
  10. Live SASS Compiler - Compile Sass or Scss to CSS at upon file save. See Settings below.
  11. Minify - Minify with command, and (optionally) re-minify on save.
  12. One Dark Pro - Theme for Visual Studio Code.
  13. Prettier Code Formatter - Code formatter.
  14. Print - Provides for printing of file or selected code.
  15. Project Manager - Provides easy switching between multiple projects. See Settings below.
  16. SCSS IntelliSense - Advanced autocompletion and refactoring support for SCSS.
  17. TODO Highlight - Highlight TODOs, FIXMEs, and any keywords, annotations within the code.
Settings

Some of the Extensions mentioned require a special setup. 

ftp-kr - Implementation of the ftp (File Transfer Protocol) extension requires a ftp-kr.json file in the .vscode directory. The element values of lines 2-5 must be changed for each project. The element value of line 9 is the most critical. Indicating true indicates that after a file save the file will also be uploaded to the server. It is generally best to set this value to false.

{
    "host": "www.txdelta.org",
    "username": "txdelta",
    "password": "!-k=vBHu1_O=",
    "remotePath": "public_html/",
    "protocol": "ftp",
    "port": 0,
    "fileNameEncoding": "utf8",
    "autoUpload": true,
    "autoDelete": false,
    "autoDownload": false,
    "ignore": [
        "/.unused",
        "/.vscode",
        ".git",
        ".html",
        ".jpeg",
        ".jpg",
        ".png",
        ".pdf"
    ]
}

Live SASS Compiler - The SASS compiler requires the code below included in the .vscode file settings.json. 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.

{
"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" at the bottom of the vsCode Workspace. Selecting this text will turn on the compiler and change the text to "Watching Sass."

Project Manager - This extension requires a JSON file that defines the structure of the various projects. The code below details the outline of just 2 of the 10 projects in the settings file. When installed an icon will appear at the bottom in the panel to the left of he navigation panel (looks like a group of file folders). Selecting this will display the baseline project list. Moving the mouse over the list will display some icons at the top. Select the pencil icon to edit the JSON file.

[
	{
		"name": "A-Main",
		"rootPath": "c:\\wamp\\www\\TXDelta",
		"paths": [],
		"tags": ["Delta"],
		"enabled": true
	},
	{
		"name": "B-Admin",
		"rootPath": "c:\\wamp\\www\\TXDelta-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. Set the rootPath value to point to each project folder on your local drive.

No Comments
Back to top