返回

VSCode 无痛开发 nvue：语法高亮、代码提示、eslint 配置及插件补丁

前端







## 为什么要在 VSCode 中开发 nvue？

nvue 是 uni-app 中的一种文件类型，它是一种基于 Vue 的模板语法，具有很强的灵活性。但是，nvue 在 VSCode 中的开发体验并不是很好，默认情况下没有语法高亮、代码提示等功能。

## 如何在 VSCode 中无痛开发 nvue？

### 1. 安装插件

要在 VSCode 中开发 nvue，您需要安装以下插件：

* [Vue Language Features](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

### 2. 配置语法高亮

要启用语法高亮，您需要在您的用户设置中添加以下代码：

```json
"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "source.nvue",
      "settings": {
        "foreground": "#FF0000"
      }
    }
  ]
}

3. 配置代码提示

要启用代码提示，您需要在您的用户设置中添加以下代码：

"vetur.completion.tagCasing": {
  "nvue": "kebab-case"
}

4. 配置 eslint

要启用 eslint，您需要在您的项目根目录下创建一个名为 .eslintrc.json 的文件，并添加以下代码：

{
  "extends": "eslint:recommended",
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "single"]
  }
}

5. 安装插件补丁

要安装插件补丁，您需要在您的项目根目录下创建一个名为 .vscode 的文件夹，并在该文件夹下创建一个名为 extensions.json 的文件，并添加以下代码：

{
  "recommendations": [
    "octref.vetur",
    "dbaeumer.vscode-eslint"
  ]
}

结论

通过以上配置，您就可以在 VSCode 中无痛开发 nvue 了。如果您有任何问题，可以随时留言提问。