Введение

существуетBuild 2015На конференции, помимо выпуска браузера Microsoft Edge и новой системы Windows 10, самым большим сюрпризом стал анонс бесплатного кроссплатформенного редактора Visual Studio Code!

Visual Studio Code (называемый vs code/vsc) — это бесплатный современный облегченный редактор кода с открытым исходным кодом, поддерживающий почти все основные языки разработки, интеллектуальное завершение кода, настраиваемый ярлык, сопоставление скобок, распознавание цвета, фрагмент кода, сравнение кода DIFF, GIT команды и т. д., поддерживают расширения подключаемых модулей и оптимизированы для веб-разработки и разработки облачных приложений. Кроссплатформенность программного обеспечения, поддержка WIN, MAC и Linux, бесперебойная работа, можно охарактеризовать как совесть Microsoft...

Почему стоит выбрать проект разработки VS Code

Как фронтенд-разработчик, я используюAtomЭта IDE в сочетании с красивыми плагинами темы очень хороша. Интерфейс Atom действительно красив, но вы действительно не чувствуете себя застрявшим, если установите слишком много плагинов,VS CodeСравниватьAtomболее свободно, чемwebstormболее легкий. После случайной смены работы команда проекта попросила унифицированную IDE, что заставило меня понятьVS Code, вот краткое введениеVS Codeежедневные потребности в развитии.

Рекомендуемые плагины для VS Code

Все плагины VS Code доступны по адресуVS Code Downloadsнаходится в библиотеке плагинов, как показано ниже:

Auto Close Tag

Auto Close Tag: соответствует тегу, закрывает соответствующий тег. Полезно для HTML/XML.

Auto Rename Tag

Auto Rename Tag: изменение открывающих и закрывающих тегов при изменении тегов; полезно для HTML/XML.

HTML CSS Support

HTML CSS Support: Это также один из обязательных плагинов для HTML.

CSS Peek

CSS Peek: Переходы связанные с css в html и css

Code Runner

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

Git History

Git History: Плагин для просмотра журналов коммитов ветки git.

Git History Diff

Git History Diff: найдите узлы, представленные в каждой ветке git, и сравните различия.

Path Autocomplete

Path Autocomplete: плагин интеллектуального завершения пути.

Path Intellisense

Path Intellisense: плагин IntelliSense пути.

beautify

beautify: Хорошая масштабируемость, может форматировать JSON|JS|HTML|CSS|SCSS, что проще в использовании, чем встроенное форматирование;Однако файл jsx проекта реакции будет испорчен при форматировании с помощью плагина beautify, поэтому рекомендуется не использовать его.

Prettier - Code formatter

Prettier - Code formatter: Плагин форматирования кода, в основном для JavaScript/TypeScript/CSS в проекте

Prettier Now

Prettier Now: Плагины форматирования кода, которые поддерживают более полные языки, в основном поддерживают jsx/tsx, а также sass/less и т. д. (Запрошенный проект реакции в основном состоит в том, чтобы отформатировать код с помощью этих двух плагинов Prettier.)

Terminal

Terminal: встроенный плагин командной строки vs code также более практичен.

Bookmarks

Bookmarks: этот плагин поддерживает маркировку определенных строк в файле для повышения эффективности разработки.

Bracket Pair Colorizer

Bracket Pair Colorizer: В случае большого количества скобок этот плагин может различать цвета, и код понятен с первого взгляда.

Chinese (Simplified) Language Pack for Visual Studio Code

Chinese (Simplified) Language Pack for Visual Studio Code: китайский (упрощенный) языковой пакет для VS Code.

filesize

filesize: Показывает текущий размер файла нижней части редактора.

Markdown Preview Enhanced

Markdown Preview Enhanced: Плагин предварительного просмотра документов Local Markdown.

vscode-icons

vscode-icons: Набор плагинов иконок для vs code.

npm

npm: Нечего сказать о npm.

open-in-browser

open-in-browser: Один щелчок, чтобы открыть в браузере

Live Server

Live Server: Один щелчок, чтобы запустить локальную службу.

fileheader

fileheader:чувствовать себя полезнымПримечания автора нового документа

На странице пользовательских настроек (comd+,), вы можете указать некоторую информацию об авторе, а затем открыть палитру команд (comd+shift+P),войтиfileheaderПросто вернись

Local History

Local History:Лично считаю полезнымЖурнал сохранения локального кода, это кажется очень практичным, когда нет git, svn или код не был отправлен в течение длительного времени, и вы больше не боитесь отката кода.

GitLens -- Git supercharged

GitLens -- Git supercharged: GitLens расширяет функциональность Git, встроенную в Visual Studio Code. Это помогает вам визуализировать авторов кода с помощью аннотаций Git по вине и линз кода, легко перемещаться по репозиториям Git и исследовать их, а также получать ценную информацию с помощью мощных команд сравнения.

Общие сочетания клавиш VS Code

Есть много сочетаний клавиш для VS Code, пожалуйста, обратитесь к конкретнымVS Code => 左下角设置按钮 => 键盘快捷方式

мы также можемНастроить сочетания клавиш, установите переопределение в keybindings.json

