Lars GrammelCode editing is an essential part of the development workflow. It includes all your actions in the editor before re-running your tests or checking how your changes affect the app you are working on:
- Adding, changing, and removing code
- Fixing syntax errors
- Fixing typos, e.g., in variable and function names
- Fixing linter errors and warnings
- Formatting
- Refactoring and restructuring code
Having minor friction points in the code editing process can lead to wasted time and frustration. You might have to switch context and lose your train of thought when, for example, you don't immediately see or understand a syntax error, you miss a potential bug, or your editor is suddenly full of formatting-related linter warnings.
Visual Studio Code provides a solid editing experience and offers many extensions you can install to take it to the next level. These six Visual Studio Code extensions (extension pack) help me stay in the flow and be productive when editing JavaScript and TypeScript code:
GitHub Copilot
GitHub Copilot suggests code completions for your current editor position. Its AI-generated suggestions range from short statement completion to full functions and classes.
Copilot is, for example, valuable for automatically generating boilerplate code, discovering APIs, and implementing common patterns quickly. It is also helpful for getting unstuck when it is not immediately clear what code is needed to solve a problem.
The code suggestions are only sometimes perfect and need review and refinement, and often I discard them entirely. Still, overall, Copilot boosts my productivity and helps me stay in the flow.
Prettier
Consistent formatting makes code easier to read and reduces accidental churn in pull requests. However, manually formatting your code is very tedious and error-prone. You can save time and keep your codebase consistently styled with an automated code formatter.
Prettier is an opinionated code formatter that many JavaScript and TypeScript projects use. It can format JavaScript, TypeScript, JSON, HTML, JSX (React), CSS, and more. Because it only offers a handful of configuration options, using Prettier can help avoid bike-shedding discussions about code formatting.
You can configure Prettier to format your code automatically when you save a file. If you want to minimize modifications to existing files, you can limit the formatting to the modified code. These are the Visual Studio Code settings for configuring Prettier:
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnSaveMode": "modificationsIfAvailable"
If you use a keyboard shortcut to save often, e.g., after each small code change, fix, or refactoring, you can even write poorly formatted code and rely on Prettier to fix it without much friction.
quick-lint-js
quick-lint-js is an excellent alternative to ESLint when you primarily want to check for code correctness. It provides a fixed set of rules for TypeScript and JavaScript and is extremely fast.
While quick-lint-js does not have the extensibility and the configuration options of ESLint, it helps you see common mistakes quickly and fix them. And since it focuses on correctness, quick-lint-js does not contain opinionated style rules and works very well with Prettier.
Code Spell Checker
Not all mistakes result in syntax errors or potential bugs. It is easy to have a typo in a variable, function, or class name without noticing it. However, this can lead to future issues with searchability and readability. Code Spell Checker helps you spot and correct typos early.
P42 JS Assistant
Small refactorings can help restructure and clean up your code while editing it. I have developed the P42 JS Assistant, which provides many automated code actions and suggests refactorings that make your code more readable and modern.
You can open a context menu with code actions in the editor by clicking on the lightbulb icon or using the quick-fix keyboard shortcut (Ctrl + . on Windows and Linux and ⌘ + . on Mac). You can use the code actions to make semantic changes to your code quickly and safely.
The refactoring suggestions show places where you can simplify or modernize your code. They can help you stay up-to-date with the latest JavaScript idioms and best practices. An underline with three dots indicates that a refactoring suggestion is available.
Error Lens
By default, the VS Code editor indicates the presence of errors, warnings, and other hints with various underlines. You need to hover over the underlined code section with the mouse cursor to be able to read the messages. This additional step can take time and requires you to use the mouse.
Error Lens shows the diagnostic messages on the same line in the editor, saving you time and keeping you in the flow. You can distinguish different message levels using their color. Errors are displayed in red, warnings in yellow, information messages in blue, and hints in green.
In addition to showing TypeScript and JavaScript errors, the message coloring makes Error Lens an excellent companion to quick-lint-js (error, warnings), Code Spell Checker (information), and the P42 JS Assistant (hint). You can toggle the display of different message types with the Error Lens: Toggle commands in the Command Palette.
Summary
Editing code is central to software development. With the above Visual Studio Code extensions, you can enhance your editing experience and make it easier to write high-quality code. You can conveniently install the extensions using the JavaScript and TypeScript Editing extension pack.
