vue的这些东西都没有提示吗？

我使用的vscode，输入export default、data、methods这些，还有写template、v-bind、v-html、v-on等等这些东西，写的时候提示项都没有这些内容，全部要一个一个自己手动完全输入，是vue就是这样没有提示呢还是我缺少什么插件呢？

而且好多东西的显示效果和视频里也不一样耶，感觉它不太明显。

Aurora_Meteor 2020-05-14

源自：Vue基础详解 2-7 模板语法

收起

9回答

好帮手慕糖回答被采纳获得+3积分 2020-05-15 10:11:20

同学你好，关于你的问题，回答如下：

1、如下，老师这里测试了下，是会有提示的，但是只是提示单词，并不会将标签补充完整。

若是想要标签补全的话，可以安装HTML Snippets插件，可以参考如下：

（1）搜索到这个插件，点击安装即可，例：

（2）找到setting.json文件：文件 --> 首选项 --> 设置就进入了我们setting.json文件编辑，添加如下代码：

之后就可以补全标签了。

2、显示效果不一样，是指颜色吗？这个是主题的原因，不同主题之间都有差异，这个没有影响哦。

祝学习愉快~

收起回答

好帮手慕糖 2020-05-16 13:57:51

同学你好，可以忽略不管这个，没有影响的。

祝学习愉快~

收起回答

提问者 Aurora_Meteor 2020-05-16 10:11:50

我安装了老师的prettier插件后，在vue里面按快捷键格式化，它让我选择格式化的插件，一个vetur一个您刚说的这个，我选了刚安装的这个，但是再按格式化后它并没有反应，分号还是在。

然后我重启了vscode，再按格式化，它提示我没有安装进行格式化vue的插件...让我选择...

这该咋办....花括号后面的分号对代码运行没有影响吧，所以别管这个了？那不管的话会不会以后工作里对其他人共同开发有影响...

收起回答

好帮手慕糖 2020-05-16 10:03:20

同学你好，同学的插件应该比老师的装的多，所以配置文件也不一样。这个是不能对比的哦。

vsCode保存格式化，自动添加分号，因为老师这里没有复现这个效果，不能特别准确的判断，不过想要去掉不要改功能的话，当前有一个方案，同学可以参考下：

1、安装prettier插件。

2、在settings.json中添加：

  "vetur.format.defaultFormatterOptions": {
        "prettier": {
           //  #去掉代码结尾的分号 
            "semi": false,
            "singleQuote": true
        }
}

祝学习愉快~

收起回答

好帮手慕糖 2020-05-15 19:01:34

同学你好，可以尝试重启下，老师这里的是有高亮的，例：

2、且return也有提示，如下：

且格式化之后也没有出现分号。

祝学习愉快~

收起回答

提问者 Aurora_Meteor #1

我重启了以后，它们还是没有变成高亮，输入return有提示了，但是格式化还是会自动加分号，是不是我的配置文件有问题呢？ { "workbench.iconTheme": "vscode-icons", "liveServer.settings.donotShowInfoMsg": true, "liveServer.settings.donotVerifyTags": true, "vsicons.dontShowNewVersionMessage": true, "files.autoSave": "afterDelay", "editor.fontSize": 20, "editor.wordWrap": "on", "workbench.commandPalette.preserveInput": true, "editor.formatOnPaste": true, "editor.formatOnType": true, "window.zoomLevel": 0, "terminal.integrated.rendererType": "dom", "[html]": { "editor.defaultFormatter": "HookyQR.beautify" }, 显示回复内容超过字数限制了，剩下的内容在另一个回答里

2020-05-15 19:52:25
提问者 Aurora_Meteor #2

这是配置文件后面的内容 "editor.multiCursorModifier": "ctrlCmd", "[javascript]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[json]": { "editor.defaultFormatter": "HookyQR.beautify" }, "css.remoteStyleSheets": [], "cssrem.rootFontSize": 37.5, "editor.suggest.snippetsPreventQuickSuggestions": false, "files. associations": { "*.ejs": "html", "*.js": "html", "*.vue": "htm1" }, "emmet.triggerExpansionOnTab ": true, "emmet.includeLanguages ": { "vue-htmL": "html", "vue": "html" }, "[css]": { "editor.defaultFormatter": "lonefy.vscode-JS-CSS-HTML-formatter" }, "[jsonc]": { "editor.defaultFormatter": "HookyQR.beautify" }, "easysass.excludeRegex": "^_" , "easysass.formats": [ { "format": "expanded", "extension": ".css" } ], "explorer.confirmDelete": false, "beautify.config": "", "[scss]": { "editor.defaultFormatter": "HookyQR.beautify" }, "auto-close-tag.activationOnLanguage": [ "xml", "php", "blade", "ejs", "jinja", "javascript", "javascriptreact", "typescript", "typescriptreact", "plaintext", "markdown", "vue", "liquid", "erb", "lang-cfml", "cfml", "HTML (EEx)", "HTML (Eex)", "plist" ] }

2020-05-15 19:52:46

提问者 Aurora_Meteor 2020-05-15 18:22:21

不过在vue里面script中，输入return也没有提示了？而且我格式化后它还自动在default和return的花括号后面加分号，在return里面写了内容以后格式化还是会出现分号，正常吗？

收起回答

提问者 Aurora_Meteor 2020-05-15 18:12:54

我好像找到您说的那个setting.json了，但是把东西写进来后它还是没有高亮呀

不过vue文件的图标都改变了，之前.vue和.html的图标是一样的，而且在vue里面写<tem...也有另外的提示了，而且可以直接生成这个标签了，这就算是那些配置生效了吗？

收起回答

好帮手慕糖 2020-05-15 17:51:47

同学你好，关于你的问题，回答如下：

1、是的，template这个标签是这样的。但是div、export这些是直接有提示的。如下：

2、如下，老师这里打开直接就是setting.json文件哦。

可能以为版本等问题，稍微有点不一样，不过能够用就好哦。

祝学习愉快~

收起回答

提问者 Aurora_Meteor 2020-05-15 11:33:23

老师我已经安装这个插件并且设置了，但还是没有自动补全，也没有这个单词的提示。

只有在一个已经有内容的vue里面写templ才会提示单词template，在一个新建的空白的vue里写完了template都没有提示，先写一个‘<’然后在写这个单词才会有单词提示，然后再加上‘>’，就自动出现闭合标签了。这个插件实现的功能就是这样吗？

我在设置里找到setting.json后，打开的文件名怎么是workspace.json呢？而且里面的路径是这个项目文件夹，原来设置的一直就是当前文件？而且这个json文件里只有前面的"folders"和"settings"是高亮的，后面的内容全是暗的，好像是没有生效吧

{
    "folders": [{
        "path": "F:\\demo\\my-project"
    }],
    "settings": {},
    "better-comments.tags": [{
            "tag": "!",
            "color": "#FF2D00",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "?",
            "color": "#3498DB",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "//",
            "color": "#474747",
            "strikethrough": true,
            "backgroundColor": "transparent"
        },
        {
            "tag": "todo",
            "color": "#FF8C00",
            "strikethrough": false,
            "backgroundColor": "transparent"
        },
        {
            "tag": "*",
            "color": "#98C379",
            "strikethrough": false,
            "backgroundColor": "transparent"
        }
    ],
    "files. associations": {
        "*.ejs": "html",
        "*.js": "html",
        "*.vue": "htm1"
    },
    "emmet.triggerExpansionOnTab ": true,
    "emmet.includeLanguages ": {
        "vue-htmL": "html",
        "vue": "html"
    },

}