Навыки использования VScode для повышения эффективности разработки

JavaScript

написать впереди

Некоторое восхищение и резюме навыков, я надеюсь помочь вам, кто еще не знает.
В этой статье в основном объясняется, как использовать поиск, как писать собственные фрагменты кода и как использовать синтаксис emmet.

поиск

В VSCode есть два поиска, один в определенномдокументВнизлокальный поиск, другой - весьпапкавнизГлобальный поиск. и эти два поискаПо умолчаниюда или нетделикатный случайиз.image.png

Знакомство с панелью поиска

image.png
Объясните назначение этих семи значков.

  1. расширить, чтобы заменить
  2. деликатный случай
  3. Полное совпадение слов (это означает, что вы ищете целое слово)
  4. сопоставлять с использованием регулярных выражений
  5. предыдущий матч
  6. следующий матч
  7. найти в подборке

Советы по поиску

Здесь мы берем использование в файле .vue в качестве примера.

  • деликатный случай
  • Полное совпадение слов
  • Добавляйте специальные символы (такие как ".", ":", " " и т.д.)
  • Ограничьте поиск

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

Добавьте специальные символы

В повседневной разработке мы часто хотим просмотреть определение функции. когда мыctrl + f При поиске мы часто находим результаты, которые нам не нужны.
Например, я хотел бы найти определениеaddLine()метод, когда мы ищем напрямуюaddLineВремя1.gif

Из рисунка видно, что результаты, отфильтрованные нашим VSCode, включают не только addLine, но и addLineForm, addLineRules и т. д. Во избежание такой ситуации можно открытьПолное совпадение словфункции, конечно, этого недостаточно.

2.gif

Из приведенного выше изображения мы можем обнаружить, что то, что мы искали, не толькоaddLine()метод и его вызовыthis.addLine(), в настоящее время нам нужно только добавить пробел перед методом, который мы хотим найти, потому что в Vue, если мы хотим вызвать метод, мы должны вызывать его через экземпляр Vue.

image.png

В качестве другого примера, теперь мы хотим просмотреть дочерние компоненты.propизsizeСвойство по умолчанию — это вы, что бы вы сделали? Добавление пробела в этот момент может не полностью решить нашу проблему.

3.gif

Как видно из рисунка, мы не только нашлиpropвнутреннийsize, также найденный в элементеsizeатрибут, в это время мы добавляем:Ничего страшного

Ограничьте поиск

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

image.png

Роль поиска

Лично для меня самая большая роль поиска — помочь нам ознакомиться с проектом и прочитать код других разработчиков.
Например, когда мы впервые пришли в компанию, мы всегда тратили некоторое время на ознакомление с проектом и изучение кода других разработчиков. Когда вы ознакомитесь с проектом, вы обнаружите, что на глобале написано много чего, а в это время, если вы хотите найти эти компоненты и методы, вам придется искать их через глобальный поиск. Таким образом, вы можете понять использование других компонентов или методов.

Горячие клавиши, которые можно использовать при поиске

ctrl + fНайти выделенный текст
enterследующий матч
ctrl + enterпредыдущий матч

фрагмент пользовательского кода

В повседневной разработке мы часто используем подсказки кода, предоставляемые плагинами, чтобы повысить эффективность нашей разработки.
Тем не менее, вещи, предоставляемые плагинами, часто ограничены, и потребности каждого разработчика различны. В это время пользовательских фрагментов кода может помочь нам решить эту болевую точку - высокочастотный короткий код.
Давайте сначала посмотрим на эффект (фрагмент сгенерированной стрелочной функции, написанный мной):

af.gif

Вы чувствуете возбуждение! ! ! !
Далее мы расскажем, как настроить фрагменты кода.

Как вводить пользовательские фрагменты кода

image.png

Создавайте новые фрагменты кода в соответствии с вашим языком

image.png

Как настроить фрагменты кода

Используйте несколько примеров, чтобы объяснить некоторые из наиболее часто используемых способов использования (прикрепите код, возьмите его, если он вам нужен)стрелочная функция

//箭头函数提示
"Arrow Function": {
    "prefix": "af",
    "body": [
        "($1) => {",
        "  $0",
        "}"
    ],
},

image.png image.png

Создание шаблона Vue(1)

//Vue模版生成
"Vue template": {
    "prefix": "tmp",
    "body": [
        "<template>",
        "  <div>$0</div>",
        "</template>",
        "",
        "<script>",
        "export default {}",
        "</script>",
        "",
        "<style lang='${1|less,scss|}' scoped></style>"
    ]
},

Показать результаты:

tmp1.gif

Здесь в основном, чтобы показать вам${1|less,scss|}Такое использование делает поддержку нашего фрагмента кода необязательной.

Создание шаблона Vue(2)

//Vue模版生成
"Vue template": {
    "prefix": "tmp",
    "body": [
        "<template>",
        "  <div>$0</div>",
        "</template>",
        "",
        "<script>",
        "export default {}",
        "</script>",
        "",
        "<style lang='${1:less}' scoped></style>"
    ]
},

Показать результаты:

tmp2.gif

Здесь в основном, чтобы показать вам'${1:less}'Это использование делает наш фрагмент кода поддерживающим модификацию

Создание аннотации функции

// Function Comment
"Comment": {
    "prefix": "fc",
    "body": [
        "$BLOCK_COMMENT_START*",
        " * @description:$1",
        " * @param {$2}",
        " * @return {$3}",
        " $BLOCK_COMMENT_END",
        ""
    ]
}

Показать результаты:

comment.gif

Здесь нам предоставлены некоторые переменные для использования,$BLOCK_COMMENT_STARTа такжеBLOCK_COMMENT_ENDДавайте получим идентификатор начала и окончания комментария блока для текущего языка. Есть также несколько полезных переменных, которые я не буду здесь перечислять. Если вы хотите узнать больше о фрагментах кода, посетитеОфициальный сайт VSCode

Синтаксис Эммета

Позвольте мне показать вам, как использовать этоid.gifВот несколько распространенных способов я бы

// div#id
<div id="id"></div>

class

// div.test
<div class="test"></div>

повторить

// div.test*3
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

дочерний узел

// div>ul>li
<div>
  <ul>
    <li></li>
  </ul>
</div>

родственный узел

// div+span
<div></div>
<span></span>

текст

// div{文字}
<div>文字</div>

группировка

// ul>(li*3)
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Чтобы узнать больше, посетитеОфициальный сайт

Категории