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

Самое большое преимущество VSCode состоит в том, что он совершенно бесплатно. Вам не нужно платить любые сборы, вы можете получить редактор разрабатывать различный код, потому что он имеет высокое расширение, его можно использовать для записи Python, C ++, C # серия языков, таких как GO, DART.

Вы можете сделать VSCode удобным инструментом разработки с помощью следующих плагинов:

1. Класс языка программирования

Следующие плагины устанавливаются в зависимости от ситуации.

C/C++

Dart

dart-import

Go Doc

Python

2. Классы стиля кода

Beautify: Плагин форматирования кода, но Prettier теперь более рекомендуется.

Prettier - Code formatter: Плагины форматирования кода в настоящее время являются самым популярным интерфейсом.

Better Align: Выровнять код.

Better Comments: Лучший плагин для аннотаций, рекомендуется.

change-case: правила именования, такие как верблюжий регистр, именование с подчеркиванием и т. д., преобразуются друг в друга.

ESLint: Унифицируйте артефакт стиля кода во время групповой разработки, чтобы предотвратить конфликты кода из-за разных стилей кода.

Guides: Подсказка блока кода.

SonarLint: проверка качества кода, совместимость с ESLint, отсутствие конфликтующих правил.

3. Класс подсказки по коду

3.1 Angular

Разработка плагинов, необходимых для Angular.

Angular Snippets (Version 11)

3.2 React

Плагины, необходимые для разработки React.

ES7 React/Redux/GraphQL/React-Native snippets

React Native Tools

3.3 Vue

Разработка плагинов, необходимых для Vue.

Vetur

vue

Vue 3 Snippets

Vue Peek

Vue VSCode Snippets

3.4 HTML

Auto Close Tag: автоматическое закрытие тегов HTML.

Auto Rename Tag: изменение одного HTML-тега также изменит соответствующий ему тег.

3.5 JavaScript/TypeScript

Следующие два плагина импортируются автоматически. Просто введите имя экспортируемой функции в файл, и код импорта будет добавлен автоматически!Рекомендуемое использование!

Auto Import

TypeScript Hero

JavaScript (ES6) code snippets: Быстрое создание фрагментов кода.

3.6 CSS

Color Highlight: Плагин выделения цветом.

Color Picker: Плагин выбора цвета.

CSS Peek: может найти классы CSS, которые были объявлены в проекте.

px to rem: конвертировать px в rem.

Tailwind CSS IntelliSense: Подсказки по коду для атомизированной библиотеки CSS Tailwind.

3.7 Flutter

Разработайте плагины, необходимые для Flutter.

Flutter

Awesome Flutter Snippets

Flutter Widget Snippets

3.8 Мини-программа

Плагины, необходимые для разработки небольших программ.

minapp

3.9 Прочее

Bookmarks: Закладки можно установить в коде.

Bracket Pair Colorizer 2: отображать разные скобки разными цветами.

HTML CSS Support: Полный HTML и CSS.

HTML Snippets: HTML-фрагмент.

Image preview: Предварительный просмотр изображения в проекте.

Import Cost: определяет размер пакетов в импортированных проектах, что полезно при оптимизации проектов.

JavaScript Booster: Преобразует функции стрелок в обычные функции.

TODO Highlight: Выделите TODO в комментарии.

Todo Tree: автоматически переходить к месту, содержащему TODO в комментарии.

3.10 Серия "Использовать с осторожностью"

IntelliSense for CSS class names in HTML: получать подсказки для имен классов в файлах CSS при написании HTML.

Примечание. После включения этого плагина у VSCode будет длительное время поиска файлов, что не рекомендуется.

koroFileHeader: генерировать комментарии в начале файла и может генерировать комментарии функции JSDOC одним щелчком мыши.

Примечание. Иногда мне кажется, что автоматическая генерация раздражает, поэтому пока я ею не пользовался.

Live Sass Compiler: преобразование файлов Sass в файлы CSS.

Примечание. Полезно разрабатывать проекты без фреймворков, но с фреймворками нет необходимости преобразовывать файлы Sass в файлы CSS.

Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro: То же, что и выше, но преобразованные типы файлов более разнообразны.

4. редактор развернуть

4.1 Cocos-creator

Чтобы VSCode стал инструментом разработки Cocos, cocos-creator в настоящее время в основном используется для создания игр H5.

Cocos Debug

cocos-creator

4.2 Темы

Atom One Dark Theme

One Dark Pro

vscode-icons: Разнообразны значки предварительного просмотра файлов в левой части VSCode.

4.3 Языковые пакеты

Chinese (Simplified) Language Pack for Visual Studio Code: языковой пакет VSCode для китайского языка.

4.4 Инструменты

Browser Preview: Сделать VSCode встроенным в окно браузера.

Code Runner: Сделать VSCode способным запускать различные языки программирования напрямую.

Code Spell Checker: Определяет слова в проекте на наличие орфографических ошибок.

Debugger for Chrome: позволяет VSCode отлаживать код в Chrome.

Debugger for Firefox: позволяет VSCode отлаживать код в Firefox.

Docker: Включить VSCode для управления Docker.

Draw.io Integration: Вы можете создать блок-схему в VSCode.

Gist: позволяет VSCode быстро создавать фрагменты Gist.

Git History: вы можете быстро просмотреть историю коммитов Git.

gitignore: быстро генерировать файлы gitignore.

GitLens — Git с наддувом: Сделайте так, чтобы VSCode имел возможности управления Git.

Kite AutoComplete AI Code: на основе кода, который вы пишете, ИИ автоматически угадывает код, который вы можете написать следующим.

Live Server: Может запускать сервер и автоматически обновлять браузер при изменении кода, в основном для нативной разработки.

npm: в элементе обнаруженияpackage.jsonфайл, вы можете быстро запустить свой проект с помощью этого плагина.

npm Intellisense: Имя модуля импорта автозаполнения.

open in browser: быстро открывать HTML-файлы в браузере.

Partial Diff: Быстрое сравнение различий между двумя фрагментами кода.

Paste JSON as Code: автоматическое преобразование файлов JSON в декларативный код на различных языках, таких как TypeScript, C# и т. д.

Path Intellisense: при импорте файла появляется запрос адреса файла.

Project Manager: Управление проектами, если есть несколько часто нужно открыть проект, вы можете использовать плагин, вы можете очень легко переключаться между проектами.

Quokka.js: Плагин отладки.

5. Наконец

Некоторые конфигурации подключаемых модулей VSCode все еще очень проблематичны, и вам нужно потратить определенное количество времени, чтобы накопить, чтобы сделать VSCode мощным инструментом разработки.

Я никогда не понимал, почему редактор VSCode, который так сложно настроить, имеет такую огромную долю рынка фронтенд-разработки.

Теперь я понимаю, что он не только бесплатный, но самое главное, что он может реализовывать различные функции платной IDE, такой как WebStorm, через различные плагины, а также устраняет необходимость в разных IDE для разработки разных языков. неудобство в том, что с VSCode на руках можно разработать любой язык.