如何解决找不到模块“prismjs/components/prism-core”vue-prism-editor 的声明文件
我只是想在我的 private final A a;
应用程序中使用这个包 (vue-prism-editor),但我总是收到前面的错误。
vuejs 3
我确实安装了 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';`
,但没有安装。我跟着 steps mentioned in the readme 并尝试完全相同。
下面是我的 @types/prismjs
文件。
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
中的 lang="ts"
了吗?嗯,这就是这个问题的根本原因。从 script
中删除后,错误消失了。这 issue in GitHub 帮助我找到了解决方案。这种方法的一个缺点是我们不能再使用 <script>
,因为只有 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'
只是分享,因为它可能对其他人有帮助。
,我用打字稿尝试了一些方法,发现这是最简单的方法
- 首先
yarn add @types/prismjs
- 然后
import { highlight,languages,highlightElement } from 'prismjs';
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。