Серия ВСК

∘ Введение
∘ Серия историй
∘ Основная часть по расширению VSC
∘ 1. Поддержка Javascript/Node/React Language в расширении VSC
∘ 2. Npm на расширении VSC
∘ Обзор

Введение

Visual Studio Code — это мощная и бесплатная IDE, поддерживающая разработку более 10 языков и богатый рынок, которым управляет официальный представитель Microsoft. В этой статье мы поделимся опытом работы с более чем 100 расширениями и вырезаем лучшие расширения для Javascript Node React, которые нельзя пропустить. Кроме того, мы рекомендуем эти расширения, чтобы повысить производительность на 30 % и повысить эффективность написания кода.

В этом разделе Visual Studio Code 101 #6: 10+ расширений Javascript Node React в рекомендации мы рекомендуем вам ознакомиться с введением JavaScript в Visual Studio Code, в котором показано, как использовать VS Code. как среда Javascript/Node, а Visual Studio Code включает в себя встроенный javascript intellisense, отладку, форматирование, навигацию по коду, рефакторинг и многие другие расширенные языковые функции.

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

Сюжетная серия

Теперь я надеюсь поделиться некоторым опытом, чтобы сократить разрыв между новичком и экспертом. В этой серии будет представлена ​​миграция Visual Studio Code 101 с 0 на 100 из другой IDE, она содержит следующие части:

Серии

  1. Visual Studio Code 101 #1: Введение и начало работы
  2. Visual Studio Code 101 #2: 20+ рекомендуемых расширений VSC, которые необходимо установить для общего назначения
  3. Visual Studio Code 101 #3: более 20 рекомендуемых расширений VSC, которые необходимо установить для продвинутых целей
  4. Visual Studio Code 101 #4: расширение 7+ C_C++ в рекомендации (Clang-Format)
  5. Visual Studio Code 101 #5: рекомендуется 10+ расширений Python
  6. Visual Studio Code 101 #6: рекомендуется 10+ расширений Javascript Node React
  7. Visual Studio Code 101 #7: рекомендуется 10+ расширений HTML CSS
  8. Visual Studio Code 101 #8: рекомендуется 10+ контейнеров Docker и kubernetes
  9. Visual Studio Code 101 #9: 10+ CICD Jenkins, Gitlab, Github Action и расширение конвейера Azure в рекомендации
  10. Visual Studio Code 101 #10: расширение DevOps Engineer в рекомендации
  11. Visual Studio Code 101 #11: рекомендуемое расширение Cloud Engineer

1. Поддержка Javascript/Node/React Language в расширении VSC

Ваш Javascript/Node/React идеально подходит для VSCode IDE!! Прежде всего, встроенная функция VScode поддерживает потерю функции javascript, поэтому я рекомендую вам сначала ознакомиться с введением JavaScript в коде Visual Studio, если вы не имеете никакого представления о расширении Javascript / Node / React.

ESLint

  • Кодовое имя: dbaeumer.vscode-eslint
  • Описание: интегрирует JavaScript ESLint в VS Code.
  • Данный рейтинг: ⭐⭐⭐⭐⭐ 5 звезд
  • Ссылка на ВСК: Ссылка
  • Комментарий: Вы должны использовать это. Я использую это расширение для форматирования своих js-файлов с помощью правила eslint, и я делюсь правилом eslint со своей командой, чтобы выровнять один и тот же стиль кодирования. Если вы не установили ESLint локально или глобально, сделайте это, запустив npm install eslint в папке рабочей области для локальной установки или npm install -g eslint для глобальной установки. Действительно рекомендация.
  • Быстрый просмотр:

Вавилонский JavaScript

  • Кодовое имя: mgmcdermott.vscode-language-babel
  • Описание: Подсветка синтаксиса VSCode для современного JavaScript.
  • Данный рейтинг: ⭐⭐⭐⭐ 4 звезды
  • Ссылка на ВСК: Ссылка
  • Комментарий: Вы можете использовать это. Я использую это расширение для кодирования, реагирующего на JSX с подсветкой синтаксиса JavaScript. Это расширение поддерживает ES201x JavaScript, React (включая JSX), FlowType и выделение кода GraphQL в строках шаблона.
  • Быстрый просмотр:

Отладчик JavaScript (ежедневно)

  • Кодовое имя: ms-vscode.js-debug-nightly
  • Описание: Расширение для отладки программ Node.js и Chrome.
  • Данный рейтинг: ⭐⭐⭐⭐⭐ 5 звезд
  • Ссылка на ВСК: Ссылка
  • Комментарий: Вы можете использовать это. Я использую это расширение для отладки JavaScript с помощью Chrome. Эта функция расширения «Профилирование» прекрасно показывает общую производительность всего процесса.
  • Быстрый просмотр:

Усилитель JavaScript

  • Кодовое имя: sburg.vscode-javascript-booster
  • Описание. Повысьте свою производительность с помощью расширенного рефакторинга JavaScript/TypeScript и команд.
  • Данный рейтинг: ⭐⭐⭐⭐ 4 звезды
  • Ссылка на ВСК: Ссылка
  • Комментарий: Вы можете использовать это. Я использую это расширение для рефакторинга реагирующих файлов. Эта функция расширения «Действия кода» отлично подходит для ускорения рефакторинга.
  • Быстрый просмотр:

