Оригинальный перевод:medium.com/better-pro Страна…
Автор: Энн Адая
Нравится + Подпишитесь + Избранное, поощряйте авторов писать лучшие уроки ❤️
Перевод: Сообщество Туке
Наличие хорошего текстового редактора важно для продуктивности разработки, обучения и управления временем.
Почему VSCode?
VSCode, вероятно, редактор кода №1, и мне он нравится.
Я думаю, причина его популярности просто в том, что VSCode предоставляет функции, которые нужны каждому разработчику, включая функции, о которых они даже не подозревали. В этом секрет красоты VSCode — он всегда вас удивляет.
Я считаю, что один из лучших способов завоевать сердце человека — это помочь ему осознать, что ему нужно, до того, как он узнает, что ему нужно. На самом деле, это один из самых сильных стимулов в маркетинге, и VSCode отлично с этим справляется.
Большинство энтузиастов VSCode — разработчики JavaScript — VSCode был создан для современных технологий. В наши дни популярные фреймворки JavaScript отлично подходят для VSCode — в нем есть все, что вам нужно.
Выбирая текстовый редактор, обязательно выбирайте самый последний и лучший. Технологии быстро меняются, и вы не хотите отставать. Чтобы быть отличным разработчиком, время всегда должно быть на вашей стороне.
我并不是说你应该从一种语言跳到另一种语言，或者从一个框架跳到另一个框架---- 这太疯狂了。 What you need is to stay updated, stay sharp, stay up to date with the latest information and compare them to what you're using now, understand the differences, the pros and cons, watch the support and community evolve, because stability is also важный.你会惊讶地发现你的生产力会如此之高！
VSCode имеет большое сообщество с открытым исходным кодом. Его рост и потенциал безграничны, и в будущем научиться программировать и программировать самому будет проще.
1. Автоматически закрывать теги HTML
Наличие этого расширения является обязательным. Достаточно сложно и безумно писать код, не тратя часы на поиск ошибок только потому, что не хватает одного закрывающего тега div/div.
Вы можете поблагодарить меня позже!
Он автоматически добавляет закрывающую скобку открывающего тега, который вы только что добавили, а затем размещает курсор мыши между тегами. Круто, правда?
Адрес плагина автоматического закрытия тега HTML
2. Встроенный терминал VSCode
Размещение команды/терминала в редакторе VSCode не только облегчит вам жизнь, но и сэкономит место. Благодаря VSCode сделайте свой терминал удобным.
Адрес загрузки встроенного терминала в Visual Studio Code
3. Код против шейдера
Работа со скобками является проблемой для большинства разработчиков, особенно при работе с большими проектами. Еще хуже, если у вас есть спагетти-код. Поверьте мне, Bracket Pair Colorizer избавит вас от стресса.
При большом количестве вложенного длинного кода, особенно при использовании Javascript, почти невозможно определить, какие скобки соответствуют друг другу. Использование Colorizer Bracket Pair может помочь вам легче найти начало и конец. Тот факт, что они окрашены, делает ваш код более читабельным. Загрузите это!
Да, пожалуйста!
Адрес плагина Bracket Pair Colorizer
4.ESLint/TSLint
Основная функция этого расширения — автоматическое форматирование кода для согласованного форматирования всей командой. ESLint также можно настроить на автоматическое форматирование кода, и каждый раз, когда вы совершаете ошибку, он будет отправлять вам множество предупреждений.
У него миллионы загрузок по какой-то причине.
5. Проверка правописания кода
Если вы не являетесь носителем английского языка, как я, английский не является вашим родным языком, может быть, даже не вашим вторым языком, тогда проверка орфографии в коде очень полезна, чтобы защитить ваш код от опечаток и ошибок. И никто не идеален, и каким бы беглым ни был ваш английский, орфографические ошибки неизбежны — вы не хотите тратить время на их поиск, особенно если у вас код в стиле спагетти.
6. Установите синхронизацию VSCode
Если вы используете несколько машин, как я, это расширение будет вам полезно. Синхронизация настроек сохраняет все ваши компьютеры/ноутбуки с одинаковыми настройками VSCode.
Если вы разработчик, работающий как на офисном, так и на домашнем компьютере, вы в основном будете работать на разных рабочих станциях. Изменение настроек вручную занимает много времени, потому что, если честно, нам нужно время от времени менять настройки в зависимости от проекта, над которым мы работаем, поэтому, чтобы снять стресс с программирования, я рекомендую вам использовать это расширение, чтобы все изменения вы make будет автоматически синхронизирован со всеми вашими машинами и рабочими станциями.
Адрес загрузки настроек синхронизации
7. Prettier
Ранее я упоминал ESLint, который помогает автоматически форматировать согласованный код и отображать некоторые предупреждения и ошибки.
Как разработчик React/Native, поддержание чистоты и правильного выравнивания кода является обязательным — это не подлежит обсуждению. Правильный отступ и разделение кода для лучшего чтения является приоритетом, особенно при работе с длинным кодом — разделение стилей, функций и обработчиков имеет решающее значение не только для вас. То же самое касается и ваших коллег.
Его очень легко настроить, и он автоматически форматирует код при сохранении.
адрес загрузки prettier/prettier-vscode
8. Material Icon Theme
Это расширение предоставляет красивые и симпатичные значки для вашего списка файлов. Если файл представляет собой JavaScript, он будет содержать значок JavaScript рядом с именем файла. Если вы больше разработчик, ценящий эстетику, то это расширение для вас. Он широко используется тысячами пользователей.
Адрес загрузки темы Material Icon
9. Path Intellisense
Это расширение незаменимо в моей жизни. Поверьте, это сэкономит вам много времени. Я забывчивый, как фронтенд-разработчик с кучей компонентов, расширений, пакетов (особенно в формате React), мне нужно что-то, что поможет мне с путями к файлам. Работать над большими проектами — безумие, а Path Intellisense — ваш лучший друг. Intellisense автоматически заполнит или покажет предложения для вас, когда вы попытаетесь ввести путь в справочнике.
Path Intellisense также может помочь автозаполнить все скрытые файлы.
Путь Адрес загрузки Intellisense
10. Предварительный просмотр в браузере
Это расширение просто необходимо для фронтенд-разработчиков. Загрузите этот подключаемый модуль для браузера для предварительного просмотра, чтобы вы могли завершить всю работу в своем VSCode, а не открывать другое окно, чтобы ваш браузер Chrome мог видеть изменения, которые вы вносите в код. Это покажет вам предварительный просмотр кода браузера, поэтому не переключайтесь на браузер, чтобы увидеть даже небольшие изменения. Это поможет вам сэкономить время и место.
Адрес для загрузки предварительного просмотра в браузере
11. Отладчик Chrome
Это мое любимое и наиболее часто используемое расширение VSCode. Мне как веб-разработчику и разработчику мобильных приложений очень помог отладчик для Chrome. Особенно для разработчиков JavaScript это может сэкономить много времени на внесение небольших изменений. Это очень полезно для отладки — помогает очень быстро устранять и выявлять ошибки.
Консоль является мощной, начиная с обнаружения строки и функции, в которой находится ошибка, и заканчивая обработкой ее данных.
12. Фрагмент кода JavaScript (ES6)
Если вы разработчик JavaScript, это будет вашим лучшим другом. Независимо от того, какой фреймворк JavaScript вы используете, это расширение поможет вам. Если вы будете вводить один и тот же общий код снова и снова, я скажу, что это не очень эффективно.
Этот удобный фрагмент кода представляет собой облегченное расширение библиотеки, которое связывает любой стандартный вызов JavaScript, поэтому просто введите код быстрого доступа, и весь общий код будет автоматически напечатан в редакторе. Это расширение поддерживает не только Javascript ES6, но и Typescript, Reactjs, Vue и HTML.
Адрес загрузки фрагмента кода Javascript (ES6)
13. Live Server
При использовании Live Server это расширение VSCode поможет вам открыть живой веб-сервер текущего проекта. Обычно при использовании такого конструктора, как Webpack, он обычно выполняет свою работу, но это расширение оказалось более полезным. Вы просто щелкаете правой кнопкой мыши и открываете с активным сервером, и он сделает все остальное.
14. Quokka
Для разработчиков JavaScript Quokka известен как современный блокнот. Он создан, чтобы помочь каждому разработчику с проверкой кода. Это идеальное решение.
По сравнению с другими расширениями VSCode, оно очень легкое, эффективное и мощное. Это улучшит ваш рабочий процесс, работает в режиме реального времени и даст вам немедленную обратную связь.
Что он делает, так это использует фиксированный тип цвета для каждого результата, поэтому разработчики могут легко понять выполнение потока.
15. Live Share
Прямая трансляция — одна из самых продвинутых функций текстового редактора VSCode. Отлично работает с членами команды. Одна из его функций — позволить каждому разработчику делиться фрагментами кода с другими разработчиками в режиме реального времени.
Это идеально и помогает командному сотрудничеству стать более эффективным и продуктивным. Live Share позволяет мгновенно обмениваться текущими проектами даже во время отладки — как же это круто!
Соавторам не нужно устанавливать какие-либо репозитории, SDK или что-либо еще для подключения к текущему коду других разработчиков. Каждый в команде может исследовать и устранять проблемы удаленно посредством совместных собраний.
16. Github Extension
Если ваша команда использует Github, или вы используете Github в качестве репозитория своего проекта, или вы хотите использовать репозиторий исходного кода другого разработчика, то это расширение для вас.
Кстати, Github теперь принадлежит и управляется Microsoft для тех, кто не знает, поэтому Github и VSCode теперь являются частью продукта Microsoft.
Используя расширение Github, теперь вы можете легко подключать репозитории других разработчиков, репозитории ваших любимых разработчиков и даже свои собственные. Вы можете легко это сделать, если регулярно пользуетесь Github.
Адрес загрузки расширения Github
17. GitLens
Gitlens — еще одно отличное расширение. Он добавляет к текущим функциям VSCode Git возможность параллельного сравнения кода с предыдущими фиксациями и изменениями и другие интересные функции.
GitLens — адрес загрузки Git с наддувом
18. NPM
Каждый современный разработчик уже знает, что такое NPM и почему это важно. Node Package Manager — это расширение, помогающее управлять файлами Package.json. Он предупредит вас, если есть требуемые, но не установленные зависимости, а также контроль версий для пакетов NPM.
Большинство ошибок и ошибок, над которыми я работал, являются от использования пакетов, функций и функций NPM, поскольку он не совместим с другими пакетами, они не работают должным образом.
Это расширение VSCode требуется:
19. Beautify
Beautify — еще одно отличное расширение для форматирования кода, почти такое же, как Prettier, о котором я упоминал ранее. Сейчас у него почти 12 миллионов загрузок, поэтому здесь нет ничего, что могло бы убедить вас в том, почему это расширение так полезно.
Он форматирует код, написанный на Javascript, JSON, Sass, CSS и HTML.
20. Live Sass Compiler
Если вам нравится стиль Sass или вы просто используете Sass, потому что это часть требований вашего проекта, тогда это расширение VSCode для вас!
Он компилирует файлы SASS / SCSS в файлы CSS на лету и автоматически дает вам предварительный просмотр вашего приложения или скомпилированных стилей в браузере.
Адрес загрузки компилятора Live Sass
21. Emmet
Я использую Emmet с тех пор, как начал использовать VSCode. Это помогает каждому разработчику увеличить скорость написания кода. Используя это расширение, вскоре вы не сможете представить код без него.
реальная история:
Вот дополнительный бонус: шпаргалка по документации Emmet:
22. VSCode Icons
Это для наших фронтенд-разработчиков. Это похоже на значки материалов, о которых я упоминал ранее, только с другим дизайном. Нравится ли нам, фронтенд-разработчикам, видеть все правильно? Таким образом, этот значок помогает вам увидеть, какие файлы у вас есть, и являются ли они HTML, CSS, Javascript и т. д.
23. Color Picker
Расширение Color Picker помогает вам легко выбирать цвета в файлах CSS. Это немедленно отразится или будет применяться к свойству, над которым вы сейчас работаете. Он также доступен, если вы предпочитаете использовать цвета RGBA.
24. Фрагменты ES7, React, Redux и GraphQL
Это для продвинутых разработчиков, которые используют фреймворки JavaScript, такие как React, наряду с другими технологиями, совместимыми с их продуктами и сложными приложениями.
Вводить стандартный код снова и снова неэффективно. С помощью этого фрагмента кода вы можете легко создавать компоненты на основе классов, функциональные компоненты, импорт, методы жизненного цикла и многое другое, введя код быстрого доступа, одно из моих наиболее часто используемых расширений с момента использования Reactjs и React Native.
ES7 react / redux / graphql / React-Native snippets
25. REST Client
Другой расширенный инструмент, расширение Rest Client, может помочь вам использовать другие сторонние инструменты и API. Это полезно, если вам нужно легко выполнять HTTP-запросы.
Это расширение позволяет легко вызывать конечные точки и API непосредственно в редакторе кода. Это экономит время — вы можете использовать эту опцию, не переключая запросы туда и обратно в браузере или Postman.
Спасибо всем за чтение!
Хотите узнать больше интересных практических технических руководств? ПриходитьСообщество ТукеМагазин вокруг.