vue项目配置eslint(附visio studio code配置)，mmkv原理

用户33914928060
71 阅读4分钟

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：docs.qq.com/doc/DSmRnRG… browser: true,

},

// 扩展一个流行的风格指南，即 eslint-config-standard

// github.com/feross/stan…

extends: 'standard',

// required to lint *.vue files

plugins: [

// 此插件用来识别.html 和 .vue文件中的js代码

'html',

// standard风格的依赖包

"standard",

// standard风格的依赖包

"promise"

],

// add your custom rules here

'rules': {

// allow paren-less arrow functions

'arrow-parens': 0,

// allow async-await

'generator-star-spacing': 0,

// allow debugger during development

'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0

}

}

3.安装配置文件中依赖包：

  • eslint

  • babel-eslint

  • eslint-plugin-html

  • eslint-config-standard

  • eslint-plugin-standard

  • eslint-plugin-promise

通过 npm install (package) --save-dev 来配置到开发环境中。

并通过 npm install (package) -g 将依赖包安装到全局环境下,为什么还要安装全局环境下，原因可先行思考，稍后会在结尾解释。

截止目前eslint环境就配置好了，可执行eslint test.js来检测是否可以运行成功。

visio studio code 配置eslint

  1. 左侧菜单栏选择“扩展”，搜索“eslint”安装并重新加载，即可实现对.js文件的代码检测。

  2. 在项目中安装eslint插件：npm install eslint-plugin-html --save-dev (安装过的就不需要了)

  3. 配置vsc实现对.vue .html文件中的js代码段的检测： 顶部选项Code -> 首选项 -> 设置，搜索编辑“eslint.validate”添加 "html","vue"!

"eslint.validate": [

"javascript",

"javascriptreact",

"html",

"vue"

]

  1. 可以打开项目中.vue文件，发现不规范的语法都已经被红色波浪线标记出来了。

配置控制台的eslint检测环境

如果你想在控制台查看项目中所有的warning 和 error，就请继续往下看~

  1. 保证依赖包都在全局环境目录下安装

  2. 执行 eslint --ext .js,.vue src 命令。 --ext用来指定检测的文件格式，src是检测的目录。也可以给该指令提供一个更好记的别名，编辑package.json，在script属性中新增一条。即可通过 npm run lint来检测项目中的warning 和 error了。

"scripts": {

"lint": "eslint --ext .js,.vue src"

},

如何给项目配置eslint到这里就讲完了，最后说下问什么要在全局环境下安装依赖包吧。

  1. 只有全局环境下安装了eslint才能执行 eslint --init 和 eslint --ext .js,.vue src 等eslint指令。

  2. 当项目执行eslint检测时，会先检测全局环境下有没有eslint，显然文章第一步就是在全局安装了，那么全局环境下的eslint引用依赖包时也只会在全局环境下查找。

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

  • HTML5有哪些新特性？

  • Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

  • 如何实现浏览器内多个标签页之间的通信？

  • ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

  • 简述⼀下src与href的区别？

  • cookies,sessionStorage,localStorage 的区别？

  • HTML5 的离线储存的使用和原理？

  • 怎样处理 移动端 1px 被 渲染成 2px 问题？

  • iframe 的优缺点？

  • Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 问：0.1 + 0.2 === 0.3 嘛？为什么？

  • JS 数据类型

  • 写代码：实现函数能够深度克隆基本类型

  • 事件流

  • 事件是如何实现的？

  • new 一个函数发生了什么

  • 什么是作用域？

  • JS 隐式转换，显示转换

  • 了解 this 嘛，bind，call，apply 具体指什么

  • 手写 bind、apply、call

  • setTimeout(fn, 0)多久才执行，Event Loop

  • 手写题：Promise 原理

  • 说一下原型链和原型链的继承吧

  • 数组能够调用的函数有那些？

  • PWA使用过吗？serviceWorker的使用原理是啥？

  • ES6 之前使用 prototype 实现继承

  • 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

  • 事件循环机制 （Event Loop）

avatar
文章
阅读
粉丝