Siykt的博客
所有文章 标签 TODO 分类 算法
Siykt的博客

Contents

实现在 VSCode 中无痛开发 nvue：语法高亮、代码提示、eslint 配置及插件 Patch

 included in JavaScript
   1620 words   4 minutes 

实现在 VSCode 中无痛开发 nvue：语法高亮、代码提示、eslint 配置及插件 Patch

前言

.nvue 是 uni-app 中的一种文件类型，它是一种基于 Vue 的模板语法，并使用原生渲染引擎。 如果你需要实现如 map 等功能，使用 nvue 是一个不错的选择。

但是，nvue 在 vscode 中的开发体验并不是很好，没有内置的语法高亮，也没有内置的代码提示，这让我们在开发 nvue 时，并不能享受到 IDE 带来的便利。

本文将会手把手教你如何实现在 vscode 中无痛开发 nvue。

涉及到的知识点有：

  1. vscode 设置与扩展
  2. eslint 配置与插件
  3. eslint-plugin-vue 源码分析与 patch

正文

支持 Vue3/Vue2 SFC 语法高亮和代码提示

我们知道 .nvue 是基于 vue 的，所以第一步是让 vscode 支持 vue 的语法高亮和代码提示并将 nvue 关联至 vue 文件。 如果你已经实现了 vue 文件的支持，则可以查看添加 nvue 文件关联

在 vscode 的扩展商店中搜索 volar，或直接搜索扩展 ID Vue.volar 安装。

https://files.catbox.moe/ri36ui.png

安装完成后，如果你使用的是 vue2 还添加 @vue/runtime-dom 这个依赖。

npm i @vue/runtime-dom -D

添加 nvue 文件关联

首先我们使用 Ctrl + , 打开设置项，并搜索 files.associations：

https://files.catbox.moe/1u1ov6.png

然后点击添加，并加入 *.nvue 关联 vue，使 vscode 解析 nvue 文件时使用 vue 的方式。

https://files.catbox.moe/b7lzhn.png

这样，我们就可以在 .vue 与 nvue 文件中享受到语法高亮和代码提示了。

设置 ESLint

在 vscode 中，我们可以通过 eslint 来规范我们的代码，让我们的代码更加规范，更加易读。 同样的，如果你的项目已经支持了 eslint，也可以跳过至添加 override 配置 .nvue 文件的解析。

安装 eslint 依赖

npm i eslint -D

初始化 eslint 配置文件

建议使用 antfu 的 @antfu/elsint-config 一键配置好基本的 ‘.vue’ 文件支持

 npm i vue-eslint-parser @antfu/elsint-config -D

vue-eslint-parser 是 eslint 的解析器，用于解析 .vue 文件，我们会在后面的步骤中使用到它。

创建 .eslintrc.js 文件

内容如下：

module.exports = {
  extends: [
    '@antfu,
  ],
}

如果你需要一些自定义的规则可以添加在 rules 选项中，如：

// .eslintrc.js
module.exports = {
  extends: [
    '@antfu,
  ],
  rules: {
    // 你的自定义规则
    'no-console': 'off',
  }
}

添加 override 配置 .nvue 文件的解析

在 .eslintrc.js 中添加 overrides 配置，使 eslint 解析 .nvue 文件时使用 vue 的方式。

// .eslintrc.js
module.exports = {
  // ...
  overrides: [
    {
      files: '.nvue',
      // 使用 vue-eslint-parser 解析 .nvue 文件
      parser: 'vue-eslint-parser',
    },
  ],
};

这时 eslint 就可以正常的解析 .nvue 文件了，但是 eslint-plugin-vue 并不能正常的解析 .nvue 文件中的 <template>，<script>，<style> 标签，所以我们需要对 eslint-plugin-vue 进行 patch。

错误示例：

https://files.catbox.moe/q8v0vt.png

Patch eslint-plugin-vue

在 patch 之前，我们需要先了解一下 eslint-plugin-vue 的工作原理。

eslint-plugin-vue 的核心逻辑就是提供大量的规则，再由 vue-eslint-parser 提供的 AST 进行既定规则的检查。

eslint-plugin-vue 的入口文件，index.js

https://files.catbox.moe/studfy.png

如上图的第一个规则 array-bracket-newline，它会检查 [] 之间是否有换行符。 这其实是 eslint 的默认规则，eslint-plugin-vue 只是将 eslint 的规则进行了封装与扩展，使其可以支持检查 .vue 文件。

你可以在 node_modules/eslint-plugin-vue/lib/rules 下查看 array-bracket-newline 的规则。

https://files.catbox.moe/hiwt8r.png

但 .nvue 的语法与 .vue 是一致的，为什么它不能正常的解析呢？

这点我们可以从 eslint 的官网中找到答案：

https://files.catbox.moe/1vsjox.png

因为 eslint-plugin-vue 并没有提供对 .nvue 文件的 Processor（处理器），所以它的规则还是会使用 eslint 的默认规则逻辑， 也就是说，对于 .nvue 文件 eslint-plugin-vue 提供的规则并没有生效，其中也包括了最重要的规则的覆盖。

https://files.catbox.moe/fn4ytk.png

那么，到这一步我们就可以知道，要想让 eslint-plugin-vue 正常的解析 .nvue 文件，只需要为其提供一个 Processor 的入口即可。 而且它（Processor）的核心逻辑与 .vue 的相同。也就是说我们只需要在 eslint-plugin-vue 中添加一个 .nvue 的 Processor 就可以实现 .nvue 的 patch。

具体实现如下：

// eslint-plugin-vue/lib/index.js
module.exports = {
  // ...
  processors: {
    '.vue': require('./processor'),
    '.nvue': require('./processor'),
  },
  // ...
};

是不是很简单？这样我们就可以正常的使用 eslint-plugin-vue 来检查 .nvue 文件了。

当然，eslint 的 plugin 仅支持 npm package 的方式，所以我们需要将 eslint-plugin-vue 的源码进行打包，然后发布到 npm 上。 这里我就不再赘述了，你可以参考其他的文章。我已经将打包好的 eslint-plugin-vue 发布到了 npm 上，你可以直接安装使用。

pnpm add @jcfe/eslint-plugin-nvue -D

Prettier Overrides

如果你也同时在使用 prettier 作为格式化工具，那么到这一步应该就遇到 eslint-plugin-prettier 的报错了。

错误内容大致如下：

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff5203780bde47809de95b7570030c85~tplv-k3u1fbpfcp-watermark.image?

不要慌！ 这时只需要在 .prettierrc 等 config 中添加 overrides 配置即可：

.prettierrc

{
  "overrides": [
    {
      "files": "*.nvue",
      "options": {
        "parser": "vue"
      }
    }
  ]
}

修改完之后 重启 VSCode 就 OK 啦。

总结

至此，我们就可以在 uni-app 项目中使用 eslint 来规范我们的代码了。

其实一些项目的源码远比我们想象中的容易阅读，所以大家遇到困难的时候不要放弃，多看看源码，多思考，相信你一定会有所收获的。

当然，如果你有更好的实现方式，欢迎在评论区留言，我会及时回复的。

参考

Updated on 2023-05-15
 基础建设, Vue
Back | Home