50 VS Code Hints Tips and Tricks of the Week from 2020 Modernize or Die CFML News Podcast
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
50 VS Code Hints Tips and Tricks of the Week from 2020 Modernize or Die® CFML News Podcast (https://www.ortussolutions.com/blog /50-vs-code-hints-tips-and-tricks-of-the-week- from-2020-modernize-or-die-cfml-news-podcast) Paulina Lainez Jan 12, 2021 By: Gavin Pickin VS Code is the hottest IDE out there, and the most asked question I get at every conference I attend is, "what VS Code extensions are you using?". Since I got this question so much, we decided to dedicate a portion of our CFML News Podcast to VS Code Hints, Tips and Tricks. We had 50 episodes in 2020, each with a VS Code hint tip or trick, so we wanted to give you a way to see all of them in one place, so here they are. 1/7/20 - Surround By Mehmet Yatk - 17,978 installs - 5 stars A simple yet powerful extension to add wrapper templates around your code blocks. Features:
- Supports multi selections - Fully customizable - Custom wrapper functions - You can assign shortcuts for each wrapper function separately - Nicely formatted https://marketplace.visualstudio.com/items?itemName=yatki.vscode- surround (https://marketplace.visualstudio.com/items? itemName=yatki.vscode-surround) 1/14/20 - CFLint By KamasamaK - 5,085 installs CFLint is a linter for CFML and you can find more information at its GitHub repository. This extension integrates CFLint into VS Code. Recommend using Ortus Solution’s CFLint conventions https://github.com/Ortus-Solutions/coding-standards (https://github. com/Ortus-Solutions/coding-standards) https://marketplace.visualstudio.com/items?itemName=KamasamaK. vscode-cflint (https://marketplace.visualstudio.com/items? itemName=KamasamaK.vscode-cflint) 1/21/20 Cloak by John Papa johnpapa.vscode-cloak
Cloak hides/shows your secrets in environment files, to avoid
accidentally sharing them with everyone who sees your screen.
Cloak can be useful if you:
present on stage
stream on Twitch or YouTube
record screancasts of your code
https://marketplace.visualstudio.com/items?itemName=johnpapa.
vscode-cloak (https://marketplace.visualstudio.com/items?
itemName=johnpapa.vscode-cloak)
1/28/20 Vue Peek by Dario Fuzinato
dariofuzinato.vue-peek
236,950 installs - 5 stars
Allows peek and goto definition for Vue single-file components.
This extension extends Vue code editing with Go To Definition and
Peek Definition support for components and filenames in single-file
components with a .vue extension. It allows quickly jumping to or
peeking into files that are referenced as components (from template),
or as module imports (from script).https://marketplace.visualstudio.com/items?itemName=dariofuzinato. vue-peek (https://marketplace.visualstudio.com/items? itemName=dariofuzinato.vue-peek) 2/4/20 Auto Close Tag by Jun Han Formulahendry.auto-close-tag - 2,366,279 installs - 4.5 stars Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does. From VS Code 1.16, it has built-in close tag support for HTML, Handlebars and Razor files. This extension is enabled for other languages like XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX and so on. It is configurable. https://marketplace.visualstudio.com/items? itemName=formulahendry.auto-close-tag (https://marketplace. visualstudio.com/items?itemName=formulahendry.auto-close-tag) 2/11/20 - Local History by xyz Xyz.local-history - 135,494 installs - 4 stars A visual source code plugin for maintaining local history of files.
Every time you modify a file, a copy of the old contents is kept in the local history. At any time, you can compare a file with any older version from the history. It can help you out when you change or delete a file by accident. The history can also help you out when your workspace has a catastrophic problem. Each file revision is stored in a separate file inside the .history folder of your workspace directory (you can also configure another location, see local-history.path). e.g., . history/foo/bar/myFile_20151212205930.ts https://marketplace.visualstudio.com/items?itemName=xyz.local- history&fbclid=IwAR28gj5agl9qSEemnb2hqSi6N_6jJsVBb_QdOmL0w4xXifn6rD (https://marketplace.visualstudio.com/items?itemName=xyz.local- history&fbclid=IwAR28gj5agl9qSEemnb2hqSi6N_6jJsVBb_QdOmL0w4xXifn6rD ) 2/18/20 - Todo Tree by Gruntfuggly Gruntfuggly.todo-tree - 388,791 installs - 5 stars This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the explorer pane. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO. Found TODOs can also be highlighted in open files.
https://marketplace.visualstudio.com/items?itemName=Gruntfuggly. todo-tree (https://marketplace.visualstudio.com/items? itemName=Gruntfuggly.todo-tree) 2/25/20 - Rainglow by Dayle Rees Daylerees.rainglow - 123,183 installs - 5 stars Rainglow is a collection of color themes for a number of different editors and platforms. This repository consists of 320+ syntax and UI themes for Visual Studio Code (https://code.visualstudio.com/). https://rainglow.io/ (https://rainglow.io/) Preview: https://rainglow.io/preview/ (https://rainglow.io/preview/) https://marketplace.visualstudio.com/items?itemName=daylerees. rainglow (https://marketplace.visualstudio.com/items? itemName=daylerees.rainglow) 3/3/20 - REST Client by Huachao Mao Humao.rest-client - 799,202 installs - 5 stars
REST Client allows you to send HTTP request and view the response in
Visual Studio Code directly.
A few of the many features available:
Send/Cancel/Rerun HTTP request in editor and view response
in a separate pane with syntax highlight
Send cURL command in editor and copy HTTP request as
cURL command
Auto save and view/clear request history
Organize MULTIPLE requests in the same file (separated by
### delimiter)
View image response directly in pane
Save raw response and response body only to local disk
Fold and unfold response body
Customize font(size/family/weight) in response preview
https://marketplace.visualstudio.com/items?itemName=humao.rest-
client (https://marketplace.visualstudio.com/items?itemName=humao.
rest-client)
3/10/20 Code Tour by Live Share Contrib
Vsls-contrib.codetour - 345 installs - 5 starsCode Tour is a Visual Studio Code extension, which allows you to record and playback guided walkthroughs of your codebases. It's like a virtual brownbag, that can make it easier to onboard to a new project/feature area, visualize bug reports, or understand the context of a code review/PR change. A "code tour" is simply a series of interactive steps, each of which are associated with a specific file/line, and include a description of the respective code. This allows developers to clone a repo, and then immediately start learning it, without needing to refer to a CONTRIBUTING.md file and/or rely on help from others. https://marketplace.visualstudio.com/items?itemName=vsls-contrib. codetour (https://marketplace.visualstudio.com/items? itemName=vsls-contrib.codetour) 3/17/20 - Bookmarks by Alessandro Fragnani alefragnani.Bookmarks - 749,669 installs - 5 stars It helps you to navigate in your code, moving between important positions easily and quickly. No more need to search for code. It also supports a set of selection commands, which allows you to select bookmarked lines and regions between bookmarked lines. It's really useful for log file analysis.
https://marketplace.visualstudio.com/items?itemName=alefragnani. Bookmarks (https://marketplace.visualstudio.com/items? itemName=alefragnani.Bookmarks) 3/24/20 - Sort Lines - built into VS Code There are lots of extensions but VS Code has a sort lines function built in. When documenting arguments for functions we wished it was easy to alphabetize, and it was. One click and everything was ordered for us. Now we just need to find something to sort a Javascript object by Key To use: Select the lines you wish to Sort, and Press F1 ( Windows ) and then type Sort Lines ( Ascending or Descending ) 3/31/20 - VS Code Remote Development Visual Studio Code Remote Development allows you to use a container, remote machine, or the Windows Subsystem for Linux (WSL) as a full-featured development environment.
No source code needs to be on your local machine to get these benefits. Each extension in the Remote Development extension pack can run commands and other extensions directly inside a container, in WSL, or on a remote machine so that everything feels like it does when you run locally. https://code.visualstudio.com/docs/remote/remote-overview ( https://code.visualstudio.com/docs/remote/remote-overview) 4/7/20 - Git Commands Feature in GitLens 10 'Git Commands' from the GitLens extension provides a visual interface for #git operations. This lets you perform operations beyond what VS Code's UI supports without having to remember git's cli Adds a Git Commands command (gitlens.gitCommands) to provide guided (step-by-step) access to common Git commands and their flags Quickly navigate and execute Git commands through easy-to-use menus where each command requires an explicit confirm step before executing
GitLens supercharges the Git capabilities built into Visual Studio Code.
It helps you to visualize code authorship at a glance via Git blame
annotations and code lens, seamlessly navigate and explore Git
repositories, gain valuable insights via powerful comparison
commands, and so much more.
https://marketplace.visualstudio.com/items?itemName=eamodio.
gitlens
4/14/20 - Markdown All in One
By Yu Zhang
Yzhang.markdown-all-in-on 1,315,949 installs 5 stars
All you need for Markdown (keyboard shortcuts, table of contents,
auto preview and more).
Keyboard shortcuts (toggle bold, italic, code span,
strikethrough and heading)
Table of contents
List editing
Print Markdown to HTML
GitHub Flavored Markdown
Auto completionshttps://marketplace.visualstudio.com/items?itemName=yzhang.
markdown-all-in-one (https://marketplace.visualstudio.com/items?
itemName=yzhang.markdown-all-in-one)
4/21/20 CommandBox by Ortus Solutions
Brings CommandBox features and helpers into VS Code
Features
Scripts
Script Explorer
Run Scripts from the Editor
Run Scripts from a folder in explorer
Server.json
Schema
Property Completion
Property Hover
Box.json
Schema
Property Completion
Property Hover
Dependencies
Slug Completion
Version Completion
HoverLots of settings for your customerization, including customerization for ForgeBox enterprise https://marketplace.visualstudio.com/items?itemName=ortus- solutions.vscode-commandbox (https://marketplace.visualstudio.com /items?itemName=ortus-solutions.vscode-commandbox) 4/28/20 - VS Code EOL Sohamkamani.code-eol - 14,246 installs This is an extension to display EOL (new line) characters in your code. Supports \n, \r\n, and \r returns https://marketplace.visualstudio.com/items? itemName=sohamkamani.code-eol (https://marketplace.visualstudio. com/items?itemName=sohamkamani.code-eol) 5/5/20 - Path Autocomplete Ionutvmi.path-autocomplete - 490,245 installs
Provides path completion for visual studio code.
Features
it supports relative paths (starting with ./)
it supports absolute path to the workspace (starting with /)
it supports absolute path to the file system (starts with: C:)
it supports paths relative to the user folder (starts with ~)
it supports items exclusions via the path-autocomplete.
excludedItems option
it supports npm packages (starting with a-z and not relative to
disk)
it supports automatic suggestion after selecting a folder
it supports custom mappings via the path-autocomplete.
pathMappings option
it supports custom transformations to the inserted text via
the path-autocomplete.transformations
it supports windows paths with the path-autocomplete.
useBackslash
https://marketplace.visualstudio.com/items?itemName=ionutvmi.
path-autocomplete (https://marketplace.visualstudio.com/items?
itemName=ionutvmi.path-autocomplete)
5/12/20 Draw.io VS Code Integration by Henning Dieterichshediet.vscode-drawio
This extension integrates Draw.io into VS Code.
Features
Edit .drawio or .dio files in the Draw.io editor, as xml or both.
To create a new diagram, simply create an empty *.drawio
file and open it!
Uses an offline version of Draw.io by default.
An online Draw.io url can be configured.
https://marketplace.visualstudio.com/items?itemName=hediet.
vscode-drawio (https://marketplace.visualstudio.com/items?
itemName=hediet.vscode-drawio)
5/19/20 Prettier - Code formatter by Esben Petersen
Esbenp.prettier-vscode - 6,545,634 installs - 4 stars
Prettier is an opinionated code formatter. It enforces a consistent
style by parsing your code and re-printing it with its own rules that
take the maximum line length into account, wrapping code when
necessary.JavaScript · TypeScript · Flow · JSX · JSON CSS · SCSS · Less HTML · Vue · Angular GraphQL · Markdown · YAML https://marketplace.visualstudio.com/items?itemName=esbenp. prettier-vscode (https://marketplace.visualstudio.com/items? itemName=esbenp.prettier-vscode) 5/26/20 Codespaces on Github by Microsoft How is Codespaces different from VS Code? Codespaces sets up a cloud-hosted, containerized, and customizable VS Code environment. After set up, you can connect to a codespace through the browser or through VS Code. Develop from anywhere, anytime With your development in the cloud, you can contribute code from any device, using VS Code or your browser. Dependencies, decluttered
Contribute to projects without complicating your local setup. Spin up dev environments with a click—even for projects you haven't worked on before—and switch between them with ease. How can I configure a codespace? Inside of a codespace, you’ll have access to the Visual Studio Code Marketplace, and you can preload any extensions you want loaded at launch using a devcontainer configuration file. You can also personalize your codespace by pulling in dotfiles. https://github.com/features/codespaces/ (https://github.com/features /codespaces/) 6/2/20 HTML CSS Support ecmel.vscode-html-css - 3,319,662 installs - 4 stars Visual Studio Code CSS Support for HTML Documents Missing CSS support for HTML documents. Features Class attribute completion. Id attribute completion. Supports Zen Coding completion for class and id attributes.
Scans workspace folder for css and scss files. Supports remote css files. Uses vscode-css-languageservice. https://marketplace.visualstudio.com/items?itemName=ecmel.vscode- html-css (https://marketplace.visualstudio.com/items? itemName=ecmel.vscode-html-css) 6/9/20 Settings Sync by Shan Khan 1,716,343 installs - 4.5 stars Since VS Code’s setting Sync is insider only, 1.8 million have installed this version. Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist. https://marketplace.visualstudio.com/items?itemName=Shan.code- settings-sync (https://marketplace.visualstudio.com/items? itemName=Shan.code-settings-sync)
For VS Code Insiders - The official Settings Sync will let you
automatically have access to themes, settings etc with using Github
Codespaces
https://code.visualstudio.com/docs/editor/settings-sync (https://code.
visualstudio.com/docs/editor/settings-sync)
6/23/20 Advanced New File
Patbenatar.advanced-new-file
Inspired by Sublime's AdvancedNewFile plugin, this adds the ability to
create files anywhere in your workspace.
Features
Fuzzy-matching autocomplete to create new file relative to
existing path (thanks to JoeNg93 for making it faster)
Create new directories while creating a new file
Create a directory instead of a file by suffixing the file path
with / as in somedirectory/ to create the directory (thanks to
maximilianschmitt)
Ignores gitignored and workspace files.exclude settings.
Additional option of adding advancedNewFile.exclude
settings to workspace settings just like native files.exludeexcept it explicitly effects AdvancedNewFile plugin only.
(thanks to Kaffiend)
Control the order of top convenient options ("last selection",
"current file", etc) via config setting advancedNewFile.
convenienceOptions
https://marketplace.visualstudio.com/items?itemName=patbenatar.
advanced-new-file (https://marketplace.visualstudio.com/items?
itemName=patbenatar.advanced-new-file)
6/30/20 Tailwind CSS IntelliSense
Bradlc.vscode-tailwindcss by Brad Cornes - 94828 installs
Tailwind CSS IntelliSense enhances the Tailwind development
experience by providing Visual Studio Code users with advanced
features such as autocomplete, syntax highlighting, and linting.
https://marketplace.visualstudio.com/items?itemName=bradlc.
vscode-tailwindcss (https://marketplace.visualstudio.com/items?
itemName=bradlc.vscode-tailwindcss)
7/7/20 GitHub Pull Requests and Issues by GithubGitHub.vscode-pull-request-github - 569,734 installs
This extension allows you to review and manage GitHub pull requests
and issues in Visual Studio Code. The support includes:
Authenticating and connecting VS Code to GitHub.
Listing and browsing PRs from within VS Code.
Reviewing PRs from within VS Code with in-editor
commenting.
Validating PRs from within VS Code with easy checkouts.
Terminal integration that enables UI and CLIs to co-exist.
Listing and browsing issues from within VS Code.
Hover cards for "@" mentioned users and for issues.
Completion suggestions for users and issues.
A "Start working on issue" action which can create a branch
for you.
Code actions to create issues from "todo" comments.
https://marketplace.visualstudio.com/items?itemName=GitHub.
vscode-pull-request-github (https://marketplace.visualstudio.com
/items?itemName=GitHub.vscode-pull-request-github)
7/14/20 - Bracket Pair Colorizer 2CoenraadS.bracket-pair-colorizer-2 | 1,074,677 installs
This extension allows matching brackets to be identified with colours.
The user can define which tokens to match, and which colours to use.
Differences between v1 and v2?
v2 Uses the same bracket parsing engine as VSCode, greatly
increasing speed and accuracy. A new version was released because
settings were cleaned up, breaking backwards compatibility.
Lots of great new settings and features I wasn’t using in V1, but now i
need to take the time to use them
https://marketplace.visualstudio.com/items?itemName=CoenraadS.
bracket-pair-colorizer-2 (https://marketplace.visualstudio.com/items?
itemName=CoenraadS.bracket-pair-colorizer-2)
7/21/20 - Easy-snippet
another easy way to manage snippet
Features
Auto-detects languageEasily edit and delete snippets once created
View, edit, and remove snippet groups from a dedicated
snippet manager
https://marketplace.visualstudio.com/items?itemName=inu1255.easy-
snippet (https://marketplace.visualstudio.com/items?
itemName=inu1255.easy-snippet)
7/28/20 - Debugger for Chrome
Debug your JavaScript code running in Google Chrome from VS Code.
A VS Code extension to debug your JavaScript code in the Google
Chrome browser, or other targets that support the Chrome DevTools
Protocol.
Supported features
Setting breakpoints, including in source files when source maps are
enabled
Stepping, including with the buttons on the Chrome page
The Locals pane
Debugging eval scripts, script tags, and scripts that are added
dynamicallyWatches Console https://marketplace.visualstudio.com/items?itemName=msjsdiag. debugger-for-chrome (https://marketplace.visualstudio.com/items? itemName=msjsdiag.debugger-for-chrome) 8/4/20 Profile Switcher by Aaron Powell This extension allows you to define a number of settings profiles that you can easily switch between. The original idea for this extension came from my desire to have an easy way for me to switch my VS Code to a setup that was better optimised for presenting (changed themes, increase font size, etc). The extension introduces four new commands that you can use from the command panel. All commands are prefixed with Profile Switcher. https://marketplace.visualstudio.com/items?itemName=aaronpowell. vscode-profile-switcher (https://marketplace.visualstudio.com/items? itemName=aaronpowell.vscode-profile-switcher) 8/11/20 Search Editor: Apply Changes by Jackson Kearl
Apply changes in a Search Editor to files in a workspace.
Steps:
Run a search
Edit results
Run command "Apply Search Editor changes to worksapce"
Search editor changes will overwrite their target files at the lines
specified in the editor - if the lines in the target document have been
modified shifted around this will result in erroneous overwriting of
existing data.
This is a very early expermient of what writing local search editor
changes out to the workspace might look like, please file bugs and
feature requests as you see fit!
https://marketplace.visualstudio.com/items?itemName=jakearl.
search-editor-apply-changes (https://marketplace.visualstudio.com
/items?itemName=jakearl.search-editor-apply-changes)
8/18/20 - Sorting HTML and Jade attributesSorting of the tag attributes in the specified order
You can use global keyboard shortcut ALT+SHIFT+F or right-click
context menu Format code.
Or press F1 and run the command named Sorting of the tag
attributes (attrs-sorter).
Use the default order, or set the order yourself
{
"attrsSorter.order": ["data-.+", "aria-.+", "class"]
}
https://marketplace.visualstudio.com/items?itemName=mrmlnc.
vscode-attrs-sorter (https://marketplace.visualstudio.com/items?
itemName=mrmlnc.vscode-attrs-sorter)
8/25/20 - Format in context menus
Lacroixdavid1.vscode-format-context-menu - 33,929 installs
This VSCode extension allows the user to format one or multiple files
with right-click context menu.Format one or multiple files from Explorer Context Menu Format one or multiple files from SCM Context Menu Format one file from Editor File Tile Context Menu https://marketplace.visualstudio.com/items?itemName=lacroixdavid1. vscode-format-context-menu 9/1/20 - i18n Ally All in one i18n extension for VS Code Supports multi-root workspaces Supports remote development Supports numerous popular frameworks Supports linked locale messages Uses i18n for the extension itself, of course. Translation List https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally (https://marketplace.visualstudio.com/items?itemName=antfu.i18n- ally)
9/8/20 - Multiple cursor case preserve By Carindal90 Have you ever tried to change a single word in all variable names, but had your camelCase broken? This extension preserves selection case in these situations. It recognises CAPS, Uppercase and lowercase. Works for typing or pasting. https://marketplace.visualstudio.com/items?itemName=Cardinal90. multi-cursor-case-preserve (https://marketplace.visualstudio.com /items?itemName=Cardinal90.multi-cursor-case-preserve) 9/15/20 - ngrok for VSCode by philnash A VSCode extension to control ngrok from the command palette. ngrok: start: Start an HTTP tunnel pointing to a port of your choice from the command palette You can choose to copy the URL to the clipboard, open it in a browser or even generate a QR code so that you can easily open it on a mobile device ngrok: start: Start a named HTTP tunnel from your ngrok config
ngrok: stop: Stop one or all HTTP tunnels ngrok: dashboard: Open the ngrok dashboard https://marketplace.visualstudio.com/items?itemName=philnash. ngrok-for-vscode#ngrok-for-vscode (https://marketplace.visualstudio. com/items?itemName=philnash.ngrok-for-vscode#ngrok-for-vscode) 9/22/20 - Hero Icons by Afzal Hero Icons for VS Code Search and paste icons into you code as SVG or JSX for your web projects This project stands on the shoulders of original hero-icons library. https://marketplace.visualstudio.com/items?itemName=afzalsayed96. heroicons (https://marketplace.visualstudio.com/items? itemName=afzalsayed96.heroicons) 9/29/20 - Debug Visualizer hediet.debug-visualizer
A VS Code extension for visualizing data structures while debugging. Like the VS Code's watch view, but with rich visualizations of the watched value. https://marketplace.visualstudio.com/items?itemName=hediet.debug- visualizer (https://marketplace.visualstudio.com/items? itemName=hediet.debug-visualizer) 10/6/20 - Core VS Code Updates released in August 2020 VS Code updates monthly and releases so many great fixes and enhancements. There are a number of updates in this version that we hope you will like, some of the key highlights include: Format modified text - Limit formatting to just the code you've changed. Change casing on Search and Replace - Change text casing during global Search and Replace. Source Control repositories view - Display pending changes per repository. Filter Debug Console output - Quickly filter and find debugging output. Improved JS debugger Auto Attach - "Smart" Auto Attach to Node.js scripts or test runners.
TypeScript optional chaining refactoring - Convert multiple checks to a concise optional chain. JSDoc @deprecated tag support - IntelliSense clearly shows APIs marked as deprecated. Notebook UX updates - Cell Status bar contributions, enhanced notebook diff editor. https://code.visualstudio.com/updates/v1_49 (https://code. visualstudio.com/updates/v1_49) 10/13/20 - Visual Code Release Parties Join the VS Code team for the latest release With the launch of v1.50 of Visual Studio Code, we want to celebrate with you! Join our team for a virtual release party, where we'll share our favorite features and answer your questions in a live Q&A. https://code.visualstudio.com/events (https://code.visualstudio.com /events) Missed the last events? Catch the highlights on the YouTube channel.
https://www.youtube.com/playlist? list=PLj6YeMhvp2S72rNFDW_b4W63qyKBBQ_JA (https://www.youtube. com/playlist?list=PLj6YeMhvp2S72rNFDW_b4W63qyKBBQ_JA) 10/20/20 Vscode-coldbox by Ortus Solutions ColdBox Platform Support for Visual Studio Code This bundle includes functionality not only for ColdBox MVC, but also for WireBox, CacheBox and LogBox. Code Insight, Code Skeleton Snippets, Handler Code Snippets, ORM Code Snippets, WireBox Code Snippets. https://marketplace.visualstudio.com/items?itemName=ortus- solutions.vscode-coldbox (https://marketplace.visualstudio.com /items?itemName=ortus-solutions.vscode-coldbox) 10/27/20 Copy Relative Path Simple little extension that gives you the relative path to a file. https://marketplace.visualstudio.com/items?itemName=alexdima. copy-relative-path 11/3/20 Trailing Spaces by Shardul Mahadik
A VS Code extension that allows you to…
highlight trailing spaces and delete them in a flash!
This extension is a port of the popular Sublime Text plugin Trailing
Spaces
Usage:
Delete
Delete - Modified Lines Only
Highlight
.
https://marketplace.visualstudio.com/items?itemName=shardulm94.
trailing-spaces (https://marketplace.visualstudio.com/items?
itemName=shardulm94.trailing-spaces)
11/10/20 - Git Stash
This extension allows to comfortably create, apply, delete and inspect
stashes. It results helpful when working on different features,
switching to branches for modifications or creating sets of local
experimental features. Navigate on your stashes, and run basically all
stash commands visually and review the results.https://marketplace.visualstudio.com/items?itemName=arturock.
gitstash (https://marketplace.visualstudio.com/items?
itemName=arturock.gitstash)
11/19/20 - TabNine Autocomplete AI by TabNine
Better code completions using AI. Works for all programming
languages using the most advanced Machine Learning models to
boost productivity and save time for developers.
This is the Visual Studio Code Tabnine client, advanced AI based
autocomplete for all programming languages. Tabnine Indexes your
entire project by reading your .gitignore or others, and determines
which files to index.
Enter long variable names using minimal keystrokes and
leverage a mnemonic completion engine.
Zero configuration. Tabnine works out of the box.
Highly responsive: Produces a list of suggestions in less than
10 milliseconds on average.https://marketplace.visualstudio.com/items?itemName=TabNine. tabnine-vscode (https://marketplace.visualstudio.com/items? itemName=TabNine.tabnine-vscode) 11/24/20 Auto Rename Tag by Jun Han 4 million + installs Automatically rename paired HTML/XML tag, same as Visual Studio IDE does. https://marketplace.visualstudio.com/items? itemName=formulahendry.auto-rename-tag (https://marketplace. visualstudio.com/items?itemName=formulahendry.auto-rename-tag) 12/1/20 vscode-icons by VSCode Icons Team Bring icons to your Visual Studio Code. Lots and Lots of ICONS Once installed and after reloading vscode, you will be presented with a message to Activate the icons. In case this doesn't happen, navigate to:
Linux & Windows => File > Preferences > File Icon Theme > VSCode
Icons.
MacOS => Code > Preferences > File Icon Theme > VSCode Icons.
https://marketplace.visualstudio.com/items?itemName=vscode-icons-
team.vscode-icons
12/8/20 npm
Vscode-npm-script by egamma - 3 million+ installs
This extension supports running npm scripts defined in the package.
json file and validating the installed modules against the
dependencies defined in the package.json.
The package.json validation reports warnings for modules:
that are defined in the package.json, but that are not installed
that are installed but not defined in the package.json
that are installed but do not satisfy the version defined in the
package.json.
Quick fixes to run npm are provided for reported warnings.https://marketplace.visualstudio.com/items?itemName=eg2.vscode- npm-script (https://marketplace.visualstudio.com/items? itemName=eg2.vscode-npm-script) 12/15/20 ESLint by Dirk Baeumer Dbaeumer.vscode-eslint - 12 million+ installs Integrates ESLint into VS Code. If you are new to ESLint check the documentation. ESLint statically analyzes your code to quickly find problems. ESLint is built into most text editors and you can run ESLint as part of your continuous integration pipeline. Many problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware so you won't experience errors introduced by traditional find-and-replace algorithms. Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project.
https://marketplace.visualstudio.com/items?itemName=dbaeumer. vscode-eslint 12/22/20 Make VS Code Awesome VS Code is pretty good Its integrated terminal, global search, and extension marketplace are fantastic. But here's my beef: It's loaded with distractions and takes a ton of configuration to feel good. That's where this course comes in. We're going to make VS Code awesome, then teach you how to be insanely productive in it. https://makevscodeawesome.com/ (https://makevscodeawesome. com/) Get more VS Code Hints Tips and Tricks every week on our Podcast Listen (https://cfmlnews.modernizeordie.io/) on the Web or in your Podcast Player Subscribe (https://www.youtube.com/playlist?list=PLNE- ZbNnndB98oRT8THamdCUiyDQL1uEj) on YouTube
www.ortussolutions.com (http://www.ortussolutions.com)
© Copyright Ortus Solutions, Corp.You can also read
