New color scheme in Visual Studio Code for JavaScript and TypeScript files within Visual Studio 2017

I am interested in importing or setting a Visual Studio Code color theme for JavaScript and TypeScript files in Visual Studio 2017. Specifically, I would like to customize the color theme for files with extensions: .js, .jsx, .ts, and .tsx. If individual file or language customization is not possible, I would like to explore the option of importing a complete theme that mimics Visual Studio Code.

In essence, I want this:

https://i.sstatic.net/CFRnB.png

To resemble this: https://i.sstatic.net/ERCJQ.png

javascriptvisual-studiotypescriptvisual-studio-codevisual-studio-2017

Answer №1

After some searching, I was able to figure it out!

Summary:

Download the JavaScript.tmLanguage and JavaScript.tmTheme files.

  • Navigate to %USERPROFILE%\.vs\Extensions\javascript\Syntaxes (usually C:\Users\{username})
  • Create the necessary folders if they don't exist.
  • Copy and paste both files into this directory.
  • Restart Visual Studio to see syntax highlighting for JavaScript files.

If you're looking to transfer a vscode theme to Visual Studio,

  • Generate a color theme from your current vscode settings (Reference). This will be the tmTheme file.
  • Obtain the tmLanguage file for the language from vscode's repository.
  • Convert both JSON files to plist format (using plist).
  • If needed, add filetypes to the tmLanguage file.
  • Place both files in %USERPROFILE%\.vs\Extensions\language\Syntaxes folder.
  • That's it!

I have personally tested this on VS2019 and followed the guidance from Microsoft's documentation, so it should also work for VS2015.

Screenshot: https://i.sstatic.net/ck2Sp.png

Answer №2

Can you please confirm that all other TSLS features are functioning correctly on your current setup? This includes formatting, autocomplete, and any other features.

There has been a reported issue with TextMate support in Visual Studio where certain colors may be missing. To check if this is affecting your system, could you try running the following commands from a VS Developer cmd prompt: • devenv.exe /updateconfiguration • devenv.exe /setup

Could you provide the directory where Visual Studio is installed? Example: C:\Program Files[ (x86)]\Microsoft Visual Studio 15.0\Common7\IDE

Is there a tmLanguage folder present under the TypeScript installation path? Example: C:\Program Files\Microsoft Visual Studio 15.0\Common\IDE\CommonExtensions\Microsoft\TypeScript\tmLanguage

Do you have any custom grammar files (.tmLanguage, .tmTheme) in your user profile directory? Example: %userprofile%.vs\Extensions

To rule out any TM language caching issues:

  • Close Visual Studio
  • Navigate to the TextMateCache location: %localappdata%\Microsoft\VisualStudio[15.0XXXXX]\TextMateCache
  • Delete all the .cache files in this directory
  • Reopen Visual Studio and see if the problem persists

If the above steps do not resolve the issue, please check if the TypeScript TextMate registry key is correctly set:

  • Close Visual Studio
  • Open regedit
  • Select HKLM
  • File > Load Hive …
  • Open %localappdata%\Microsoft\VisualStudio\15.0_xxx\privateregistry.bin (you can name the hive VS)
  • Navigate to: Computer\HKEY_LOCAL_MACHINE\VS\Software\Microsoft\VisualStudio\15[XXXXX]_Config\TextMate\Repositories

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

Remove the input form from the angular app in WordPress after reloading or submitting

