Code 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
- 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.
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.
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.
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.
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.
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.
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.
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.
Error Lens: Toggle commands in the Command Palette.