Как настроить VS Code для увеличения продуктивности

Перевод статьи «How to set up VSCode to improve your productivity».

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

Почему VS Code?

Любви разработчиков к этому редактору способствуют (среди прочих) такие его особенности:

• Настраиваемость
• Легкость отладки
• Emmet
• Расширения
• Интеграция Git
• Встроенный терминал
• Intellisense

Теперь, когда вы знаете о преимуществах использования VS Code, давайте рассмотрим, как его настроить и какие расширения установить, чтобы использовать этот редактор максимально эффективно. (Примечание редакции: в статье приводятся советы для macOS, но многие из них универсальны. Для вызова палитры команд вместо CMD + SHIFT + P можно использовать CTRL + SHIFT + P).

Терминал

Вы можете настроить ваш терминал для использования iTerm2 и Zsh, а затем сделать так, чтобы встроенный терминал в VS Code использовал эти настройки.

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

source ~/.zshrc

или

. ~/.zshrc

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

Шрифт

Благодаря поддержке лигатур хорошо смотрится FiraCode. Скачайте и установите этот шрифт, а затем добавьте его в ваш файл settings.json. (Примечание редакции: для доступа к файлу выберите в палитре команд Open Settings (JSON)).

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

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

Хорошо бы иметь возможность запускать VS Code из терминала. Для этого нажмите CMD + SHIFT + P, введите shell command и выберите Install code command in path. После чего перейдите в любой проект из терминала и, находясь в выбранной директории, введите «code .», чтобы запустить проект с помощью VS Code.

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

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

Скопируйте и вставьте этот код в файл 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",
}

Расширения

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

Чтобы найти эти расширения,

1. Перейдите View -> Extensions
2. Найдите нужное расширение
3. Кликните «Install».

1. Auto Import

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

2. Add jsdoc comments

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

3. ESDoc MDN

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

//mdn [object].[method];

4. CSS Peek

Как следует из названия (peek – «заглянуть»), это расширение помогает вам просмотреть правила, задействованные при применении определенного стиля в кодовой базе. Это бывает удобно при работе с legacy-кодом.

5. GitLens

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

6. ESLint

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

Для локальной установки запустите

npm install eslint

а для глобальной –

npm install -g eslint

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

./node_modules/.bin/eslint --init

или

eslint --init

– в случае глобальной инсталляции.

7. Debugger for Chrome

С его помощью вы сможете осуществлять отладку вашего JavaScript-кода прямо из браузера Google Chrome.

8. Google Fonts

С помощью этого расширения облегчается установка шрифтов Google. Больше не придется искать их в браузере. Чтобы получить список шрифтов, нажмите CMD + SHIFT + P и поищите Google fonts.

9. TODO Highlight

Когда вам нужно проделать много всего, и каждая задача имеет свой приоритет, легко забыть, что еще не сделано. TODO highlight подсвечивает задачи, так что вы сможете легко их увидеть.

10. Docker

Благодаря этому расширению вы сможете на лету создавать Dockerfiles. Также предоставляется подсветка синтаксиса, intellisense и многое другое.

Нажмите CMD + SHIFT + P и поищите Add Docker files to workspace.

11. Code Spellchecker

Это расширение позволяет с легкостью находить опечатки в коде.

12. Import Cost

Import Cost показывает, как импортируемые пакеты влияют на код. Это позволяет оценивать проблемы с производительностью.

13. HTMLHint

Это расширение проверяет ваш HTML, помогая вам писать код, совместимый со стандартами.

14. Peacock

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

После установки Peacock кликните на иконке настроек > settings, выберите вкладку настроек рабочего пространства, кликните на {} и вставьте следующий код:

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

Также можно добавить titleBar и statusBar в affectedElements и настрйоки цвета для них в разделе colorCustomizations.

Чтобы использовать один из дефолтных цветов, нажмите CMD + SHIFT + P, введите peacock и выберите тему по своему вкусу. Это перезапишет настройки цвета в файле settings.json для данного рабочего пространства.

15. Prettier

При написании кода все время приходится набирать пробелы или табы? На помощь вам придет Prettier. Это расширение форматирует строки кода и делает код читаемым.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]