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

Utilizing v-model alongside various JavaScript plugins within a single select element

I've incorporated the jQuery plugins select2 and datepicker into my project, utilizing custom directives for them. Everything was functioning smoothly until I attempted to retrieve the selected value using v-model, which resulted in a failure to bind ...

javascriptvue.jsjquery-ui-datepickerjquery-select2vuejs2

The navigation bar is struggling to be positioned on top of the body

I have encountered an issue where I want my navbar to remain on top of all components, but when I open the navigation menu, it pushes all the components of the index page down. My tech stack includes Next.js, Tailwind CSS, and Framer Motion. This problem ...

reactjstypescriptnext.jstailwind-cssframer-motion

Encountering a Problem When Exporting a Class Using Require

I find myself struggling with a particular detail that eludes me. Despite exploring numerous suggested solutions found through Google, I am overwhelmed by the uncertainty of what actually works. Here is MyProject on Replit and the problematic class I&apos ...

javascriptnode.jsecmascript-6es6-moduleses6-class

What steps are necessary to create an npm package utilizing three.js without any dependencies?

I have a challenge - I am trying to create an npm package that generates procedural objects for three.js. The issue I'm facing is how to properly include three.js in my code. I attempted to establish a dependency and use something like const THREE = r ...

javascriptnode.jsnpmthree.js

What is the best way to export several 'sub-components' from a single node.js module?

Here's what I mean by exporting 'sub-modules': var fibers = require('fibers'); // this is functional as the 'main' module var future = require('fibers/future'); // also operational as a 'sub' ...

javascriptnode.jsmodulenpm

After converting from php/json, JavaScript produces a singular outcome

After running a PHP query and converting the result to JSON using json_encode, I noticed that when I try to print the results using echo, only one entry from the query is output in JSON format. My objective is to make this information usable in JavaScript ...

javascriptphparraysjson

What is the best way to vertically flip a background image that is repeating along the y axis in CSS?

I am in the process of developing a mobile web app and I need assistance with flipping the background image when it repeats along the y-axis. Can someone guide me on how to achieve this using CSS or JavaScript? https://i.stack.imgur.com/b107V.jpg var el ...

javascripthtmlcss

How come certain rectangles vanish when one rectangle completely fills the space?

Currently, I am encountering an issue with CSS paint worklet and I am trying to determine if it's a browser bug or an error on my end. In the worklet, I am drawing multiple rectangles. Strangely, when one rectangle covers the entire area, the others s ...

javascriptcssdevicepixelratiocss-houdinicss-paint-api

The functionality of PHP in relation to the jQuery post feature seems to be malfunction

After developing the JavaScript functionality for this contact form, below is the HTML structure without any CSS styling included: <!-- Contact Form --> <div class="cws-widget"> <div class="widget-title" style="color:#fec20b;">S ...

javascriptphpjqueryajax

JavaScript Regex: Removing all characters that are not numbers

There have been several inquiries about this particular question, such as this one on Stack Overflow. Despite my efforts to replicate the solution and research regex, I can't seem to get it to work: $("#button").click(function () { new_number = $ ...

javascriptjqueryregexreplace

Having difficulty linking the Jquery Deferred object with the Jquery 1.9.1 promise

I have been developing a framework that can add validation logic at runtime. This logic can include synchronous, asynchronous, Ajax calls, and timeouts. Below is the JavaScript code snippet: var Module = { Igniter: function (sender) { var getI ...

javascriptjquerypromise

Display modal popup only once the dropdown has been validated, with the validation focusing on criteria other than the dropdown itself

Looking for a way to validate dropdown values. Popup should only show if the dropdown values are selected; otherwise, the popup should remain hidden. Below is the code snippet: <div class="main-search-input-item location"> ...

javascriptjquery

How to apply styles to a child component using CSS modules in a parent component

For the styling of a Material UI component (Paper) within a Menu component, I am referencing this documentation. To style my components using CSS modules with Webpack as the bundler, here's an example: // menu.js import React from 'react'; ...

javascriptcssreactjsmaterial-uistyling

The `<Outlet/>` from react-router is being rendered in a location outside of its intended wrapper div

Utilizing MUI for crafting a straightforward dashboard featuring an <AppBar>, a side <Drawer>, my component appears as follows: <> <AppBar> // code omitted <AppBar/> <Drawer> // code omitted <Drawer/> / ...

javascriptcssreactjsmaterial-uireact-router

Engaging with JSON data inputs

Need help! I'm attempting to fetch JSON data using AJAX and load it into a select control. However, the process seems to get stuck at "Downloading the recipes....". Any insights on what might be causing this issue? (Tried a few fixes but nothing has w ...

javascripthtmljson

Access information through the restful api using the angularjs service $resource

I am attempting to utilize the $resource service with the surveygizmo API. Here is my code: HTML : <div ng-app="Survey"> <body> <div ng-controller="SurveyCtrl"> {{survey.data.title}} </div> </body> </div> My scr ...

javascriptangularjs

Angular code is failing to send a signal to the server following a $http.post request

I've been using angular for about a week now and I've been struggling to solve this issue. I have a service that wraps around $http because multiple controllers make calls to the same URL. On one particular page, there is a lot of server-side bus ...

javascriptangularjsajax

Load Form with Json Data from LocalStorage Key-ID to Auto-Populate Fields

After successfully setting the ID in localStorage, I now need to retrieve and display only that specific record from my JSON data. The content of my localStorage is: This information is obtained from my JSON data after a button click. The challenge is us ...

javascriptjqueryajaxjsonhtml

perform an action in PHP when a button is clicked

I'm currently developing a PHP admin panel that displays a list of users in an HTML table format. Each row in the table includes a button that allows the admin to send a notification to the selected user. Below is the code I used to create and displa ...

javascriptphphtmlajax

Issue: Dynamic server is experiencing abnormal increase in usage due to headers on Next version 13.4

Encountering an error in the following function. It's a basic function designed to retrieve the token from the session. 4 | 5 | export async function getUserToken() { > 6 | const session = await getServerSession(authOptions) | ...

javascriptreactjsnext.jsnext-auth