Як налаштувати VSCode для підвищення продуктивності

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

Чому код VS?

Розробники люблять це тому, що

  • Це налаштовується
  • Легке налагодження
  • Еммет
  • Розширення
  • Інтеграція Git
  • Інтегрований термінал
  • Інтелліссенс
  • Тематика та багато іншого ...

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

Термінал

Ви можете налаштувати свій термінал на використання iTerm2 та ZSh, і налаштувати термінал VS Code для використання цього.

Після налаштування Terminal > New TermiZsh запустіть інтегрований термінал VS Code і виконайте команду

source ~/.zshrc

або

. ~/.zshrc

для виконання вмісту файлу конфігурації .zshrc в оболонці.

Шрифт

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

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

Запуск із командного рядка

Запуск коду VS з терміналу виглядає круто. Для цього натисніть CMD + SHIFT + P, введіть команду оболонки та виберіть команду Встановити код у шляху . Потім перейдіть до будь-якого проекту з терміналу та введіть code .з каталогу, щоб запустити проект за допомогою VS Code.

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

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

Щоб запустити 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 -> Extensions
  • Шукайте розширення на ринку
  • Клацніть на Встановити

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.