Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Visual Studio Code color theme in Visual Studio 2017 for JavaScript and TypeScript files

Tags:

javascript

visual-studio

typescript

visual-studio-code

visual-studio-2017

As the topic suggests I would like to import/set Visual Studio Code color theme in Visual Studio 2017 for JavaScript and TypeScript files. The files I therefore would like to set color theme for are: .js, .jsx, .ts and .tsx. If it is not possible to edit per file or language then I would like to know if it is possible to import a whole theme that looks like Visual Studio Code.

In short I would like this:

enter image description here

To look like this: enter image description here

like image 256
Ogglas Avatar asked May 13 '17 21:05

Ogglas

People also ask

How do I change the color scheme in Visual Studio 2017?

Here's how to change the color theme of the IDE frame and the tool windows in Visual Studio. On the menu bar, choose Tools > Options. In the options list, choose Environment > General. In the Color theme list, choose either the default Dark theme, the Light theme, the Blue theme, or the Blue (Extra Contrast) theme.

How do I use color themes in Visual Studio?

On the menu bar, select Tools > Options. In the options list, select Environment > General. In the Color theme list, choose between the default Dark theme, the Blue theme, the Blue (Extra Contrast) theme, and the Light theme. Or, choose the Use system setting option to select the theme that Windows uses.

How do I change the colors in Visual Studio Code?

Color themes let you modify the colors in Visual Studio Code's user interface to suit your preferences and work environment. Selecting the Color Theme In VS Code, open the Color Theme picker with File > Preferences > Color Theme .

What are the different color themes in Visual Studio?

Visual Studio themes Visual Studio features three different color themes: light, dark, and blue. It also detects High Contrast mode, which is a system-wide color theme designed for accessibility.

What is vscolor in Visual Studio?

Visual Studio provides an environment color service, known as the VSColor service, which allows you to bind the color values of your UI elements to a named entry containing color values for each Visual Studio theme. This ensures that your colors will automatically change to reflect the current user-selected theme or system High Contrast mode.

Is there a theme editor for Visual Studio 2017?

Color Theme Editor for Visual Studio 2017. Microsoft DevLabs. Allows users to create and edit Visual Studio themes. Themes can customize colors used for menus, toolbars, tabs, titlebars, the text editor, and other environment colors.

1 Answers

I did end up finding a way!

TL:DR:

Download JavaScript.tmLanguage and JavaScript.tmTheme.

  • Go to %USERPROFILE%\.vs\Extensions\javascript\Syntaxes (%USERPROFILE% usually is C:\Users\{username})
  • Create the folders if they are not present.
  • Paste the two files
  • Restart the VS, should have the vscode highlighting for js, jsx etc files!

If you want to port any vscode theme to Visual Studio,

  • In vscode generate color theme from current setting.(Ref.) This will be the tmTheme file
  • Get tmLanguage of the language from vscode's repo
  • Convert both json to plist. (I used plist)
  • Add filetypes to tmLanguage file if its not there.
  • Add both to %USERPROFILE%\.vs\Extensions\language\Syntaxes folder.
  • Done!

I have tested for VS2019, and as I followed VS docs, it seems like it should work till VS2015.

Screenshot: Sample react syntax highlighting in VS

like image 183
Riddhesh Avatar answered Nov 07 '22 07:11

Riddhesh
Sign in to Comment

Related questions

jest-haste-map: Haste module naming collision
Objects in JavaScript defined and undefined at the same time (in a FireFox extension)
When not to use Google Web Toolkit?
Can you make a HTTP PATCH request from Javascript?
Best way to secure javascript front end/REST back end architecture web site?
Good IDE for node.js + coffeescript + jasmine [closed]
How to disable scrolling in outer elements?
Detecting slow hardware/slow browsers with JavaScript
Transform XML with multiple XSL files
Memory leak in Angular's $compile?
Rotate uploaded pictures containing EXIF orientation in Parse Cloud Code
Different behavior for empty XML response between IE and Firefox
webpack export classes from multiple entry files
Paper.js Resize Raster/TextItem/Path by Dragging
Finding all elements with a scroll
chrome.runtime.sendMessage not working in Chrome Extension
window.outerWidth is 0 in Safari on iOS 10 beta
jQuery menu not loading PHP child categories
What exactly defer do?
Using React Router and Webpack 2 how to require external libraries only on certain routes?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!