Skip to main content

Codify Extension Pack

An important aspect of software development which is many students are not exposed to in school is the tooling and development environment. All modern software development is done in an IDE or text editor, with by far the most popular tool of choice for web development being Visual Studio Code. These extensions are specifically chosen to help you be more productive in this course, and in your future software development career.

You can view it in the vscode marketplace or search "Codify Education Extensions" to find them in the vscode extension explorer.

Essential Extensions​

Biome​

Biome is a code formatter an linter that is an alternative to prettier and eslint. Built using Rust, it runs faster than prettier and eslint while maintaining 97% feature compatibility.

To add biome, first install the dependency and initialize a project.

bun add --dev --exact @biomejs/biome
bunx biome init

This will create a biome.json config file in your project. The default configuration works well, but to add specific support for sorting tailwind classNames, we recommend copy and pasting the following configuration into your biome.json file.

biome.json
{
    "$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
    "organizeImports": {
        "enabled": true
    },
    "linter": {
        "enabled": true,
        "rules": {
            "nursery": {
                "useSortedClasses": {
                    "level": "error",
                    "options": {
                        "functions": ["clsx", "cva", "cn"]
                    }
                }
            },
            "recommended": true
        }
    },
    "formatter": {
        "enabled": true,
        "indentWidth": 4,
        "indentStyle": "space"
    },
    "files": {
        "ignore": ["src/components/ui/*.tsx"]
    }
}
What this configuration does differently from the default
  1. Uses spaces instead of the default tabs for indentation.
  2. Enforces the use of sorted tailwind classes, including in functions that take tailwind classes as arguments.
  3. Ignores files in the src/components/ui directory, which is where shadCN components are stored by default.

Finally, to both lint and format your files in a single line, add the following to your package.json scripts. This will check all files in the src directory and write the changes to the files.

package.json
{
    "scripts": {
        "biome": "bunx biome check --write --unsafe src/*",
    }
}

Then, install the vscode extension.

Console Ninja​

Console Ninja allows you to see both your server logs and your browser logs within your editor. The log is displayed next to the line that created the log.

GitHub Copilot + Copilot Chat​

GitHub Copilot is free for students. It is one of the most popular AI coding assistants. Copilot chat lets you interactively prompt copilot inside vscode.

Collaboration Extensions​

GitLens​

GitLens lets you view your commit history inline within vscode.

Live Share​

Live Share lets you turn vscode into a real time collaborative editor like google docs. Send an invite link and allow anyone to collaborate on your project in real time.

Quality of life extensions​

Pretty TypeScript Errors​

Pretty TypeScript Errors makes typescript errors more readable.

Code Spell Checker​

Code spell checker helps avoid bugs due to accidental typos.

Auto Rename Tag​

When editing a html tag, automatically edit the corresponding closing tag.

IntelliCode and IntelliCode API Usage​

IntelliCode provides enhanced auto completion, including for commonly used APIs.

Tailwind CSS IntelliSense​

Tailwind CSS IntelliSense provides auto completion for tailwind classes.

Better Comments​

Better Comments allows you to categorize your comments by color.

Material Icon Theme​

Material Icon Theme provides icons for your files and folders, making it easier to visually distinguish them within your editor.