找不到模块 'prismjs/components/prism-core' vue-prism-editor 的声明文件

Question

我只是想在我的 vuejs 3 应用程序中使用这个包 (vue-prism-editor)，但我总是收到如前所述的错误。

TS7016: Could not find a declaration file for module 'prismjs/components/prism-core'. 'C:/Sibeesh/GitHub/vue-resume/node_modules/prismjs/components/prism-core.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/prismjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'prismjs/components/prism-core';`

我确实安装了 @types/prismjs 但没有成功。我按照 steps mentioned in the readme 并尝试完全相同。

下面是我的 package.json 文件。

{
  "name": "vue-resume",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "jsoneditor": "^9.2.0",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-prism-editor": "^2.0.0-alpha.2",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/prismjs": "^1.16.3",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "prismjs": "^1.23.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5"
  }
}

这是我的 vue 组件。

<template>
  <div class="hello">
    <prism-editor
      class="code-editor"
      v-model="code"
      :highlight="highlighter"
      line-numbers
    ></prism-editor>
  </div>
</template>

<script lang="ts">
  // import Prism Editor
  import { PrismEditor } from 'vue-prism-editor';
  import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere

  // import highlighting library (you can use any library you want just return html string)
  import { highlight, languages } from 'prismjs/components/prism-core';
  import 'prismjs/components/prism-javascript';

  export default {
    components: {
      PrismEditor,
    },
    data: () => ({ code: 'console.log("Hello World")' }),
    methods: {
      highlighter(code: string) {
        return highlight(code, languages.js); // languages.<insert language> to return html with markup
      },
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

/* required class */
  .code-editor {
    /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
    background: #2d2d2d;
    color: #ccc;

    /* you must provide font-family font-size line-height. Example: */
    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 5px;
  }

  /* optional class for removing the outline */
  .prism-editor__textarea:focus {
    outline: none;
  }

</style>

您是否曾在 vue 3 应用程序中使用过此插件？

Answer 1

在这个问题上花了一些时间后，我可以找出我在做什么错误。你注意到我的 script 中的 lang="ts" 了吗？好吧，这就是这个问题的根本原因。从 <script> 中删除它后，错误消失了。这 issue in GitHub 帮助我找到了解决方案。这种方法的一个缺点是我们不再能够使用 Type annotations，因为只有 TypeScript 文件才支持它。

另一个错误是我没有包括对 import 'prismjs/components/prism-clike'; 的引用。如果我们不包含该文件，我们将收到上述错误。

Uncaught TypeError: Cannot read property 'class-name' of undefined
    at eval (prism-javascript.js?416b:3)

另一种方法：

如错误中所述，您还可以创建一个 .d.ts 文件并添加 declare module 'prismjs/components/prism-core'。我在我的组件目录中创建了这个文件。

然后你可以按照前面的方式重写你的脚本。

<script lang="ts">
import { PrismEditor } from "vue-prism-editor";
import { highlight, languages } from "prismjs/components/prism-core";
import "vue-prism-editor/dist/prismeditor.min.css";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-json";
import "prismjs/themes/prism-tomorrow.css";
import sampleData from "../assets/resume-template.json";
import { Options, Vue } from "vue-class-component";

@Options({
  components: {
    PrismEditor,
  },
  data: () => ({
    code: JSON.stringify(sampleData),
  }),
  methods: {
    submit() {
      console.log(this.code);
    },
    highlighter(code: string) {
      return highlight(code, languages.json);
    },
  },
})
export default class CodeEditor extends Vue {}
</script>

只是分享，因为它可能对其他人有帮助。

Answer 2

我用打字稿尝试了一些方法，发现这是最简单的方法

第一

yarn add @types/prismjs

然后

import { highlight, languages, highlightElement } from 'prismjs';

找不到模块 'prismjs/components/prism-core' vue-prism-editor 的声明文件

Could not find a declaration file for module 'prismjs/components/prism-core' vue-prism-editor

vue.js

vuejs2

vue-component

vuejs3

vue-prism-editor