An Interest In:
Web News this Week
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
VS Code: You don't need that extension
I was digging deeper in VS Code recently and made some interesting discoveries. There are quite a few features and settings that ably do the work of many popular extensions.
1. Auto renaming tags
Rename HTML and XML tag pairs with a single edit.
Extension
- Auto Rename Tag (3.3M downloads): "Automatically rename paired HTML/XML tag, same as Visual Studio IDE does."
Setting
The naming is a bit vague and obscure, this is probably why many people never find this one!
Editor: Rename on Type
: "Controls whether the editor auto renames on type." Default isfalse
.
settings.json
"editor.renameOnType": true
2. Synchronizing Settings
VS Code now supports synchronizing VS Code settings across different machines, this feature is available for preview in VS Code Insiders right now. It should reach the standard version very soon.
I am trying it out at the moment, and so far, so good.
Extensions
- Settings Sync (1.8M downloads): Syncs your settings, keybindings, snippets, extensions, and launch files to a GitHub Gist.
Feature and Settings
You read all about this feature in the User Guide. Below is what the Settings look like.
You can use a Microsoft or GitHub account, and select what exactly you want to sync.
3. Auto import modules
Automatically import JavaScript and TypeScript modules based on your code.
Extensions
- Auto import (1.1M downloads): Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.
- Move TS - Move TypeScript files and update relative imports (308K downloads): Supports moving typescript files and updating relative imports within the workspace.
- Auto Import - ES6, TS, JSX, TSX (157K downloads)
Settings
JavaScript > Suggest: Auto Imports
: "Enable/disable auto import suggestions. Requires using Typescript 2.6.1 or newer in workspace." Default value istrue
.TypeScript > Suggest: Auto Imports
: "Enable/disable auto import suggestions. Requires using Typescript 2.6.1 or newer in workspace." Default value istrue
.JavaScript > Update Imports on File Move: Enabled
: "Enable/disable automatic updating of import paths when you rename or move a file in VS Code. Require using TypeScript 2.9 or newer in the workspace." Default value is"prompt"
.TypeScript > Update Imports on File Move: Enabled
: "Enable/disable automatic updating of import paths when you rename or move a file in VS Code. Require using TypeScript 2.9 or newer in the workspace." Default value is"prompt"
.
settings.json
"javascript.suggest.autoImports": true,"typescript.suggest.autoImports": true,"javascript.updateImportsOnFileMove.enabled": "always","typescript.updateImportsOnFileMove.enabled": "always",
Also, if you would like your imports to be organised when you save, you can add the setting below. It will remove unused import statements, and arrange import statements with absolute paths on top. I am a big fan of these kind of set-and-forget tasks.
"editor.codeActionsOnSave": { "source.organizeImports": true}
4. Autotrimming
Remove trailing whitespace automatically.
The setting I suggest is not an exact like-for-like replacement: the extension trims whitespace while you edit; whereas the setting will perform the trimming on save.
Extension
- Autotrim (15K downloads): "Trailing whitespace often exists after editing lines of code, deleting trailing words and so forth. This extension tracks the line numbers where a cursor is active, and removes trailing tabs and spaces from those lines when they no longer have an active cursor."
Settings
Files : Trim Trailing Whitespace
: "When enabled, will trim trailing whitespace when saving a file." The default value isfalse
.
settings.json
"files.trimTrailingWhitespace": true
5. Fake text (Dummy text)
You may want to insert some fake text to fill out a webpage to see how your UI looks. You are probably familiar with "lorem ipsum" text generators.
Extension
- Lorem Ipsum (168K Downloads)
Feature
Emmet is built into VS Code and has a . Emmet abbreviation and snippet expansions are enabled by default in html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less and stylus files.
Type "lorem" and hit tab, and it will generate a 30-word dummy paragraph.
You can use it to generate multiple blocks of any kind. For example, "p*2>lorem" abbreviation would generate something like this:
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p><p> Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
You can enable Emmet for more languages if you wish, for example to include Emmet support for Vue, add the following to settings.json:
"emmet.includeLanguages": { "vue-html": "html"}
Conclusion
If I find some more of these along the way, I will update this article. If you have found anything similar, let me know!
Original Link: https://dev.to/robole/vs-code-you-don-t-need-that-extension-18d7
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To