Горячие клавиши — это полностью личные рабочие привычки, и я не буду их здесь представлять, я часто использую их:

打开命令面板    cmd + shift + p / F1
打开设置页面    cmd + ,
删除一行        cmd + E(自定义)
添加书签        cmd + option + k
代码格式化      control + opiton + B

Практика управления кодом VS Code git

Git теперь очень распространенный инструмент управления кодом. VS Code также имеет встроенные плагины git. Конечно, если вы считаете, что он не идеален, вы можете установить некоторые часто используемые плагины git и т. д., и кратко представить шаги отправки git в VS Code.

Здесь я беру в качестве примера новый склад на GitHub.После того, как склад был заново построен, веткой по умолчанию является master.Здесь я создал 2 новых удаленных ветки на GitHub.develop01а такжеdevelop02, когда вы нажимаете, чтобы переключиться на удаленную ветку в VS Code, VS Code автоматически создает для вас локальную ветку, соответствующую текущей удаленной ветке, напримерorigin/develop02вести перепискуdevelop02,Такие какorigin/masterвести перепискуmaster, Как показано на фиг.

Теперь мы коммитим код на ветке master,

Первый шаг — временное хранение файлов, которые необходимо отправить.
Второй шаг, заполните журнал отправки
Третий шаг, нажмите对勾按钮полное подчинение

После отправки вам нужно вытащить код удаленной ветки git для отправки.

Четвертый шаг — вытащить удаленный код и разрешить конфликт
Пятый шаг, нажмите на удаленную ветку

Тогда больше нет 😝, подача завершена.

Если вам нужно отправить разный код в разные ветки из-за рабочих требований, это включает переключение веток. Первый шаг - отправить код перед переключением ветки, иначе всегда будет журнал ошибок.После переключения ветки локальный код также изменится в соответствии с веткой.

Как показано выше, после того, как мастер переключается на develo01, код, только что представленный в ветке master, становится соответствующим кодом на develo01.

Эта часть кода отправки git также может быть реализована с использованием соответствующих инструментов управления кодом git, таких как SourceTree, Tower и другие инструменты, которые очень полезны, вот также статья,Добро пожаловать в коллекцию

ты спрашиваешь я отвечаю

1. Как изменить настройки по умолчанию в VS Code?

Автор использует Mac, используя горячие клавишиCom + ,Откройте интерфейс пользовательских настроек по умолчанию.Слева — настройка по умолчанию, а справа — пользовательская настройка. Это зависит от личного сценария работы. Например, я отформатирую код единообразно и сделаю отступ в 4 пробела и т. д. , а также вы можете настроить игнорирование некоторых папок и т. д.

{
    "explorer.confirmDelete": false,
    // 主题
    "workbench.iconTheme": "vscode-icons",
    // 小地图
    "editor.minimap.enabled": true,
    // 主题风格One Dark Pro
    "workbench.colorTheme": "One Dark Pro",
    "window.zoomLevel": 1,
    "extensions.autoUpdate": false,
    // 字体大小
    "editor.fontSize": 13,
    "editor.snippetSuggestions": "top",
    "diffEditor.ignoreTrimWhitespace": true,
    // 设置格式化缩进4格
    "prettier.tabWidth": 4,
    "vetur.format.defaultFormatter.html": "prettier",
    "gitlens.advanced.messages": {
        "suppressShowKeyBindingsNotice": true
    },
    "gitlens.historyExplorer.enabled": true,
    "atomKeymap.promptV3Features": true,
    "editor.multiCursorModifier": "ctrlCmd",
    //粘贴自动格式化
    "editor.formatOnPaste": false,
    //保存自动格式化
    "editor.formatOnSave": false,
    // 用来忽略工程打开的文件夹
    "files.exclude": {
        "**/.vscode": true,
        "**/.DS_Store": true,
        "**/.history":true,
        "**/nbproject":true
    },
    // 用来忽略搜索的文件夹
    "search.exclude": {
        "**/node_modules/**": true,
        "**/bower_components/**": true,
        "**/image/**": true,
        "**/*.xml": true,
        "**/.history/**":true,
        "**/nbproject/**":true,
        "**/vscode/**":true

    },
    // 创建和更新代码的头部信息作者
    "fileheader.Author": "Baldwin",
    "fileheader.LastModifiedBy": "Baldwin",
}

2. Если я несколько дней не сдавал код (git), а сегодня вдруг обнаружил код youbug, мне нужно восстановить его до вчерашней версии, может ли это сделать VS Code?

могу. Обратитесь к плагину VS Code выше.Local History

Это в основном введение (если у вас есть хороший плагин или тема, пожалуйста, оставьте сообщение, и вы должны обновить его), я надеюсь, что это будет полезно для вас, чтобы использовать VS Code, если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение , и обязательно активно отвечайте 😑😑😑

Мощный VS-код

Введение

Почему стоит выбрать проект разработки VS Code

Популярные темы VS Code

Процесс установки плагина темы

Список плагинов темы VS Code (рекомендуется)

1. One Dark Pro

2. Atom One Dark Theme