TypeScript Frontend Extension Pack

An opinionated selection of popular VS Code extensions for a TypeScript frontend.

Marketplace Link: https://marketplace.visualstudio.com/items?itemName=lukedavis.typescript-frontend-extension-pack

Extensions

Linting/Formatting

• ESLint
• Prettier - Code formatter

Developer Environment

• EditorConfig for VS Code

In-File

• Auto Rename Tag
  • When editing a tag name, it will edit the closing tag's name as well. Useful for renaming elements.
• Code Spell Checker
  • My favorite spell checker, also supports multiple languages.
• Import Cost
  • Displays the import size of your imports next to them. Incredibly useful to stay aware of bundle size.
• Tailwind CSS Intellisense

Quickstart

In order to make the most out of this extension pack, you will need to set up a few things on your project. Feel free to skip a section if you already have it set up.

ESLint (JS/TS Linter)

If you aren't familiar with ESLint, I would advise reading up on ESLint and it's package for TypeScript applications, typescript-eslint.

Setup

Create an ESLint config file in the root of your project. If using TypeScript, follow this quickstart guide from typescript-eslint.

EditorConfig

EditorConfig is great for keeping general consistency across your codebase, especially with multiple developers.

Setup

Create a .editorconfig file in the root of your project. I recommend this basic setup to start:

root = true

[*.{js,jsx,ts,tsx}]
charset = utf-8
indent_style = space
indent_size = 2

[*]
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

Prettier (Code Formatter)

Although most are probably familiar with Prettier, I highly advise creating a Prettier config file and customizing it to your taste if you haven't.

Setup

I recommend this basic starting configuration:

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2
}

Prettier with plugins can be incredibly powerful. These are the ones I use in my projects.

• prettier-plugin-tailwindcss
• @ianvsprettier-plugin-sort-imports
• prettier-plugin-classnames
• @softonus/prettier-plugin-whitespace-remover
• @softonus/prettier-plugin-duplicate-remover
• prettier-plugin-merge