VSCode 相关设置 - 代码段、插件

VSCode 相关设置 - 代码段、插件

一、插件类

1. 【vue】代码提示插件

• 【Vetur】可以智能提示 vue 的相关代码（目前优先选择这个插件）
• 【Volar】比较不成熟，官方说有意向基于这款插件，再开发一个。（日后再说吧）

2、【HTML】标签智能闭合插件

• 【Auto Close Tag】

3、路径智能提示插件

• 【Path Intellisense】

4、【vue】常用代码段插件

• 【Vue VSCode Snippets】

5、修改HTML标签时，自动修改匹配的标签

• 【Auto Rename Tag】

6、为代码中的括号添上一抹亮色

-【Bracket Pair Colorizer】

7、模糊匹配我们npm中安装的第三方包

• 【NPM Intellisense】

二、VSCode 配置文件

1、如何设置 vscode 中的代码缩进长度（默认是 4，通常需要设置为 2）？

image.png

image.png

2、如何在 vscode 中添加代码片段？

• https://snippet-generator.app

image.png

image.png

• 也可以设置一个 import from 的代码段

// ~/Library/Application Support/Code/User/snippets/vue.code-snippets
{
    "import from": {
        "scope": "javascript,typescript",
        "prefix": "import from",
        "body": [
            "import $2 from \"$1\";"
        ],
        "description": "import from"
    }
}

三、VSCode 一些奇怪现象的记录

1、vue 使用子组件时，props 没有提示？

image.png

2、v-bind 语法的时候，没有代码提示，也没有代码高亮是怎么回事？

image.png