Vue基础精讲 —— 规范代码三步走？关于eslint和editorconfig以及precommit的安装和使用

对象篇

模块化编程-自研模块加载器

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

{

“plugins”: [

“html”

]

}

4. eslint相关插件已安装，配置已完成，怎么启动呢？在 package.json 中增加一条命令

–ext指定文件后缀，client/ 检测哪个文件夹下的文件

“scripts”: {

“lint”: “eslint --ext .js --ext .jsx --ext .vue client/”

}

运行 npm run lint 能看到很多报错信息，根据报错信息，可返回错误所在行手动修正

5. 当然，eslint有提供自动修复功能 --fix

“scripts”: {

“lint-fix”: “eslint --fix --ext .js --ext .jsx --ext .vue client/”

}

运行 npm run lint-fix 就能自动修复代码中的不规范

6. 若希望在开发过程中实时检测语法（即错即改，间接增加自己编写代码的规范性），不再手动执行  npm run lint-fix 命令，

需要让webpack（因为项目是基于webpack开发的）能够支持eslint，需安装eslint-loader

npm i eslint-loader -D

在webpack.config.base.js文件中配置eslint-loader

{

// 所有需要检测文件的后缀名集合

test: /.(vue|js|jsx)$/,

// 使用eslint-loader

loader: ‘eslint-loader’,

// 不检测/node_modules/下的文件，因为/node_modules/里的js文件非常多，而且已经经过Babel等编译处理，这些文件肯定是不符合eslint的standard标准的

// 因为经过Babel处理之后的js,可能是使用es5的规则，而eslint的standard校验标准是使用es6甚至es7的规则

exclude: /node_modules/,

// .vue文件指定用vue-loader处理，eslint只是做代码检测，不能让他来默认处理.vue文件，我们希望vue-loader在进行代码处理之前，先进行一次eslint代码检测，若果代码检测不通过，直接报错，不再需要vue-loader处理；

// pre表示预处理，对于这几种文件，在使用真正的loader去处理之前，都会通过eslint-loader进行代码检测预处理，不同参数还能指定后处理

enforce: ‘pre’

}

7. parser（指定解析器）,babel-eslint 解析器是一种使用频率很高的解析器，因为现在很多公司的很多项目目前都使用了es6，为了兼容性考虑基本都使用babel插件对代码进行编译。经过Babel编译的语法不符合eslint规范。对于babel编译后的代码使用 babel-eslint 这款解析器可以避免不必要的麻烦。一般的，使用webpack和Babel开发项目都会指定parser解析器为babel-eslint

npm i babel-eslint -D

在 .eslintrc文件配置parser参数

{

“parser”: “babel-eslint”

}

如果你使用的默认解析器的话，且在代码中使用了浏览器有兼容性问题的js新特性，使用webpack编译就会出现问题，这时我们一般装最新的eslint或者安装使用 babel-eslint 来解决问题。

editorconfig

============

EditorConfig插件摆脱了重复设置代码规范这件麻烦事，只需配置一个 .editorconfig 文件，在其中设置好要遵守的代码规范，放在项目的根目录下，就能够在几乎所有的主流 IDE 和编辑器中复用了，可以将 .editorconfig 文件也提交到版本控制系统中，就不需要针对不同 IDE 和编辑器再单独进行设置。webstorm默认已安装这个插件。

建议项目根目录创建.editorconfig 文件

root = true // 在项目中读editorconfig配置，读到当前文件就行，不需要再去上层目录搜索

[*] // 给所有文件指定如下规范

charset = utf-8 // 编码格式

end_of_line = lf

indent_size = 2 // 缩进大小

indent_style = space // 缩进方式 // 使用空格spaces，不用制表符tabs

insert_final_newline = true // 是否让文件以空行结束

trim_trailing_whitespace = true // 是否自动删除文件末尾空白行

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

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

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

6. UI样式**

7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-D9W7vdFA-1715836506528)]

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-qLKm5Kd4-1715836506529)]