Рекомендация плагина кода VS

внешний интерфейс Chrome CSS

опыт:

В последнее время серийные номера sublime и webstorm часто сбоят, и цепочка часто сбрасывается в критические моменты. У меня есть глубокое понимание. У меня есть друзья, которые также используют код VS. По сравнению с такими редакторами, как atom, sublime и webstorm, лично я считаю VS code хорошим редактором, больше плагинов, чем у возвышенного, лучший интерфейс, чем у Atom, и более легкий, чем у webstorm. Можно сказать, что преимущества каждой компании собраны в одном, и ключ в том, что это бесплатно, бесплатно, бесплатно, и больше не нужно беспокоиться об оплате редактора, и это очень похоже на правильное.

image.png

Settings Sync

Синхронизированная конфигурация, а потом на разных хостах раз и навсегда

  1. Создайте суть на GitHub
  2. Вы можете настроить карту gist name в настройках

Хорошие новости, сколько плагинов вы можете загрузить одним щелчком мыши, хотите ли вы узнать (это как рекламный ход, ха-ха)

Перезапустите после загрузки плагина синхронизации настроек. ctrl + shift + p, затем введите sync, затем выберите дополнительные параметры → Скачать суть из общедоступной конфигурации Затем нажмите ctrl + shift + p, введите синхронизацию, выберите загрузку конфигурации и скопируйте в нее эту строку кода.d3bc45d8096f6bc3d9d46c69ed7052cdОК, сделано (Возможно, найдутся люди, которые этого не понимают. Карту операции в формате GIF я загружу позже, а я ускользну первым)

HTML Snippets

Очень полезные и базовые фрагменты кода H5 и советы

Atom Keymap

Sublime Text Keymap and Settings Importer

IntelliJ IDEA Keybindings

Замена привычки сочетания клавиш (выберите одно, несколько будут конфликтовать)

Color-Highlight

Выделите цвет в редакторе.

Guides

Линия выравнивания метки кода.

HTML CSS support

css автозаполнение

Npm Intellisense

Плагины кода автозаполнения, импортированные модулями npm в операторах импорта

Debugger for Chrome

Позвольте vscode отображать функцию отладки Chrome, статические страницы могут использовать vscode для отладки точки останова.

background

установить фон

beautify

Украсьте JavaScript, JSON, CSS, Sass и HTML в Visual Studio Code.

Auto Close Tag

Автоматически закрывать теги HTML

###Auto Rename Tag  При изменении тегов HTML автоматически изменять соответствующие теги

Bracket Pair Colorizer

Пусть скобки имеют отдельные цвета, легко различимые

Open-In-Browser

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

Live Server

Live Server для серверных страниц, таких как PHP

Indenticator

Выделение отступа

IntelliSense for CSS class names

Советы по интеллектуальному именованию имени класса CSS

JavaScript (ES6) code snippets

Подсказки по синтаксису ES6

Path Intellisense

При вводе пути в редакторе автодополнение

Git History

Просмотр и поиск журнала git, а также диаграмм и деталей. Просмотр предыдущей копии файла. Просмотр и поиск истории

CSS Peek

Соответствующий css (класс и идентификатор) можно найти в строке исходного кода. Отображается в этом файле css и в первых нескольких строках.

Easy WXLESS

Файл WXSS апплета Wechat выделен, сохранение может быть автоматически сгенерировано и синхронно скомпилировано в файл css с тем же именем.

px2rem

значение px в бэр

Vue-плагин

vetur

Подсветка синтаксиса, IntelliSense, Emmet Обратите внимание на форматирование кода файла vue, вам нужно добавить эту строку кода в «Настройки» — «Настройки» — «Настройки пользователя».

    "vetur.format.defaultFormatter.html": "js-beautify-html", //vue中HTML部分格式化

Vue 2 Snippets

Добавлена ​​подсветка синтаксиса на основе последних официальных файлов подсветки синтаксиса Vue, а также добавлено автодополнение кода на основе Vue 2 API.

vscode-element-helper

Напоминание о коде библиотеки Element-UI Рекомендуемая тема: светлые тона.

Brackets Light Pro

Brackets Light Pro.png

Quiet Light

image.png
Часто используемые сочетания клавиш для vsc: Открытие нескольких окон одновременно (просмотр нескольких элементов)

Открыть новое окно: Ctrl+Shift+N Закрыть окно: Ctrl+Shift+W Открыть несколько редакторов одновременно (просмотреть несколько файлов)

Новый файл Ctrl+N Переключение между открытыми файлами в истории Ctrl+Tab, Alt+Left, Alt+Right Вырезать новый редактор (до 3-х) Ctrl+\, или можно зажав Ctrl нажать на имя файла в проводнике Клавиши быстрого доступа для левого, среднего и правого редакторов Ctrl+1 Ctrl+2 Ctrl+3 Циклический переход между 3 редакторами Ctrl+` Редактор меняет положение, Ctrl+k затем нажмите влево или вправо Форматирование

Отступ строк кода Ctrl+[ Ctrl+] Свернуть открытый блок кода Ctrl+Shift+[ Ctrl+Shift+] Ctrl+C Ctrl+V Если не выбрано, копировать или вырезать всю строку по умолчанию Форматирование кода: Shift+Alt+F или Ctrl+Shift+P, а затем введите код формата Обрезать пробелы Ctrl+Shift+X Перемещение вверх или вниз по строке: Alt+Up или Alt+Down Скопируйте строку вверх и вниз: Shift+Alt+Up или Shift+Alt+Down Вставить строку ниже текущей строки Ctrl+Enter Вставить строку над текущей строкой Ctrl+Shift+Enter Связанный с курсором

Перейти к началу строки: Home Перейти к концу строки: Конец Перейти в конец файла: Ctrl+End Перейти к началу файла: Ctrl+Home Перейти ко второй половине скобки Ctrl+Shift+] Выбрать текущую строку Ctrl+i (двойной щелчок) Выбор от курсора до конца строки Shift+End Выбрать от начала строки до курсора Shift+Home Удалить все слова справа от курсора Ctrl+Delete Уменьшить/расширить выделение: Shift+Alt+Влево и Shift+Alt+Вправо Multi-Cursor: вы можете выбрать несколько мест подряд, а затем изменить их вместе, Alt+щелчок, чтобы добавить курсор или Ctrl+Alt+Down или Ctrl+Alt+Up Выбрать все подходящие сочетания клавиш Ctrl+Shift+L одновременно Ctrl+D Следующее совпадение также выбрано (я настроил его для удаления текущей строки, см. Ctrl+Shift+K ниже) Вернуться к предыдущей операции с курсором Ctrl+U перестроить код

Перейти к определению: F12 Миниатюра в определении: просто посмотрите, не перепрыгивая через Alt+F12 Список всех ссылок: Shift+F12 Изменить все совпадения в этом файле одновременно: Ctrl+F12 Переименовать: например, чтобы изменить имя метода, вы можете выбрать его и нажать F2, ввести новое имя, нажать Enter, и вы обнаружите, что все файлы были изменены. Перейти к следующей ошибке или предупреждению: при наличии нескольких ошибок вы можете нажать F8, чтобы перейти по одной Чтобы просмотреть различия, щелкните правой кнопкой мыши файл в проводнике. Выберите файл для сравнения, затем щелкните правой кнопкой мыши файл для сравнения и выберите «Сравнить с 'имя_файла_вы_выбрали'». найти замену

Найти Ctrl+F Найти заменить Ctrl+H Найти во всей папке Ctrl+Shift+F

Справочная документация:Советы по использованию VS Code