问题描述
我只是想在我的 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';