Набор фрагментов кода JavaScript

  • Кодовое имя: akamud.vscode-javascript-snippet-pack
  • Описание: Пакет фрагментов, который поможет вам более продуктивно работать с JavaScript.
  • Данный рейтинг: ⭐⭐⭐⭐ 4 звезды
  • Ссылка на ВСК: Ссылка
  • Комментарий: Вы можете использовать это. Я использую это расширение для кодирования javascript DOM с помощью ярлыка, и я могу создать предопределенный метод, такой как «[ae] addEventListener». Это хорошая функция, если вам нравится использовать ярлык для создания базы кода.
${1:document}.addEventListener('${2:load}', function(e) {
        ${3:// body}
});
  • Быстрый просмотр:

Фрагменты кода JavaScript

  • Кодовое имя: xabikos.JavaScriptSnippets
  • Описание: Фрагменты кода для JavaScript в синтаксисе ES6.
  • Данный рейтинг: ⭐⭐⭐⭐ 4 звезды
  • Ссылка на ВСК: Ссылка
  • Комментарий: Вы можете использовать это. Я использую это расширение для кодирования javascript ES6 с помощью ярлыка, и я могу создать предопределенный метод, такой как «imp→ импортирует весь модуль import fs из ‘fs’;». Это хорошая функция, если вам нравится использовать ярлык для создания базы кода.
  • Быстрый просмотр:

Фрагменты ES7+ React/Redux/React-Native

  • Кодовое имя: dsznajder.es7-реагировать-js-фрагменты
  • Описание: Расширения для React, React-Native и Redux в JS/TS с синтаксисом ES7+. Настраиваемый. Встроенная интеграция с prettier.
  • Данный рейтинг: ⭐⭐⭐⭐ 4 звезды
  • Ссылка на ВСК: Ссылка
  • Комментарий: Вы можете использовать это. Я использую это расширение для кодирования реакции и сокращения с помощью ярлыка. Это хорошая поддержка javascript и сниппетов react/redux в es7+ с функциями плагина babel.
  • Быстрый просмотр:

JavaScript и TypeScript Nightly

  • Кодовое имя: ms-vscode.vscode-typescript-next
  • Описание: включает typescript@next для поддержки встроенной поддержки JavaScript и TypeScript в VS Code.
  • Данный рейтинг: ⭐⭐⭐⭐⭐ 4 звезды
  • Ссылка на ВСК: Ссылка
  • Комментарий: Вы можете использовать это. Я использую это расширение, чтобы машинописный текст (typescript@next) в качестве встроенной версии машинописного текста по сравнению с кодом использовался для поддержки javascript и машинописного текста intellisense.
  • Быстрый просмотр:

2. Npm на расширении VSC

нпм

  • Кодовое имя: eg2.vscode-npm-script
  • Описание: поддержка npm для VS Code.
  • Данный рейтинг: ⭐⭐⭐⭐⭐ 5 звезд
  • Ссылка на ВСК: Ссылка
  • Комментарий: Вы должны использовать это. Я использую это расширение для запуска скрипта npm package.json для сборки веб-пакета или запуска сервера. Это расширение поддерживает запуск сценариев npm, определенных в файле package.json, и проверку установленных модулей на соответствие зависимостям, определенным в package.json.
  • Быстрый просмотр:

Интеллектуальная поддержка npm

  • Кодовое имя: christian-kohler.npm-intellisense
  • Описание: Плагин Visual Studio Code, который автоматически заполняет модули npm в операторах импорта.
  • Данный рейтинг: ⭐⭐⭐⭐⭐ 5 звезд
  • Ссылка на ВСК: Ссылка
  • Комментарий: Вы должны использовать это. Я использую это расширение для форматирования модуля импорта npm в начале файлов JS, и мне не нужно добавлять модуль потери самостоятельно. Хороший инструмент для ленивых. Это расширение автоматически заполняет модули npm в операторах импорта.
  • Быстрый просмотр:

Интеллектуальное определение пути

  • Кодовое имя: christian-kohler.path-intellisense
  • Описание: плагин Visual Studio Code, который автоматически заполняет имена файлов.
  • Данный рейтинг: ⭐⭐⭐⭐⭐ 5 звезд
  • Ссылка на ВСК: Ссылка
  • Комментарий: Вы должны использовать это. Я использую это расширение для завершения относительного пути при импорте файла в файлы html/css/js. Автор - christian-kohler, который создал еще одно расширение - npm Intellisense. Хороший инструмент для ленивых. Это расширение автозаполнения имен файлов.
  • Быстрый просмотр:

Поиск node_modules

  • Кодовое имя: jasonnutter.search-node-modules
  • Описание: Быстрый поиск в папке node_modules.
  • Данный рейтинг: ⭐⭐⭐⭐⭐ 5 звезд
  • Ссылка на ВСК: Ссылка
  • Комментарий: Вы должны использовать это. Я использую это расширение, чтобы найти разные локальные и глобальные модули узлов, иногда я не могу найти, что не так в модуле множественного импорта узлов. Это расширение позволяет вам быстро перемещаться по файлу внутри каталога node_modules вашего проекта.
  • Быстрый просмотр:

Краткое содержание

В этом посте мы рекомендуем просмотреть расширение JavaScript в коде Visual Studio, чтобы создать среду разработки javascript/node/react с категорией расширений javascript/node/react из двух частей и сократить лучшие расширения, которые вы должны попробовать. Опять же, мы рекомендуем эти расширения, чтобы повысить производительность на 30 % и повысить эффективность написания кода.

2 части категории расширений javascript/node/react

  1. Поддержка Javascript/Node/React Language в расширении VSC
  2. Npm в расширении VSC

Если у вас есть хорошая идея или вы рекомендуете расширение VSC, пожалуйста, сообщите мне! Спасибо.

Большинство изображений из каждого расширения. У них есть авторские права.