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
Linting/Formatting
Developer Environment
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
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.
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 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 = trueAlthough 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-importsprettier-plugin-classnames@softonus/prettier-plugin-whitespace-remover@softonus/prettier-plugin-duplicate-removerprettier-plugin-merge