Как настроить VSCode для повышения производительности

Редакторы кода развивались с годами. Несколько лет назад Visual Studio Code (VS Code) не существовало. Вероятно, вы использовали Sublime Text, Atom, Bracket и т.д. Но с выпуском VS Code он стал любимым редактором кода большинства разработчиков.

Почему VS Code?

Разработчикам это нравится, потому что

  • Это настраиваемый
  • Легкая отладка
  • Эммет
  • Расширения
  • Интеграция с Git
  • Встроенный терминал
  • Intellisense
  • Тематика и многое другое…

Теперь, когда вы увидели преимущества использования VS Code, в этой статье будет рассмотрена настройка VS Code и расширения, необходимые при использовании VS Code для максимальной производительности.

Терминал

Вы можете настроить свой терминал на использование iTerm2 и ZSh и настроить терминал VS Code для этого.

После настройки Zsh запустите интегрированный терминал VS Code Terminal > New Termiи выполните команду

source ~/.zshrc

или

. ~/.zshrc

для выполнения содержимого файла конфигурации .zshrc в оболочке.

Шрифт

FiraCode выглядит круто из-за поддержки лигатур. Загрузите и установите FiraCode, затем добавьте его в свой settings.jsonфайл.

"editor.fontFamily": "Fira Code","editor.fontLigatures": true,

Запуск из командной строки

Запуск VS Code из терминала выглядит круто. Для этого нажмите CMD + SHIFT + P, введите команду оболочки и выберите команду Установить код в пути . После этого перейдите к любому проекту из терминала и введите его code .из каталога, чтобы запустить проект с помощью VS Code.

Конфигурация

Конфигурации VS Code, не относящиеся к рабочему пространству, размещаются в файле settings.json. Вы можете настроить VS Code в соответствии со своими предпочтениями.

Чтобы запустить settings.json, нажмите

CMD + ,

Скопируйте и вставьте приведенный ниже код в файл settings.json:

{ "editor.multiCursorModifier": "ctrlCmd", "editor.formatOnPaste": true, "editor.wordWrap": "bounded", "editor.trimAutoWhitespace": true, "editor.fontFamily": "Fira Code", "editor.fontLigatures": true, "editor.fontSize": 14, "editor.formatOnSave": true, "files.autoSave": "onFocusChange", "emmet.syntaxProfiles": { "javascript": "jsx" }, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact" ], "javascript.validate.enable": true, "git.enableSmartCommit": true, "files.trimTrailingWhitespace": true, "editor.tabSize": 2, "gitlens.historyExplorer.enabled": true, "diffEditor.ignoreTrimWhitespace": false, "workbench.sideBar.location": "right", "explorer.confirmDelete": false, "javascript.updateImportsOnFileMove.enabled": "always",}

Расширения

Ниже приведены полезные расширения, которые могут улучшить ваш опыт разработчика при работе с кодовой базой.

Чтобы получить доступ к этим расширениям,

  • Перейти к View -> Extensiдополнениям
  • Искать расширения на торговой площадке
  • Нажмите на Установить

1. Автоматический импорт

С этим расширением вам не нужно вручную импортировать файлы. Если вы работаете над проектом на основе компонентов, просто введите имя компонента, и оно будет автоматически импортировано.

2. Добавьте комментарии jsdoc.

Это добавляет в код блок комментариев. Чтобы использовать его, выделите первую строку функции, нажмите CMD + SHIFT + Pи выберите « Добавить комментарии к документу».

3. ESDoc MDN

В определенных сценариях мы склонны забывать, как работает конкретная вещь. Вот где это расширение становится полезным. Вам не нужно запускать веб-браузер, чтобы узнать синтаксис. Все, что вам нужно, это ввести

//mdn [object].[method];

4. CSS Peek

Как следует из названия, это помогает вам ознакомиться с правилами, применяемыми определенным стилем в кодовой базе, и его спецификой. Это удобно при работе с устаревшими кодовыми базами.

5. GitLens

GitLens увеличивает ваши возможности с помощью Git. Это поможет вам сделать гораздо больше, например, беспрепятственно изучать репозитории Git, просматривать изменения кода, авторство и многое другое.

6. ESLint

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

Чтобы установить ESLint локально, запустите

npm install eslint

или глобально используя

npm install -g eslint

Вам также потребуется создать .eslintrcфайл конфигурации. Если вы установили ESLint локально, запустите

./node_modules/.bin/eslint --init

или

eslint --init

для глобальной установки.

7. Отладчик для Chrome

Это позволяет отлаживать код JavaScript прямо из браузера Google Chrome.

8. Google Fonts

Adding Google fonts just got easier with this extension. You no longer need to search for fonts in the browser. To access a list of fonts, pressCMD + SHIFT + P and search for Google fonts to proceed.

9. TODO Highlight

With a lot to work on which needs to be prioritized, sometimes you may tend to forget tasks yet to be completed. TODO highlight makes these easily seen by highlighting them.

10. Docker

You can create Dockerfiles on the fly with this extension. It also provides syntax highlighting, intellisense and much more.

Press CMD + SHIFT + P and search for Add Docker files to workspace.

11. Code Spellchecker

This comes in handy to identify typographical errors within the codebase.

12. Import Cost

Import Cost shows the impact of imported packages within the code. It helps measure performance bottlenecks.

13. HTMLHint

This extension validates your HTML helping you to write standards-compliant code.

14. Peacock

This extension gives you the ability to change the colour of your workspace. It is ideal when you have multiple VS Code instances and you want to quickly identify a particular instance.

After installing Peacock, click on the settings icon > settings, select workspace settings tab, click on {} and paste the code below.

{ "workbench.colorCustomizations": { "activityBar.background": "#e90b8d", "activityBar.foreground": "#fff", "activityBar.inactiveForeground": "#b5b5b5", }, "peacock.affectedElements": [ "activityBar", ]}

You can also add titleBar and statusBar to the affectedElements and add color customizations for them within the colorCustomizations section.

To use one of the default colors, press CMD + SHIFT + P, type peacock and select your preferred theme. This overrides the color settings within the settings.json file defined for that workspace.

15. Prettier

Do you always press the spacebar or tab key when coding? Here comes Prettier to the rescue. It formats lines of code and makes it readable.

Check out the awesome things you can do with Visual Studio Code here.

Feel free to drop what works for you in the comment section and share this article.

Also, check out my blog for more articles.