vscode编写vue代码没有代码提示-猿码集

1. 确认是否安装了相关插件

在使用Vscode编写Vue代码时，如果没有代码提示，第一步就是要确认是否安装了相关的插件，比如Vetur、VueHelper等。这些插件可以提供html和Vue文件中的代码高亮、智能提示、代码片段等功能，是Vscode编写Vue必不可少的插件。

安装插件的步骤如下：

1.1 打开Vscode的扩展库

鼠标点击左侧的扩展图标，或者按下快捷键“Ctrl+Shift+X”打开扩展库。

1.2 搜索相关插件

在搜索框中输入插件名称，比如“Vetur”、“VueHelper”，然后按下Enter键搜索。

1.3 安装插件

在搜索结果中找到需要安装的插件，然后点击“安装”按钮即可完成安装。

安装插件示例：

2. 确认Vscode配置

在确认已安装相关插件的情况下，如果还是没有代码提示，那么需要确认Vscode的配置是否正确。下面主要介绍如何配置Vetur插件。

2.1 打开Vscode的用户设置

鼠标点击左下角的设置图标，或者按下快捷键“Ctrl+,”打开用户设置。

2.2 配置Vetur插件

在用户设置中搜索“Vetur”，然后配置如下选项：

"vetur.format.defaultFormatter.html": "prettier", "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.postcss": "prettier", "vetur.format.defaultFormatter.scss": "prettier", "vetur.format.defaultFormatter.less": "prettier", "vetur.format.defaultFormatter.stylus": "stylus-supremacy", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatter.ts": "prettier", "vetur.format.defaultFormatter.sass": "sass-formatter", "vetur.format.styleInitialIndent": false, "vetur.format.styleClosingBrace": false,

"vetur.validation.template": false

其中，“vetur.format.defaultFormatter.*”是用来配置代码格式化插件的，默认为prettier。如果需要使用其他的代码格式化插件，需要先安装该插件，然后将其配置到对应的选项中。

另外，“vetur.format.styleInitialIndent”和“vetur.format.styleClosingBrace”是用来控制样式的代码缩进和样式闭合符号是否换行的选项。

最后，“vetur.validation.template”是用来控制是否开启html模板的语法检查的选项。如果html模板中有较多的错误提示，可以将其关闭。

配置Vetur的示例：

3. 确认Vue项目的配置

如果确认Vscode的配置没有问题，还是没有代码提示，那么需要确认Vue项目的配置是否正确。下面主要介绍如何配置Vue项目。

3.1 安装VueCLI

使用VueCLI可以快速创建Vue项目，并且自动配置好一些必要的插件和工具。如果没有安装VueCLI，可以通过以下命令进行安装：

npm install -g vue-cli

执行该命令后，等待安装完成即可。

3.2 创建Vue项目

使用VueCLI可以快速创建Vue项目，只需要执行以下命令即可：

vue create my-project

其中，“my-project”是项目的名称，可以根据实际情况修改。执行该命令时，会提示选择一些配置选项，比如使用哪种预设、是否安装一些插件等。可以根据实际情况选择。

3.3 配置ESLint

ESLint是一个JavaScript代码检查工具，可以帮助开发人员避免一些常见的代码错误。在Vue项目中，可以通过配置ESLint来实现代码检查和自动修复的功能。具体配置步骤如下：

3.3.1 安装ESLint

可以通过以下命令安装ESLint：

npm install eslint --save-dev

3.3.2 配置ESLint

在Vue项目的根目录下创建.eslintrc.js文件，然后将以下代码复制到该文件中：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  plugins: [
    'vue'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

根据实际情况，可以修改ESLint的配置选项。

3.4 配置Vscode中的用户设置

需要在Vscode的用户设置中添加以下配置：

"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "vue",
    "autoFix": true
  }
]

其中，“eslint.validate”是用来配置需要进行ESLint验证的文件类型和是否自动修复的选项。在Vue项目中，“language”需要设置为“vue”。

确认Vue项目的配置的示例：

4. 确认文件类型

在使用Vscode编写Vue代码时，需要确认正在编辑的文件类型是否正确，比如是Vue文件还是JavaScript文件。

如果文件类型不正确，可以通过以下步骤修改：

4.1 打开文件

在Vscode中打开需要修改的文件。

4.2 修改文件类型

点击右下角的文件类型，或者按下快捷键“Ctrl+K M”，然后选择正确的文件类型即可。

修改文件类型的示例：

5. 确认Vscode版本

在使用Vscode编写Vue代码时，如果还是没有代码提示，需要确认使用的Vscode版本是否正确。

可以通过以下步骤检查Vscode的版本：

5.1 打开Vscode

首先，需要打开Vscode。

5.2 查看Vscode版本

在Vscode的菜单中选择“帮助” -> “关于Vscode”，然后会弹出Vscode的版本信息窗口。

查看Vscode版本的示例：

6. 小结

在使用Vscode编写Vue代码时，如果没有代码提示，需要确认是否安装了相关插件、Vscode配置是否正确、Vue项目配置是否正确、文件类型是否正确以及Vscode版本是否正确。只有在确认每个环节都没有问题的情况下，才能保证能够正常的进行Vue开发工作。

vscode编写vue代码没有代码提示