Is it possible to set up VS Code's code completion feature to automatically accept punctuation suggestions?

For all the C# devs transitioning to TypeScript in VS Code, this question is directed at you.

I was captivated by the code completion feature in VS C#. To paint a clearer picture, let's say I'm trying to write:

console.log('hello')

When coding in C#, here's what typically happens:

  1. Type "con"
  2. A list of suggestions pops up, usually starting with "console"
  3. Once highlighted and selected, pressing "." will write out "sole." so now it appears as: console.
  4. Type "l", and "log" is suggested next
  5. Type "(", resulting in: console.log('')
  6. Now the cursor is within the ''
  7. Type "hello"

With my current VS Code setup, I can achieve a similar result in JS/TS by pressing tab each time I want to accept a suggestion. However, simply hitting the next punctuation mark to continue on felt really pleasant and, dare I say it, "fun." I miss that experience. And as far as I know, there are no technical limitations in the languages that would prevent this behavior.

Does anyone happen to know of an extension or setting that could enable this functionality? Alternatively, where else might this conversation be taking place?

javascriptc#typescriptvisual-studio-code

Answer №1

To achieve this functionality, one can create their own implementation using the macros extension available at this link. Here's how to do it:

  1. Begin by installing the macros extension

  2. Create a macro that triggers the acceptSelectedSuggestion action, followed by typing .. Below is an example of what your Settings.json file could include:

    {
    "editor.wordWrap": "on",
    "window.zoomLevel": 0,
    "git.enableSmartCommit": true,
    "macros": {
        "accept.": [
            "acceptSelectedSuggestion",
            {"command": "type", "args": {"text": "."}}
        ],
        "accept(": [
            "acceptSelectedSuggestion",
            {"command": "type", "args": {"text": "("}}
        ],        
        "accept=": [
            "acceptSelectedSuggestion",
            {"command": "type", "args": {"text": "="}}
        ]
    }
}

  3. Add these macros to key bindings in the keybindings.json file. For instance:

    {
    "key": ".",
    "command": "macros.accept.",
    "when": "editorTextFocus && suggestWidgetVisible"
},
{
    "key": "shift+9",
    "command": "macros.accept(",
    "when": "editorTextFocus && suggestWidgetVisible"
},
{
    "key": "=",
    "command": "macros.accept=",
    "when": "editorTextFocus && suggestWidgetVisible"
}

    By following these steps, you can replicate the familiar VS C# completion behavior for specific follow-on keys. Additional macros can also be included as needed.

Answer №2

Adding the . at the end of console may not be possible, but there are other actions you can take:

Navigate to File >> Preferences >> Keyboard Shortcuts.

On the right side of the screen, locate a file named keybindings.json. Within the two brackets, input the following:

{ "key": ".",                   "command": "acceptSelectedSuggestion", 
                                 "when": "editorTextFocus && suggestWidgetVisible" },

This should provide support for all languages.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am experiencing an issue with applying responsiveFontSize() to the new variants in Material UI Typography

I am looking to enhance the subtitles in MUI Typography by adding new variants using Typescript, as outlined in the documentation here. I have defined these new variants in a file named global.d.ts, alongside other customizations: // global.d.ts import * a ...

javascriptreactjstypescriptmaterial-uinext.js

Display child component automatically upon parent component state update

