Vs code как изменить цвет комментариев

This article walks you through 3 different ways to change the color of comments in VS Code (Visual Studio Code). Without any further ado, let’s get our hands dirty.

Using Built-In VS Code Settings

1. Go to the Settings page:

• Mac: Code > Preferences > Settings (hotkeys: Command + ,)
• Windows: File > Preferences > Settings (hotkeys: Ctrl + ,)

2. Type “editor.tokenColorCustomizations” into the search bar, then click on “Edit in settings.json”:

3. By default, “editor.tokenColorCustomizations” is set to “null”. To customize the comment color, you can add the following:

{
  "comments": "[color code]"
}

For example, I will make my comments turn purple like this:

4. After saving the file, the change will be applied immediately. Here’s the result you get:

Creating a Custom Setting File for a Project

This method only affects a single project.

1. Create a new folder named “.vscode” at the root of your project you want to change comments’ color. Next, add a new file called “settings.json” inside that folder:

2. Add the following to the “settings.json” file (use any color code you want):

{
  "editor.tokenColorCustomizations": {
    "comments": "#b3ff00"
  }
}

3. Save the file and recheck your comments:

Using an Extension

There are many free extensions that could help us colorize comments in the ways we want. Just go to the Extensions section of VS Code and search for “comments”. A bunch of results will show up:

The one I am currently using is “Better Comments”, but you can try others if you want. Here’s how my comments look like:

Conclusion

Using comments with custom colors will help us to be less boring when writing code as well as easier to read later. Hope the above methods are helpful to you.

Further reading:

• VS Code: Set Preferred Quote Type for Quick Fixes
• VS Code: How to Collapse/Expand Blocks of Code
• VS Code: How to Render Whitespace Characters
• How to Change File Encoding in VS Code
• VS Code: How to Position/Align the Bottom Panel

You can also check out our Visual Studio Code topic page for more tips and tricks to improve your producibility and coding experience.

The Colorful Comments Extension will help you create more human-friendly comments in your code.
With this Extension, you will be able to categorise your cody by special colour into:

• Red (!)
• Blue (?)
• Green (*)
• Yellow (^)
• Pink (&)
• Purple (~)
• Mustard (todo)
• Grey (//)
• Commented out Code can also be Styled to make it Clear the Code shouldn’t be There.
• Any Other Comment Styles you’d like can be Specified in the Settings.

Configurations

This extension can be configured in User Settings or Workspace settings.

"colorful-comments.multilineComments": true
This setting will control whether multiline comments are styled using the annotation tags.
When false, multiline comments will be presented without decoration.

"colorful-comments.highlightPlainText": false
This setting will control whether comments in a plain text file are styled using the annotation tags.
When true, the tags (defaults: ! * ? // ~ & ^) will be detected if they’re the first character on a line.

colorful-comments.tags
The tags are the characters or sequences used to mark a comment for decoration.
The default 7 can be modifed to change the colors, and more can be added.

"colorful-comments.tags": [
  {
    "tag": "!",
    "color": "#FF2D00",
    "strikethrough": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  },
  {
    "tag": "?",
    "color": "#0076FF",
    "strikethrough": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  },
  {
    "tag": "//",
    "color": "#474747",
    "strikethrough": true,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  },
  {
    "tag": "^",
    "color": "#EAF622",
    "strikethrough": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  },
  {
    "tag": "*",
    "color": "#28FF00",
    "strikethrough": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  },
  {
    "tag": "&", 
    "color": "#FF06A0",
    "strikethrough": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  },
  {
    "tag": "~",
    "color": "#BE00FF",
    "strikethrough": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  },
  {
    "tag": "todo",
    "color": "#FF8C00",
    "strikethrough": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  }
]

Supported Languages

• BrightScript
• C
• C#
• C++
• Clojure
• CSS
• Dart
• Dockerfile
• Groovy
• HTML
• Java
• Javascript
• JavaScript React
• JSON with comments
• Less
• Lua
• Markdown
• Objective-C
• Objective-C++
• PHP
• PowerShell
• Python
• Sass
• SCSS
• TypeScript
• TypeScript React
• XML
• YAML

Перевод статьи «5 Visual Studio Code Hacks That You Will Thank Me For (And They’re Not Common Points Like «Install Prettier Extension»)».

Всем привет! Наверняка вам постоянно попадаются статьи с советами по повышению продуктивности работы в VS Code. Чаще всего в них предлагают «установить расширение Prettier для форматирования кода», «использовать сочетание клавиш Alt + Shift + клавиша «вниз» для дублирования кода» и т. п.

В этой статье я поделюсь несколькими хаками, которые нечасто вижу в подобных списках (за исключением № 5 — это будет довольно общий совет).

1. Автоматическое открытие файлов в новых вкладках

Разве не бесит, когда у тебя уже открыт файл А, ты хочешь открыть файл Б, но когда кликаешь на Б, он открывается, но зато файл А закрывается? Можно сделать двойной щелчок по файлу Б, чтобы открыть его в новой вкладке, но это как-то неинтуитивно, да и забывается.

Для решения этой проблемы поищите «workbench.editor.enablePreview» в ваших настройках и установите значение false для этой опции. После этого VS Code всегда будет открывать файлы в новых вкладках.

2. Изменение цвета комментариев

Иногда хочется изменить цвет комментариев. Например, я предпочитаю вот этот зеленый: так мне проще найти свои комментарии в коде.

Чтобы изменить цвет, зайдите в файл settings.json и добавьте в него следующий код (если такой код уже есть — удалите его и замените на этот).

  "editor.tokenColorCustomizations": {
    "comments": "#229977" // change to any color you like
  },

3. Изменение масштаба

Порой хочется получить более крупный вид файлов, папок и кода. Вы можете изменить масштаб, зажав Ctrl и нажимая + и -.

Кроме того, нажатие F11 спрячет панель задач и хедер VS Code, тем самым предоставив вам больше свободного пространства для удобства работы и повышения концентрации.

Примечание редакции Techrocks. В комментариях был дан еще один совет, касающийся изменения масштаба. Можно установить true для опции «editor.mouseWheelZoom». После этого, зажав Ctrl и прокручивая колесико мыши, можно будет менять масштаб только редактора, а не всего GUI.

4. Генерация пользовательских сниппетов

Пользовательский сниппет (если вы не знали) — это шаблон для кода. Вы нажимаете несколько клавиш, и у вас автоматически генерируется бойлерплейтный код, с которым вы можете работать. Если все еще не понятно — это как набрать «rsf» в React-файле и получить сгенерированный функциональный компонент (если, конечно, у вас установлено соответствующее расширение).

Чтобы создать пользовательский сниппет, зайдите на сайт https://snippet-generator.app/ и наберите там ваш сниппет. Обязательно заполните вкладку триггера — клавиши, которыми будет запускаться автоматическая генерация кода. Затем скопируйте получившийся сниппет. Вернитесь в VS Code, зайдите в File > Preferences > User Snippets > New Global Snippets и вставьте скопированный код. Вот и все.

5. Поменяйте тему редактора

Да, это очевидный совет. Но вы зайдите для этого на https://vscodethemes.com/ — там есть огромная коллекция тем, которые можно удобно просматривать в миниатюрах.