Vue中的ESLint

技术栈工具

• IDE：VSCode
• lint ：ESLint
• lang：TypeScript

TS 是啥？

• 语法：TS 是 JS 的超集，语法指的是我们书写文本的方式来编程。
• 类型：TS 是一个类型化的超集，他定义了类型的规则和如何使用他们。
• 请记住：TS 其实就是带有类型检测的JS。

ESLint是啥？

• ESLint可以识别并报告 js 代码的语法错误，避免研发 bug，多人研发时保持统一的代码风格。

TS 里如何使用 ESLint

• 你想知道为啥 TS 要使用 ESLint 么？请移步荷包蛋_(代码检查工具！从 TSLint 到 ESLint)查看，他写的挺详细的，这里主要介绍一下typescript-eslint。
• typescript-eslint：是一个 ESLint 的插件，可以用于加载自定义的规则和已经定义好的规则配置文件。
• @typescript-eslint/parser 解析器，可以将 TS 代码转换为 ESLint 认识的格式。
• 这回你应该知道，下面的一堆依赖了

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript

Vue如何使用ESLint

• 跟TS原理类似，ESLint是不认识.vue文件的，自然也不会解析，所以这里就需要一个解析器（eslint-plugin-vue），正如官网所说，它可以在.vue文件中用ESLint检查<template>、<script>标签。
• 当你配置完eslint-plugin-vue插件之后，你会发现.vue中的首行报红并提示Parsing error: '>' expected.eslint错误信息，别担心，你只需要把解析器位置更换一下即可。

//.eslintrc.json  更新后的样子
"parser": "vue-eslint-parser", 
"parserOptions": {
    "parser": "@typescript-eslint/parser",
     "ecmaVersion": "latest",
     "sourceType": "module"
 }

此时ESLint就认识.vue文件了。

VSCode ESLint 插件是啥？

• 官方解释：结合 ESLint 到 VSCode。

1. eslint 语法问题中分为警告(黄色浪线)和错误(红色浪线)，如果没有插件，你就看不到了。
2. 没有视觉上的提示，自然你也就无法发现，此时如果运行和打包都没有log 产生。
3. 当你在vscode 的终端内运行 eslint . 命令之后你会发现，有eslint 的 error 和warnings产生。
4. 综上所述，插件达到了“结合”的效果，让 eslint 语法错误得以在 vscode 编辑器内显示。

• VSCode ESLint 插件相关配置

1. 如果你安装了该插件，就可以在 vscode 中配置相关参数，这里强烈建议保存时自动格式化代码，步骤如下：
   在工程内创建一个.vscode文件夹，在该文件夹内创建一个settings.json文件。

{ //settings.json
		//这里的设置是针对 eslint 插件的 2.*版本。如果是小于 2 版本，请异步 eslint 插件的官网查看。
	"eslint.format.enable": true,
    "editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
 	   "source.fixAll.eslint": "explicit"
	},
}

以上， 你应该知道了ESLint、ESLint 插件在 VSCode 运作的原理了。

基础工具

基础工具就不介绍了必会的东西如：

• Vue CLI
• Vite
• Vuex
• Pinia
• Vue Router
• React Router

工具类介绍(不区分 vue/react)

• Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。官网

	npm install lodash

• Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样。官网

	npm install dayjs

• Numberal 一个用于格式化和操作数字的javascript库。官网

	npm install numberal

• TanStack Query 它可以让数据抓取、缓存、更新、分页等变得更加容易。官网

	npm install @tanstack/vue-query (如果是 react 请使用@tanstack/react-query)

• GSAP 一个牛叉的 JS 动画库。官网

	npm install gsap