The main component Dashboard manages the state for each ListItem added to my Watchlist. However, whenever I add an item, it is inserted into the database but only appears when I refresh the browser. class UserDashboard extends React.Component { state = ...

javascriptreactjscomponents

Eliminate the need for background video buffering

I have a piece of code that I'm using to remove all the created players for my video elements. The code works fine, but I'm facing an issue where the video keeps buffering in the background after it's changed via an ajax call success. Can yo ...

javascriptjqueryhtmlvideomediaelement.js

Concerns regarding rendering HTML and drawing in Node.js

Having an issue where node.js is serving an html file with an SVG drawing. The index.html features a chart similar to the line chart found at http://bl.ocks.org/mbostock/3883245 Whenever I try to serve the index.html through the express server, I end up ...

javascripthtmlnode.jsexpressd3.js

What is the reason for the jQuery callBack handler returning [object Object]?

Recently, I created a SessionMgr.cfc file in ColdFusion to manage session variables for my $.ajax calls. However, it seems like I might have made a mistake somewhere. Despite scouring through numerous pages on Stack Overflow and Google, I still can't ...

javascriptjqueryajaxcallbackcoldfusion

Sticky positioning is not maintaining its position at the top

I've noticed a strange behavior where, when I scroll down, the yellow box goes on top of the blue box. I have set both boxes to have a position sticky so that they should stay in place and not overlap. However, I want only the orange box to be scrolla ...

javascripthtmlcssreactjsflexbox

Switching on and off a class in Next.js

I'm a beginner with Next.js and React framework. My question is regarding toggling a class. Here's my attempt in plain JS: function toggleNav() { var element = document.getElementById("nav"); element.classList.toggle("hidde ...

javascriptnext.js

Incorrectly resolving routes in the generate option of Nuxt JS's .env configuration file

Having trouble using Nuxt JS's 2.9.2 generate object to create dynamic pages as static files by referencing a URL from my .env file: nuxt.config.js require('dotenv').config(); import pkg from './package' import axios from 'a ...

javascriptvue.jsvuejs2nuxt.js

Troubleshooting Angular 2 with TypeScript: Issue with view not refreshing after variable is updated in response handler

I encountered a problem in my Angular 2 project using TypeScript that I could use some help with. I am making a request to an API and receiving a token successfully. In my response handler, I am checking for errors and displaying them to the user. Oddly en ...

javascripthtmlangulartypescript

Why is it impossible for me to show the title "individual name:"?

<p id="display1"></p> <p id="display2"></p> var player1= { alias: 'Max Power', skills: ['shooting', 'running'] }; $("#display1").append( "<br/>" + "player alias :" + player1.alia ...

javascriptjquery

What is the process for releasing an NPM package to the NPM registry rather than the GitHub registry?

I have developed an NPM package available at - (https://github.com/fyndreact/nitrozen) The package was successfully published on the Github registry (), but I am looking to publish it on the NPM registry. However, I cannot locate the package in the NPM r ...

javascriptnpmnpm-publishgithub-package-registrynpm-registry

Executing a JavaScript function when an HTML page is loaded within an OBJECT Tag

I have a situation where I am loading an HTML page inside an object tag. Since the iPad does not support iFrames, I decided to use the object tag to load external HTML pages into a container. Everything is working well so far, but now I want to be able t ...

javascriptjqueryhtmlobject

Expanding Angular FormGroup Models with TypeScript

I've developed a foundational model that serves as a base for several other form groups. export class BaseResource { isActive: FormControl; number: FormControl; name: FormControl; type: FormControl; constructor( { ...

angulartypescript

The requirement is for TypeScript to be cast as Partial<T>, with the condition that the keys

I'm currently looking for two different utility types: one that consists of a subset of a type with matching value types, and another that only requires the keys to exist in another type. I've devised the following solution, which appears to be ...

typescript

React Resize Detection: Handling Window Resize Events

Is there a more efficient way to listen for the window resize event in react.js without causing multiple callbacks? Perhaps a React-oriented approach (like using a hook) to achieve this? const resizeQuery = () => { console.log("check"); if ( ...

javascriptreactjsmaterial-ui

Tips for identifying a scroll down gesture on a touch device with jQuery

I have a method for infinite scroll that is triggered like this: $(window).on('scroll resize load', function() { // execute the infinite scroll method }); It is triggered by these events: scroll resize load However, it does not seem to ...

javascriptjqueryiphoneeventstouch

Toggle Form Section Visibility

I am working on a table with five rows that have upload buttons. Each time I submit a row, the page refreshes, but I want to hide all but one row at a time. When the first submit button is clicked, it should show the next row and hide the previous ones. Th ...

javascriptphpjqueryhtml

Node.js app hosted on Azure Functions unable to resolve NPM dependencies

I set up a Node (TypeScript) Azure Function application using the VSCode Azure Function extension. While checking the deployment output, I noticed the following log line: Started postDeployTask "npm install (functions)". Despite this, I couldn&a ...

node.jstypescriptnpmazure-functions

When there is data present in tsconfig.json, Visual Studio Code does not display errors inline for TypeScript

After creating an empty .tsconfig file (consisting solely of "{ }"), Visual Studio Code immediately displays errors both inline and in the "problems" section. Interestingly, when I populate the tsconfig.json file with data, these errors disappear. Is there ...

typescriptvisual-studio-code

"Enhance User Interaction with a Bootstrap Popup when Submitting Form Data via

As a junior web master, I have a simple question to ask. I have created a single page application for a client with a contact form at the end of the page. The validation is done using Bootstrap, but the only method I know to send the form data to a mail id ...

javascriptphpjqueryhtmltwitter-bootstrap