ESLint的简单使用(js,ts,vue)

一、ESLint介绍

1.为什么要用ESLint

统一团队编码规范(命名,格式等)

统一语法

减少git不必要的提交

减少低级错误

在编译时检查语法,而不是等js引擎运行时才检查

2.eslint用法

可以手动下载配置

可以通过vue脚手架创建项目时自动下载

3.ESLint包

安装方式:

通过npm直接进行全局安装npm i eslint -D

通过vue脚手架创建项目时选择安装eslint模块包vue create 创建项目时选择eslint安装的包

vscode中ESLint扩展工具

二、手动下载配置(js)

1.创建一个测试文件夹:eslint-test
2.初始化项目:npm init -y(创建package.json)
3.直接在项目中安装eslint包npm i eslint -D

node_modules中下载了很多包,.bin/eslint.cmd脚本文件,内部通过nodejs执行eslint运行包的代码;@eslint包用来规范eslint配置文件;eslint开头的包是eslint运行包,包含eslint代码。

4.生成ESLint配置文件

创建eslint.config.js文件

export default {rules: {"no-unused-vars": "error","no-console": "error","no-sparse-arrays": "error","no-undef": "error","no-unreachable": "error","no-dupe-keys": "error"}
}

在package.json文件中添加type属性,添加命令 

{"name": "eslint-test","version": "1.0.0","main": "index.js","type": "module","scripts": {"lint": "eslint ."},"keywords": [],"author": "","license": "ISC","description": "","dependencies": {"eslint": "9.14.0"}
}

 创建js文件src/index.js

//不允许变量声明但没有使用no-unused-vars
const name = 'zs'//不允许打印no-console
console.log('name');//不允许数组中有空元素no-sparse-arrays
const arr = [1, , 3]//不允许有未声明的变量no-undef
console.log(afffffff);//不允许函数return后还有代码no-unreachable
function showFn(toName, fromName) {let a = 0;return a;a = 1
}//不允许对象有重复的key,no-dupe-keys
const obj = {name: 'zs',name: 'zs1'
}

 终端执行命令npm run lint规范代码


ESLint可以创建独立的配置文件.eslintrc.js,也可以直接在package.json中配置

a.执行node_modules/.bin文件夹里的eslint脚本来创建配置文件

包含完整脚本路径的命令:'./node_modules/.bin/eslint --init'

也可以用npx来执行npxeslint --init

创建配置文件过程中,需要选择配置

 自动生成eslint.config.mjs文件

eslint.config.mjs
import globals from "globals";
import pluginJs from "@eslint/js";/** @type {import('eslint').Linter.Config[]} */
export default [{files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},{languageOptions: { globals: globals.browser }},pluginJs.configs.recommended,
];

创建js文件,输入npx eslint 文件名执行语法检查

5.规范集简化配置npm i@eslint/js
// export default {
//     rules: {
//         "no-unused-vars": "error",
//         "no-console": "error",
//         "no-sparse-arrays": "error",
//         "no-undef": "error",
//         "no-unreachable": "error",
//         "no-dupe-keys": "error"
//     }
// }
//规则集
import js from '@eslint/js'
export default [js.configs.recommended]
三、手动安装eslint(ts)
1.创建一个测试文件夹:eslint-ts-test
2.初始化项目:npm init -y(创建package.json)
3.直接在项目中安装eslint包npm i eslint @eslint/js @typescript-eslint/parser -D
{"name": "pro","version": "1.0.0","main": "index.js","type": "module","scripts": {"lint": "eslint ."},"keywords": [],"author": "","license": "ISC","description": "","devDependencies": {"@eslint/js": "9.14.0","eslint": "9.14.0","@typescript-eslint/parser": "8.14.0"}
}
 4.新建配置文件eslint.config.js文件
import tsPsrser from '@typescript-eslint/parser'export default {//文件配置,哪些文件需要被校验,忽略eslint.config.js文件ignores: ["eslint.config.js"],files: ["**/*.ts"],//规范配置rules: {"no-unused-vars": "error","no-console": "error"},//语言配置languageOptions: {//指定解析器parser: tsPsrser}
}
 5.创建ts文件,src/index.ts