Presently, I am encountering an issue with my form: <table class="widefat" ng-app="myApp" ng-controller="MyCtrl"> <tr> <td><label for="name_pokemon"><?php _e( "Name", ...

javascriptangularjswordpresscustom-post-typewordpress-plugin-creation

Is TypeScript inadvertently including unnecessary files in its compilation?

In my configuration file, tsconfig looks like this: { "compilerOptions": { "module": "esnext", "target": "es6", "declaration": true, "outDir": "./dist", }, "include": [ "src/**/*" ] } Let's consider a simple source file f ...

typescript

How to store data in MongoDB without relying on specific request bodies

I realize that I can simplify the code: var event = new EventModel(req.body); event.save....... If the input names match the attribute names in my database, mongoose can save by simply passing req.body. However, there is an issue with handling dateO sep ...

javascriptnode.jsmongodbmongoose

Develop a simulated version that does not include all the functionalities of the primary service

Let's imagine a scenario where there is an OriginalService class with various methods class OriginalService { method1() { } method2() { } method3() { } .. } Now, suppose we need to create a mock of OriginalService that will only be used with ...

angulartypescript

Switching the background image of a div when hovering over a particular list item

Here is my HTML: <li><a href=""><div class="arrow"></div>List Item</a></li> I'm looking to change the background image of the "arrow" class when hovering over the "List Item" with a mouse. The "arrow" class repres ...

javascriptjqueryhtmlcsshover

Error: useRef in TypeScript - cannot be assigned to LegacyRef<HTMLDivElement> type

Struggling to implement useRef in TypeScript and facing challenges. When using my RefObject, I need to access its property current like so: node.current. I've experimented with the following approaches: const node: RefObject<HTMLElement> = us ...

reactjstypescripttsx

Issue with Jquery Conflict in WordPress

Apologies if my inquiry is not up to standard. I am currently utilizing a Google library in my project. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> The issue arises when this conflicts with the jQuery u ...

javascriptjqueryajaxwordpressslider

I am encountering difficulties while attempting to generate the chart series in Highcharts

This is just a demonstration https://jsfiddle.net/kkulig/0k4m5d2q/ I have made some changes to the original code Swapped out the following var originalCategories = [new Category('A'), new Category('B'), new Category('C')].m ...

javascriptarrayshighcharts

Changing the URL parameters to accommodate a specific query

Currently, I have set up the route as follows: app.get("/employees", (req, res) => { data.getAllEmployees().then((data) => { res.json(data); }).catch(function(err) { console.log("An error was encountered: " + err); }); }) ...

javascriptnode.jsexpress

Navigating without the need for a mouse click

Is there a way to automatically redirect without user interaction? I need the redirection to happen without clicking on anything <script> setInterval(function(){ window.location.replace("http://your.next.page/"); }, 5000); // Redirec ...

javascripthtmljquery

Experiencing a problem with my JavaScript code in Node.js due to an asynchronous issue arising when using a timeout

My goal with this code is to retrieve JSON questions and present them to the user through the terminal. The user has 5 seconds to respond to each question before the next one appears. However, I encountered an issue where the next question times out automa ...

javascriptnode.jsreadline

Determining height of an element in AngularJS directive prior to rendering the view

As I dive into the world of Angular, any assistance is greatly welcomed. My goal is to vertically align a div based on screen size (excluding the header and footer) when the page loads, the window resizes, and during a custom event triggered by the user ex ...

javascriptcssangularjs

confronting #tackling challenges while launching a next.js web application

While trying to deploy my next.js app, I encountered the following issue with #fillNegs in the tailwind node_modules folder. My setup includes node.js version 12.22.0, next.js version 11, and Tailwind version 2.0.2. module.image.null_resource.push (local ...

javascriptreactjsnode.jsnext.jstailwind-css

How can we verify that console.log has been called with a specific subset of expected values using Jest?

I am currently experimenting with a function that adds logging and timing functionality to any function passed to it. However, I am facing a challenge when trying to test the timing aspect of it. Here are my functions: //utils.js export const util_sum = ( ...

javascripttypescriptunit-testingvue.jsjestjs

Limit the vertical movement in Vue drag and drop operations

Currently, I am working on a project that involves implementing drag-and-drop functionality using vue-draggable. You can find more information about it here: https://github.com/SortableJS/Vue.Draggable. I am facing an issue where the height of the element ...

javascriptvue.jsvuedraggable

Using discord.js within an HTML environment can add a whole new level of

I'm in the process of creating a dashboard for discord.js, however, I am facing difficulties using the discord.js library and connecting it to the client. Below is my JavaScript code (The project utilizes node.js with express for sending an HTML file ...

javascripthtmlnode.jsdiscord.js

Learn how to use jQuery to load a text file containing arrays and then format them as

I'm attempting to load a .txt file containing multidimensional arrays using AJAX, and then sort through the data to display it on my website. However, I'm facing an issue where the data is only returning as plain text, even after trying to use JS ...

javascriptjqueryarraysjson

How to create an onClick event handler in ReactJS and pass 'this' parameter

Here is the code for my component: import React, {PropTypes} from 'react'; export default class Viewdesc extends React.Component { render() { return ( <div className="col-md-12 slide-row"> <div className="col-md-12 overview- ...

javascriptreactjsexpress

How come executing a function in the Node.js REPL using )( actually functions?

In JavaScript, why is it possible to call a function like this when tested with node.js: ~$ node > function hi() { console.log("Hello, World!"); }; undefined > hi [Function: hi] > hi() Hello, World! undefined > hi)( // Why does this work? Hell ...

javascriptnode.jssyntax

Unlocking the power of URL manipulation in Fastify using Node.js

I'm attempting to retrieve specific parts of the URL from a Fastify server. For instance, the URL looks like this: http://localhost:300/query_tile/10/544/336 Within the Fastify server, I need the values for z/x/y. I've attempted the following ...

node.jstypescriptfastify