VSCode — быстрое создание шаблонов vue

Visual Studio Code
VSCode — быстрое создание шаблонов vue

Запишите проблемы, возникшие в проекте, для дальнейшего использования и обзора 😁

Ярлыки форматирования кода VSCode

Shift + Alt + F

Что такое VSCode?

Visual Studio Code (далее VSCode) — это легкий и мощный редактор кода, поддерживающий Windows, OSX и Linux. Встроенная поддержка JavaScript, TypeScript и Node.js, а также богатая экосистема плагинов. Вы можете установить плагины для поддержки других языков, таких как C++, C#, Python, PHP и другие официальные адреса загрузки веб-сайта.Для меня это лучший редактор для интерфейса.Плагинов много.

Затем переходим к делу. . .

1. Установите плагин для идентификации файлов vue

插件库中搜索Vetur，点击安装，安装完成之后点击重新加载，即可使用

2. Создайте новый фрагмент кода

mac的步骤如下，由于我安装了转中文插件，所以接下来会是中文的：
code -> 首选项 -> 用户代码片段 -> (新建代码片段取名vue.json）
新建代码片段这块可以直接往下找就能找到vscode上带的vue.json

3. Напишите шаблон vue, который вы хотите сгенерировать, в vue.json.

{
  "Print to console": {
    "prefix": "vue",  
    "body": [
      "<!-- $1 -->",
      "<template>",
      "<div></div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "data() {",
      "return {",
      "",
      "}",
      "},",
      "//生命周期 - 创建完成（访问当前this实例）",
      "created() {",
      "",
      "},",
      "//生命周期 - 挂载完成（访问DOM元素）",
      "mounted() {",
      "",
      "}",
      "}",
      "</script>",
      "<style scoped>",
      "/* @import url(); 引入css类 */",
      "$4",
      "</style>"
    ],
    "description": "Log output to console"
  }
}

4. Вставьте приведенный выше код и скопируйте его в vue.json, эффект будет следующим

此处说明一下："prefix": "vue", 就是快捷键，（vue名称可随意修改）
新建vue文件，输入vue 按键盘的tab件生成vue模版

Функция глобального поиска VScode

Я недавно узнал о программном обеспечении VSCODE и начал пробовать. Я чувствую себя очень хорошо в целом, но я не могу искать глобально. После понимания это моя проблема конфигурации. Я нашел решение в Интернете.

В файл конфигурации добавляем:

“search.exclude”: {
“system/”: true,
“!/system/*/.ps*”: true
}，

Проверьте это сейчас,

ctrl + shift + F, чтобы начать свое шоу.

vscode нажмите на файл импорта, чтобы автоматически перейти к файлу

ctrl+щелчок мышью

Как перейти к указанной строке в VSCode

Ссылаться на:Опыт Baidu.com/article/3 Ah 2…

9 советов по эффективному использованию VSCode

Woohoo.Baidu.com/Lincoln?URL=-7…

Категории