Рекомендация внешнего интерфейса vscode

Общие плагины

Auto Close Tag

Автоматически добавлять закрывающие теги HTML/XML (обязательно)

Auto Rename Tag

Автоматически переименовывать парные теги HTML/XML (обязательно)

Beautify

Форматирование javascript, JSON, CSS, Sass и HTML

Bootstrap 4 & Font awesome snippets

Содержит фрагменты кода для Bootstrap 4 и потрясающий шрифт.

Bracket Pair Colorizer

Скобки соответствия распознавания цветов

Class autocomplete for HTML

Атрибут Intellisense HTML class="" (обязательно)

Code Runner

Очень мощный плагин, который может запускать фрагменты кода или файлы кода на нескольких языках: C, C++, Java, JavaScript, PHP, Python, Perl, Ruby, Go и т. д. После установки в правом верхнем углу появляется:

Нажмите эту кнопку, чтобы запустить файл (обязательно)

css peek

Возможность просмотра строк идентификаторов и классов CSS в виде соответствующих определений CSS в файлах HTML (обязательно)

инструкции: Поместите курсор на атрибут в классе, щелкните правой кнопкой мыши

Dash

Надо документацию проверить, с тире (но вроде только мак версия)

горячая клавишаctrl + hОн просматривает документацию в тире на основе выбранного вами языка.

Debugger for Chrome

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

Простой в использовании:ткни меня

Document This

Добавить блок комментариев

настраивать:

 "docthis.includeAuthorTag": true,//出现@Author
 "docthis.includeDescriptionTag": true,//出现@Description
 "docthis.authorName": "shenzekun",//作者名字

горячая клавиша: дважды нажмите Ctrl+alt+d

ESLint

EsLint может помочь нам проверить программирование Javascript на наличие синтаксических ошибок. Например: в приложении Javascript вы вряд ли сможете найти свою утечку переменной или метода. EsLint может помочь нам проанализировать код JS, найти ошибки и обеспечить определенную степень правильности написания синтаксиса JS.

настроить:ткни меня

Font-awesome codes for html

Фрагмент кода для HTML с потрясающим шрифтом

filesize

Текущий размер файла отображается в строке состояния внизу, после нажатия также можно увидеть подробное время создания и модификации.

Git History

Просмотр журнала git в виде графика

Используйте command+shift+p (Ctrl+shift+p), чтобы войти в журнал git, и вы сможете его увидеть

Git Lens

Плагин Git-журнала

HTML CSS Support

Напишите класс в теге html, чтобы интеллектуально запрашивать стили, поддерживаемые текущим проектом (обязательно)

HTML Snippets

фрагмент html-кода (обязательно)

htmlhint

обнаружение html-кода

htmltagwrap

Вы можете обернуть слой тегов в выбранные теги HTML

использовать: выделите большой блок кода и нажмите «Alt+W»

Indenticator

Выделите текущую глубину отступа

IntelliSense for CSS class names

Имя класса intellisense css

JavaScript (ES6) code snippets

Фрагменты кода es6 (обязательно)

JavaScript Snippet Pack

фрагмент кода js (обязательно)

jQuery Code Snippets

Фрагмент кода jQuery

Live Sass Compiler

Компилировать sass в реальном времени, но нужно настроить, прикрепляю мою конфигурацию

"liveSassCompile.settings.formats":[
        // You can add more
        {
            "format": "compressed",//压缩
            "extensionName": ".min.css",//编译后缀名
            "savePath": "./css"//编译保存的路径
        }
    ],

использовать

markdownlint

Проверка синтаксиса MarkDown

Node.js Modules Intellisense

Модули JavaScript/TypeScript могут быть автозаполнены в операторах импорта.

npm Intellisense

Автозаполнение модулей npm в операторах импорта, аналогично Node.js Modules Intellisense

open in browser

Текущий html-файл открывается в браузере, аналогично четырем маленьким значкам браузера в webstorm, предварительным условием является сохранение html-файла.

Клавиша быстрого доступа alt+b

Output Colorizer

Цвет текста подсказки вывода претерпел некоторые изменения для облегчения доступа к ключевой информации.

Path Intellisense

Автозаполнение пути (обязательно)

Prettier

Форматирование JavaScript/TypeScript/CSS.

Project Manager

Проект избыточен, shift + cmd + p (shift + ctrl + p) и войдите в проект, сначала выберите «Редактировать проект», отредактируйте свои собственные проекты, затем вы можете выбрать «Открыть», чтобы открыть свой проект напрямую.

Sass

Обязательно для написания sass

vscode-faker

Генерируйте поддельные данные, адреса, номера телефонов, фотографии и многое другое

Откройте путь shift+cmd+p(shift+ctrl+p)) и затем введите faker для выбора

Quokka.js

Следите за изменениями переменных javascript в режиме реального времени

использовать: Сначала shift+cmd+p (ctrl+shift+p) введите quokka и выберите новый javascript :grinning:

Regex Previewer

Тестируйте обычные плагины

TSLint

Проверка синтаксических ошибок при программировании синтаксиса машинописного текста

TypeScript Importer

Автоматически ищет определения TypeScript в файлах рабочей области и использует все известные символы в качестве дополнений, чтобы разрешить завершение кода.