快速进行Web阅读器的开发

最新推荐文章于 2021-03-10 18:45:10 发布

hzyzam

最新推荐文章于 2021-03-10 18:45:10 发布

阅读量458

点赞数 3

分类专栏：前端开发文章标签： VSCode

本文链接：https://blog.csdn.net/weixin_44694674/article/details/97102306

版权

前端开发专栏收录该内容

0 篇文章 0 订阅

订阅专栏

VSCode代码编译器

VSCode作为前端开发中最受欢迎的编译工具，轻量级、拥有丰富的插件，可大大提高软件开发效率。

博客园中推荐的10个必备插件：https://www.cnblogs.com/parry/p/vscode_top_ten_plugins.html
参考原作者教程： https://blog.csdn.net/weixin_43454460/article/details/83341499

Cmd命令：

cd…返回上一级目录
dir 查看文件夹中的文件名
mkdir+文件名创建文件
xcopy 可以用来拷贝文件夹：

例如我有一个文件夹在c:\windows\file，我要复制到d:\，就可以打xcopy c:\windows\file d:\file /e
这样两个地方的file文件夹的内容就是一样的。要注意的是d:\file一定要打file，如果不打就会将file里的文件放在d:，会造成文件摆放乱；其次，一定要加参数/e，不打会复制文件不全的。（其实不太会用命令行操作，实际上是直接复制粘贴过去的。）

电子书解析和渲染：

快速生成模板代码使用的是Vue 2 Snippets插件
推荐安装Vetur插件，可以实现vue的语法高亮、自动补全、代码格式化等功能

Vue.json模板代码如下：

{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
"Print to console": {
	"prefix": "vue",
	"body": [
		"<template>",
		"  <div></div>", 
		"</template>",
		"",
		"<script>",
		"export default {",
		"}",
		"",
		"</script>",
		"<style lang='scss' scoped>",
		"@import '../assets/styles/global';",
		"</style>"
	],
	"description": "Log output to console"
    }
}

Vue.json文件定义了所有vue文件对应的模板代码。
要想在Ebook.vue中使用TAB键自动补全，需要手动把vue.json的模板代码敲进vue.json目录下。

Windows用户：File> preferences >User Snippets> vue.json
MAC用户：Code> preferences >User Snippets> vue.json

在vue.json中补全代码之后，就可以在Ebook.vue中使用TAB键快速补全代码了。

出现报错的情况：

被规则禁用：

解决方法：

/* eslint-disable +规则名称*/

/* eslint-disable space-before-function-paren,spaced-comment,no-trailing-spaces,comma-spacing,indent*/

.eslintrc.js中添加设置（一劳永逸）

在这里插入图片描述

rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'space-before-function-paren': 'off',
  }