const age=18
console.log(name)/*ts类型定义
*ts相关的校验,eslint自带的校验espress解析器无法识别
*我们需要ts解析器来解析ts代码,完成类型校验
*/
interface Uesr{name:string;age:number;
}

  Parsing error: The keyword 'interface' is reserved

ts相关的校验,eslint自带的校验espress解析器无法识别

我们需要ts解析器来解析ts代码,完成类型校验 npm i @typescript-eslint/parser

四、手动安装eslint(vue)

1.创建一个测试文件夹:eslint-ts-test
2.初始化项目:npm init -y(创建package.json)
3.直接在项目中安装eslint包npm i eslint @eslint/js @typescript-eslint/parser vue-eslint-parser -D
{"name": "eslint-test","version": "1.0.0","main": "index.js","type": "module","scripts": {"lint": "eslint ."},"keywords": [],"author": "","license": "ISC","description": "","dependencies": {"@eslint/js": "9.14.0","@typescript-eslint/parser": "8.14.0","eslint": "9.14.0","vue-eslint-parser": "9.4.3"}
}
 4.新建配置文件eslint.config.js文件
import tsParser from '@typescript-eslint/parser'
import vueParser from 'vue-eslint-parser'
export default {ignores: ["eslint.config.js"],files: ["**/*.ts", "**/*.vue"],rules: {"no-unused-vars": "error","no-console": "error","no-sparse-arrays": "error","no-undef": "error","no-unreachable": "error","no-dupe-keys": "error"},languageOptions: {//指定解析器parser: vueParser,//解析器的语法parser设置parserOptions: {parser: tsParser}}
}
 5.创建vue文件,src/index.vue
<template></template>
<script setup lang="ts">
//不允许变量声明但没有使用no-unused-vars
const name = 'zs'//不允许打印no-console
console.log('name');//不允许数组中有空元素no-sparse-arrays
const arr = [1, , 3]//不允许有未声明的变量no-undef
console.log(afffffff);//不允许函数return后还有代码no-unreachable
function showFn(toName, fromName) {let a = 0;return a;a = 1
}//不允许对象有重复的key,no-dupe-keys
const obj = {name: 'zs',name: 'zs1'
}//类型定义
interface User{name:string;age:number;
}
</script>

五、自定义插件

 1.rule定义

针对这个规范的需求,编写一个rule,原理是通过ast节点处理来完成

//规则的本质是一个对象,
//eslint插件,必须长得像一个约定好的对象
export const noMiaomiVars = {//插件的元信息meta: {messages: {noMiaomiVars: "不允许使用miaomi变量"}},create(context) {return {//  这是一个访问者模式,访问到某一个ast的节点,就进行处理VariableDeclaration(node) {console.log('VariableDeclaration', node);},VariableDeclarator(node) {console.log('VariableDeclarator', node);},Identifier(node) {console.log('Identifier', node);if (node.name == 'miaomi') {context.report({node,messageId: 'noMiaomiVars',data: {name: node.name}})}},Literal(node) {console.log('Identifier', node);}}}
}
2.plugin插件定义

将rule进行插件化,提供给外部使用‘

import { noMiaomiVars } from '../rules/no-miaomi-vars.js'
export const eslintMiaomiPlugin = {rules: {"no-miaomi-vars": noMiaomiVars}
}
3.use将插件引入到eslint配置文件中,使用插件
import tsParser from '@typescript-eslint/parser'
import vueParser from 'vue-eslint-parser'
import { eslintMiaomiPlugin } from './eslint/plugins/eslint-plugin-miaomi.js'
export default {ignores: ["eslint.config.js"],files: ["src/**/*.js", "**/*.ts", "**/*.vue"],plugins: {miaomi: eslintMiaomiPlugin //插件定义好后,插件名称就是规则的作用域},rules: {"miaomi/no-miaomi-vars": "error",},languageOptions: {//指定解析器parser: vueParser,//解析器的语法parser设置parserOptions: {parser: tsParser}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/61485.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WPF中DataGrid滚动条自动滚动到文字编辑行的实现方法

文章目录 1.需求分析2. 实现步骤3.完整示例4.总结 在 WPF 中&#xff0c;DataGrid 是一个强大的控件&#xff0c;常常用于显示和编辑数据。有时&#xff0c;我们希望当用户在某一行开始编辑时&#xff0c;DataGrid 自动滚动到该行的位置&#xff0c;确保用户能够看到完整的内容…

算法学习笔记(一):滑动窗口和双指针

滑动窗口套路&#xff1a; 核心套路三步骤&#xff1a; 1.入&#xff1a; 下标为 i 的元素进入窗口&#xff0c;更新相关统计量(因为一个元素进入了&#xff0c;则相关统计的数据要更新&#xff0c;就是)&#xff0c;然后进行判断&#xff0c;如果i < k - 1 则continue&…

探索PDFMiner:Python中的PDF解析利器

文章目录 **探索PDFMiner&#xff1a;Python中的PDF解析利器**1. 背景介绍&#xff1a;为何选择PDFMiner&#xff1f;2. PDFMiner是什么&#xff1f;3. 如何安装PDFMiner&#xff1f;4. 简单库函数使用方法4.1 提取文本4.2 获取页面布局信息4.3 提取表格数据4.4 提取图像 5. 应…

前端开发调试之移动端调试学习笔记

一、引言 随着移动互联网的飞速发展&#xff0c;移动端页面和应用的开发变得越发重要。而在前端开发移动端项目时&#xff0c;有效的调试手段能帮助我们及时发现并解决诸多问题&#xff0c;确保项目在移动端设备上能够正常运行且提供良好的用户体验。以下就是关于前端开发中移动…

徒手从零搭建一套ELK日志平台

徒手从零搭建一套ELK日志平台 日志分析的概述日志分析的作用主要收集工具集中式日志系统主要特点采集日志分类ELK概述初级版ELK终极版ELK高级版ELKELK收集日志的两种形式 搭建ELK平台Logstash工作原理Logstash核心概念环境准备安装部署docker添加镜像加速器安装部署Elasticsear…

02 —— Webpack 修改入口和出口

概念 | webpack 中文文档 | webpack中文文档 | webpack中文网 修改入口 webpack.config.js &#xff08;放在项目根目录下&#xff09; module.exports {//entry设置入口起点的文件路径entry: ./path/to/my/entry/file.js, }; 修改出口 webpack.config.js const path r…

LSTM 和 LSTMCell

1. LSTM 和 LSTMCell 的简介 LSTM (Long Short-Term Memory): 一种特殊的 RNN&#xff08;循环神经网络&#xff09;&#xff0c;用于解决普通 RNN 中 梯度消失 或 梯度爆炸 的问题。能够捕获 长期依赖关系&#xff0c;适合处理序列数据&#xff08;如自然语言、时间序列等&…

23种设计模式-模板方法(Template Method)设计模式

文章目录 一.什么是模板方法模式&#xff1f;二.模板方法模式的特点三.模板方法模式的结构四.模板方法模式的应用场景五.模板方法模式的优缺点六.模板方法模式的C实现七.模板方法模式的JAVA实现八.代码解析九.总结 类图&#xff1a; 模板方法设计模式类图 一.什么是模板方法模…

MySQL45讲 第二十五讲 高可用性深度剖析:从主备原理到策略选择

文章目录 MySQL45讲 第二十五讲 高可用性深度剖析&#xff1a;从主备原理到策略选择一、MySQL 主备基础原理&#xff08;一&#xff09;主备关系与数据同步&#xff08;二&#xff09;主备切换流程 二、主备延迟分析&#xff08;一&#xff09;主备延迟的定义与计算&#xff08…

一篇文章了解机器学习(下)

一、决策树 1、主要应用场景为分类的问题。采用“树”的理念&#xff0c;通过计算数据的信息熵确定树的根节点、channel&#xff0c;从而加快数据分类。 注&#xff1a;与常规二分类树的区别&#xff1a;决策树中通过依据树的广度与深度&#xff0c;不断确定根节点的root值&a…

深入解析QP算法及其Python实现

目录 深入解析QP算法及其Python实现第一部分:QP算法的基本原理与数学模型1.1 QP问题定义1.2 算法核心思想1.3 应用场景第二部分:QP算法的Python实现(面向对象设计)2.1 核心代码实现第三部分:案例1 - 投资组合优化问题(策略模式)3.1 问题描述3.2 代码实现3.3 设计模式分析…

VuePress v2 快速搭建属于自己的个人博客网站

目录 为什么用VuePress&#xff1f; 一、前期准备 Node.js 使用主题快速开发 二、VuePress安装 三、个性化定制 修改配置信息 删除不需要的信息 博客上传 四、部署 使用github快速部署 初始化仓库 本地配置 配置github的ssh密钥 部署 为什么用VuePress&#xff…

前端开发调试之 PC 端调试学习笔记

一、引言 在前端开发过程中&#xff0c;调试是至关重要的一个环节。它能帮助我们快速定位代码中的问题&#xff0c;无论是页面布局错乱、交互效果异常还是性能不佳等情况&#xff0c;通过有效的调试手段都可以找到根源并进行修复。而在 PC 端进行调试有着其特定的方法和技巧&am…

PostgreSQL常用时间函数与时间计算提取示例说明

文章目录 常用函数与常量to_timestamp(字符串转时间戳、数字转时间戳)date与to_date(字符串转日期、时间戳转日期)interval(时间计算)基本操作与格式混合运算 to_char(各种时间转字符串)extract(提取时间字段&#xff0c;年月日时分秒&#xff0c;周、季度&#xff0c;第几周、…

SlickGrid点击/双击事件

分析 SlickGrid提供了点击事件方法grid.onClick和grid.onDblClick用于捕获用户对表格列的点击&#xff0c;捕获到点击事件之后&#xff0c;修改表格数据&#xff0c;然后使用grid.updateRow方法将修改后的数据更新到表格中。 展示 代码 创建grid&#xff08;HTML&#xff09;…

iOS UI 自动化 手势右滑退出当前页面

1、TouchAction from appium.webdriver.common.touch_action import TouchAction# 获取屏幕的宽度和高度 screen_width driver.get_window_size()["width"] screen_height driver.get_window_size()["height"]# 定义滑动的起点和终点坐标 start_x 0 en…

【Unity ShaderGraph实现流体效果之Node入门(二)】

Unity ShaderGraph实现流体效果之Node入门&#xff08;二&#xff09; 前言Shader Graph NodeStep NodeMultiply NodeRotate About AxisAddfresnel effectIs Front Face 前言 在&#xff08;一&#xff09;中讨论了一部分在制作流体效果时使用的Node&#xff0c;本章继续将剩余…

Redis 6.2 源码导读

Redis 是一个高性能的开源内存键值数据库&#xff0c;广泛用于缓存、会话管理和实时分析。Redis 6.2 版本引入了一些新特性和改进。 以下是 Redis 6.2 源码的一些关键部分和导读&#xff1a; 1. 源码结构 Redis 的源码主要分布在以下几个目录中&#xff1a; src/&#xff1…

集合卡尔曼滤波(Ensemble Kalman Filter),用于二维滤波(模拟平面上的目标跟踪),MATLAB代码

集合卡尔曼滤波&#xff08;Ensemble Kalman Filter&#xff09; 文章目录 引言理论基础卡尔曼滤波集合卡尔曼滤波初始化预测步骤更新步骤卡尔曼增益更新集合 MATLAB 实现运行结果3. 应用领域结论 引言 集合卡尔曼滤波&#xff08;Ensemble Kalman Filter, EnKF&#xff09;是…

解决Docker环境变量的配置的通用方法

我们部署的很多服务都是以Docker容器的形式存在的。 在运行Docker容器前&#xff0c;除了设置网络、数据卷之外&#xff0c;还需要设置各种各样的环境变量。 有时候&#xff0c;由于容器版本的问题&#xff0c;一些文档没有及时更新&#xff0c;可能同时存在多个新旧版本的环…