Введение
Позвольте мне сначала объяснить, что этот клавиатурный воин не является еще одним клавиатурным воином (не быть побежденным). Так что же это за клавиатурный воин? Этот клавиатурный воин означает, что мы можем использовать клавиатуру для выполнения наших повседневных задач разработки. Нет мыши, разве это не круто. Конечно, это требует от нас запоминания большого количества сочетаний клавиш, а также нам нужно использовать плагины, которые помогают нам.
метод обучения
На этот раз я хочу объяснить это по-другому, я знаю, что использовать сочетания клавиш нескольких функций будет скучно, и это совсем не ново, особенно если вы дочитаете и забудете. Итак, на этот раз я объясню это на практике, чтобы увидеть, какие сочетания клавиш нам нужно использовать, когда мы на самом деле делаем проект. Управляйте нашим обучением с практическими точками приложения. Применяйте то, что вы узнали, мы не узнаем то, что вы не используете. Если вы будете следовать статье и набирать ее снова, я думаю, вы прочно запомните эти сочетания клавиш.
Если вы хотите увидеть соответствующие сочетания клавиш напрямую, вы можете щелкнуть сочетание клавиш, установленное в каталоге, чтобы просмотреть все сочетания клавиш.
плохая среда
Сказав так много, я не представил среду разработки, которую мы используем.
Ну я фронтенд и выбираю vscode
Ну, я фронтенд, и я выбираю Mac
Хм, я думаю, это круто использовать vim
Итак, основная плохая среда этой статьи — это mac + vscode + vim.
Конечно, какие-то другие плагины нужны на ура.
- File Utils
- JavaScript (ES6) code snippets
- ES7 React/Redux/GraphQL/React-Native snippets
Конечно, на самом деле vocode предоставляет множество сочетаний клавиш, которые могут полностью заменить функции, часто используемые под vim, соответствующие сочетания клавиш я приведу в конце.
FizzBuzz
Во-первых, позвольте мне кратко представить небольшие проекты, которые у нас есть сегодня.
Напишите программу для вывода чисел от 1 до 100. Но когда число кратно 3, выведите «Fizz» вместо числа, а число, кратное 5, замените на «Buzz», которое одновременно кратно 3 и кратно 5. Выведите «FizzBuzz».
Требования легко понять, не так ли?
Однако здесь я использую TDD для достижения этого, не могу дождаться, давайте начнем
Новый проект
mkdir fizzbuzz && code fizzbuzz
Команда кода может открыть эту папку с помощью vscode
установить код
- открыть vscode
- shift + command + p -> открыть палитру команд
- входной путь
Инициализировать проект
Сначала нам нужно инициализировать наш проект с помощью npm, а затем установить тестовую среду jest, которая поможет нам выполнить TDD.
- control + ` -> открыть встроенный терминал vscode
- Создать пакет.json
- установить шутку
- Установите @types/jest (при написании кода будут подсказки API)
npm init -y && npm i jest && npm i @types/jest -D
Создать файл
Далее нам нужно создать файл index.js в качестве нашего файла входа. Как использовать горячие клавиши для его создания? Прежде всего, нам нужно использовать плагин File Utils.
Это позволяет нам выполнять ряд операций с помощью сочетаний клавиш: создавать, перемещать, переименовывать, удалять файлы или папки.
- Установите File Utils (установка плагинов не будет вдаваться в подробности)
- Открыть палитру команд
- Введите файл: Новый файл
- Введите имя файла для создания
Создать папку
Нам также нужно создать тестовую папку для хранения наших тестовых файлов.
- Открыть палитру команд
- Введите файл: Новая папка
- Введите имя создаваемой папки
Создать файл в указанной папке
Затем нам нужно создать файл index.test.js в тестовой папке.
Эта операция немного хлопотна, позвольте мне сначала разделить этапы операции
- команда + Shift + E -> нужно сосредоточиться на области проводника (область файлов слева)
- Сосредоточьтесь на указанной папке (вы можете использовать клавиши вверх и вниз, чтобы выбрать указанный файл в фокусе)
- Создайте файл index.test.js (подробности см. в разделе Создание файла, который здесь не лишний)
Здесь следует отметить, что сочетания клавиш менеджера ресурсов могут конфликтовать с другим программным обеспечением! ! Если вы обнаружите, что он не работает после нажатия клавиши быстрого доступа, не забудьте проверить конфликт сочетания клавиш.
Перейти к указанному файлу
Далее нам нужно открыть файл index.test.js
- команда + p -> перейти к файлу
- входное имя файла
Создание тестовых блоков кода
Сначала пишем тест в файле index.test.js. Здесь нам нужно использовать плагин ES7 React/Redux/GraphQL/React-Native для быстрого создания общих блоков тестового кода.
- Установите ES7 React/Redux/GraphQL/React-Native.
Сгенерировать блок кода desc
- введите описание
Сгенерировать тестовый блок кода
- введите тест
Откройте вторую область редактирования
В это время мне нужно писать логику при написании тестов, поэтому я не хочу переключать файлы туда-сюда, что мне делать? Просто откройте область редактирования
- команда + \ -> открыть новую область редактирования (на этот раз сосредоточьтесь на новой области редактирования)
- Выберите, чтобы открыть указанный файл
Выберите другую область редактирования
Когда я пишу тесты, мне нужно переключиться в область редактирования 1, а когда я пишу логику, мне нужно переключиться в область редактирования 2.
- команда + 1 -> перейти в область редактирования 1
- команда + 2 -> перейти в область редактирования 2
закрыть область редактирования
Итак, как закрыть область редактирования?
- Сосредоточьтесь на области редактирования, которую вы хотите закрыть
- команда + k + w -> закрыть все файлы
После закрытия всех файлов vscode автоматически закроет текущую область редактирования.
Быстро генерировать блоки кода
Чтобы облегчить нам быстрое создание блоков кода, которые часто используются в повседневной разработке, мы предложили брату плагин фрагментов кода JavaScript (ES6).
- Установите фрагменты кода JavaScript (ES6)
Мы можем найти множество сочетаний клавиш для создания блоков кода с помощью этого плагина.
Друзья могут записывать то, что часто используется в повседневной разработке.
Ниже я продемонстрирую несколько способов быстрой генерации блоков кода, используемых в текущем проекте.
импорт
Затем мне нужно импортировать index.js в файл index.test.js.
Здесь используется ESModule
- imp быстро генерирует импортированные блоки кода
экспорт
Затем мне нужно экспортировать функцию по умолчанию внутри файла index.js.
- edf быстро генерирует блоки кода для экспортируемых по умолчанию функций
кодирование
Остальное в основном связано с использованием vim. Я представлю эту часть в виде записи видео, это слишком хлопотно, чтобы выразить словами! ! !Разработка воина клавиатуры vscode - fizzbuzz
Сначала выкопайте яму, может быть, когда она будет заполнена хахахахаха :) Побег
Он был заполнен, вы можете щелкнуть видео, чтобы перейти к станции B, чтобы посмотреть
Суммировать
Мы изучаем соответствующие сочетания клавиш с практическими проектами. И все, что мы делаем, имеет четкую цель. Например, я хочу создавать файлы с помощью горячих клавиш, поэтому я нашел плагин File Utils.Например, я хочу быстро генерировать блоки кода, которые часто используются, поэтому я нашел фрагменты кода JavaScript (ES6), мы используем плагины для выполнения какие функции мы хотим, и даже вы можете разрабатывать свои собственные плагины. Таким образом, мы будем постепенно формировать систему, и со временем она будет становиться все более и более совершенной.Благодаря целенаправленной практике каждый может стать квалифицированным воином-клавишником.
Коллекция горячих клавиш
Создайте папку в терминале
mkdir fizzbuzz
Откройте папку как vscode
code fizzbuzz
Откройте терминал внутри vscode
control + `
Открыть палитру команд
shift + command + p
Создать файл
Требует установки File Utils
// 步骤
1. shift + command + p
2. file: new file
сосредоточиться на менеджере ресурсов
command + shift + E
Сфокусировать указанный файл в области проводника
Используйте клавиши вверх и вниз, чтобы выбрать выделенный файл или папку Используйте левую и правую клавиши, чтобы открывать или закрывать папки или вводить файлы
вим-режим:
Используйте клавиши со стрелками с JK
Используйте l с левой и правой клавишами
Перейти к указанному файлу
command + P
Откройте новую область редактирования
command + \
Переключение между различными областями редактирования
command + 1
command + 2
Закрыть сфокусированную область редактирования
command + k + w
использованная литература
- Это проект с открытым исходным кодом нашей командыelement3
- Библиотека компонентов внешнего интерфейса, поддерживающая vue3.