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
https://i-blog.csdnimg.cn/direct/76973d2540644b7fbca96ed49330b002.pnghttps://i-blog.csdnimg.cn/direct/23fe4b1de5dc40a0a1386e4497185944.pnghttps://i-blog.csdnimg.cn/direct/b8fa4952249140809863e0b636f64a11.png
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 =
//不允许有未声明的变量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规范代码
https://i-blog.csdnimg.cn/direct/75b12e15b7684f1692b22927b2510202.png
ESLint可以创建独立的设置文件.eslintrc.js，也可以直接在package.json中设置
a.执行node_modules/.bin文件夹里的eslint脚原来创建设置文件
包含完备脚本路径的下令：'./node_modules/.bin/eslint --init'
也可以用npx来执行npxeslint --init
创建设置文件过程中，须要选择设置
https://i-blog.csdnimg.cn/direct/1015b2700b3d4c35b4a56ecf0864d095.png
自动生成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 文件名执行语法查抄
https://i-blog.csdnimg.cn/direct/7c352c16714b48179cfcb14de4d07be5.png
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 三、手动安装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 =
//不允许有未声明的变量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> https://i-blog.csdnimg.cn/direct/7bd04cc353124765956398712e39f0c4.png
五、自界说插件
https://i-blog.csdnimg.cn/direct/b64e6e5801314349a59d0b71bb56f693.png
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
}
}
} https://i-blog.csdnimg.cn/direct/90e4ff884c2f48b49462444e7065e190.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]