Как говорится, «наточи нож, не рубя дров» Для разработчиков отличная IDE или текстовый редактор могут эффективно повысить эффективность работы.Visual Studio Code(далее vscode) довольно популярен среди разработчиков благодаря своим мощным функциям, высокой скорости работы и многочисленным расширениям. Эта статья познакомит вас с некоторыми приемами vscode, надеясь вдохновить вас.
Версия vscode для Mac, используемая самим автором, некоторые сочетания клавиш или операции могут отличаться от таковых для других платформ, каждый должен обращать внимание на различие.
Откройте дорогу к персонализации
Сначала ознакомьтесь с двумя сочетаниями клавиш:
-
shift + cmd + p: показать все команды -
cmd + p: Быстро открывать файлы
После завершения установки vscode добавьте команду code в PATH,shift + cmd + pОткройте поиск команд, введитеshell,оказатьсяУстановить команду кода в PATH, после подтверждения мы можем запустить его прямо из командной строки в дальнейшем.
code . # 打开当前目录
code path # 打开某个目录
Следующим шагом является изменение конфигурации по умолчанию.cmd + ,Откройте файл конфигурации. Конфигурация представляет собой файл JSON. В файле конфигурации вы можете добавить нужные параметры.
Например, здесь мы меняем отступ табуляции на 2, терминал на zsh и шрифт в редакторе на 14px. В частности, для фронтенд-разработки дефис (-) не следует использовать в качестве разделителя слов, поэтому его также необходимо скорректировать.
{
"editor.fontSize": 14,
"editor.tabSize": 2,
"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
"terminal.integrated.shell.osx": "zsh"
}
Общие сочетания клавиш
Если вы умеете пользоваться инструментом, вы должны сначала запомнить некоторые сочетания клавиш, чтобы сократить количество использований мыши. Полный справочник по списку ярлыковДокументация. Здесь перечислите некоторые сочетания клавиш, используемые в повседневной работе.
дляРядоперация:
- Переоткрыть строку: если курсор находится в конце строки, нажать Enter, если не в конце строки,
shift + enterоткрыть заново на одну строку вниз;shift + cmd + enterзатем снова откройте строку в предыдущей строке - Удалить строку: когда курсор не имеет выбранного содержимого,
ctrl + xвырезать линию;shift + cmd + kудалить строку напрямую - Переместить строку:
alt + ↑перейти на одну строку вверх;alt + ↓перейти на одну строку вниз - Скопируйте строку:
shift + alt + ↓скопировать на одну строку вниз;shift + alt + ↑скопировать строку
длясловооперация:
- Выберите слово:
ctrl + d
Найдите или замените:
-
cmd + f:поиск -
cmd + alt + f: заменять -
cmd + shift + f: Поиск внутри проекта
Установите некоторые расширения
vscode сам по себе является текстовым редактором, но, установив расширения, мы можем превратить его в облегченную IDE.
При открытии файла vscode рекомендует связанные расширения на основе расширения файла. В соответствии с подсказкой нажмите «Установить».
Здесь автор рекомендует два расширения:
- eslint: проверьте свой код с помощью eslint
- Vetur: официальный инструмент обслуживания Vue.
Проверить код с помощью eslint
Теперь передняя часть проекта, обычно использующая стиль кодирования eslint check. Если мы установили расширение eslint, в процессе написания кода, код проверки конфигурации vscode на основе проекта eslint, соответствующая подсказка.
По умолчанию eslint не проверяет однофайловые компоненты Vue. Если у нас установлен Vetur, мы можем изменить файл конфигурации vscode, чтобы включить проверку компонентов Vue.
{
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
]
}
Применение задач
Задачи в vscode эквивалентны командам скрипта. В прошлом, чтобы выполнить команду, вам нужно было открыть терминал и ввести соответствующую команду в терминале. С Заданиями в этом нет необходимости.
Во многих front-end проектах мы будем писать многоnpm scripts, аналогично следующему.
{
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit",
"build": "node build/build.js"
}
}
vscode можетАвтоматически определять сценарии npm, и рассматривайте эти команды как задачи. Далее мы можем выполнить скрипт npm через task.
cmd pЗатем введите задачу в поле подсказки (после задачи есть пробел), затем выберите задачу и нажмите Enter. Когда вы решите выполнить задание, будет возможность напрямую выбрать первое.
Если вам нужно настроить свою собственную задачу, вы можете обратиться кДокументация. Однако самоопределяемая задача используется только в этом проекте. Для фронтенд-разработчиков часто используемые команды могут быть добавлены в package.json. Так что здесь мы просто используем Задачи как инструмент для быстрого запуска команд.
Приложения Emmet.
Emmet интегрирован в vscode. Эммет может эффективно улучшить скорость ввода. Обычно при написании HTML или CSS вам нужно набирать много символов. А теперь с Эмметом нужно просто напечатать аббревиатуру.
Быстро введите HTML
Если вы знакомы с синтаксисом CSS, вы обнаружите, что Emmet очень прост в использовании.
- Элементы: создает HTML-элемент.
- > : генерировать дочерние элементы
- + : одноуровневый узел сгенерированного элемента
- * : создать несколько одинаковых элементов
- Вы можете украшать элементы . или # , добавлять класс или идентификатор к элементу
Например, мы вводимdiv.test>h3.title+ul>li*3>span.text, эффект следующий.
Некоторые элементы HTML имеют множество атрибутов, в процессе ввода которых добавляются теги после:属性名Он определяет атрибуты элемента.
Быстро введите CSS
Для некоторых атрибутов с более короткими именами, таких как отображение и видимость, введите первую букву атрибута и первую букву значения. Например:dfдаdisplay: block;,dnдаdisplay: none;.
Для некоторых свойств, значениями которых являются числовые значения, например padding, margin, left, width и т. д., просто введите первую букву и значение свойства. Например,m1даmargin: 1px;. Единицей измерения по умолчанию является px, но вы можете указать единицу измерения, например:w2vwто естьwidth: 2vw;. Специально, когда значение представляет собой процент, буква p означает %, например:w5pто естьwidth: 5%;.
Атрибуты с длинными именами часто содержат дефис (-).Введите первую букву двух слов до и после дефиса и добавьте значение. Например:pt10даpadding-top: 10px;.
По умолчанию Emmet нельзя использовать в файлах js. Это может быть неудобно при разработке проектов React. Итак, настройте конфигурацию снова.
{
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}
Вот лишь часть правил Эммета, чтобы увидеть полный список, нажмите здесь.здесь. Если вы чувствуете, что некоторый ввод очень громоздкий, вы можете проверить документацию, чтобы узнать, существует ли метод быстрого ввода.
Пользовательские фрагменты кода (фрагменты)
Эммет помогает нам установить множество ярлыков. Для файлов js он ничего не может сделать. Вы можете попробовать определить свой собственныйфрагмент кода.
Например, после добавления компонента Vue нам нужно заполнить шаблон, скрипт и стиль. Несмотря на то, что Vetur дает умные советы, процесс все еще громоздкий. Теперь мы решим эту проблему, определив snippet.
открыть vsocdeНастройки > Пользовательские фрагменты, выберите файл фрагмента кода как vue.json. Введите следующее.
{
"Vue component": {
"prefix": "vuec",
"body": [
"<template>",
"\t$1",
"</template>",
"<script>",
"export default {",
"\t",
"}",
"</script>",
"<style lang=\"scss\" scoped>",
"</style>",
""
]
}
}
После сохранения создайте новый Test.vue, введите vuec и посмотрите, что получится.
Когда входное содержимое соответствует префиксу, только что определенный фрагмент появляется в vscode.После нажатия Enter содержимое тела вставляется в файл. используя$1Определяет положение курсора после вставки фрагмента. vscode поддерживает множественный выбор курсора, если вам нужен множественный выбор курсора, запишите, где вам это нужно$1Вот и все.
Точно так же вы можете написать фрагмент, который создает компонент React. Использование фрагментов намного быстрее, чем копирование и вставка. В дальнейшем в качестве сниппетов можно будет добавить любые сниппеты, которые часто используются в процессе разработки.
Суммировать
В этой статье приведены некоторые примеры использования vscode. Существует множество функций vscode, таких как отладка кода, операции интеграции с Git, написание расширений и т. д., которые не рассматриваются в этой статье, и в ежедневной разработке необходимо изучить больше функций.
В качестве «личного инструмента» для программистов, текстовый редактор надеется, что вы многое обобщите в процессе его использования и настроите его в соответствии со своими привычками использования, так что процесс кодирования будет ощущаться как полет. 😂