ESLint的簡(jiǎn)單使用方法(js,ts,vue)
更新時(shí)間：2025年01月06日 11:12:34 作者：想退休的搬磚人
ESLint是一個(gè)用于統(tǒng)一團(tuán)隊(duì)編碼規(guī)范、減少代碼錯(cuò)誤的工具,它可以手動(dòng)安裝并配置,支持JavaScript、TypeScript和Vue.js等語(yǔ)言,文章詳細(xì)介紹了如何手動(dòng)下載和配置ESLint,需要的朋友可以參考下
一、ESLint介紹
1.為什么要用ESLint
統(tǒng)一團(tuán)隊(duì)編碼規(guī)范（命名，格式等）
統(tǒng)一語(yǔ)法
減少git不必要的提交
減少低級(jí)錯(cuò)誤
在編譯時(shí)檢查語(yǔ)法，而不是等js引擎運(yùn)行時(shí)才檢查
2.eslint用法
可以手動(dòng)下載配置
可以通過(guò)vue腳手架創(chuàng)建項(xiàng)目時(shí)自動(dòng)下載
3.ESLint包
安裝方式：
通過(guò)npm直接進(jìn)行全局安裝npm i eslint -D
通過(guò)vue腳手架創(chuàng)建項(xiàng)目時(shí)選擇安裝eslint模塊包vue create 創(chuàng)建項(xiàng)目時(shí)選擇eslint安裝的包
vscode中ESLint擴(kuò)展工具
二、手動(dòng)下載配置(js)
1.創(chuàng)建一個(gè)測(cè)試文件夾：eslint-test
2.初始化項(xiàng)目：npm init -y(創(chuàng)建package.json)
3.直接在項(xiàng)目中安裝eslint包npm i eslint -D
node_modules中下載了很多包，.bin/eslint.cmd腳本文件，內(nèi)部通過(guò)nodejs執(zhí)行eslint運(yùn)行包的代碼；@eslint包用來(lái)規(guī)范eslint配置文件；eslint開(kāi)頭的包是eslint運(yùn)行包，包含eslint代碼。
4.生成ESLint配置文件
創(chuàng)建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"
}
}創(chuàng)建js文件src/index.js
//不允許變量聲明但沒(méi)有使用no-unused-vars
const name = 'zs'
//不允許打印no-console
console.log('name');
//不允許數(shù)組中有空元素no-sparse-arrays
const arr = [1, , 3]
//不允許有未聲明的變量no-undef
console.log(afffffff);
//不允許函數(shù)return后還有代碼no-unreachable
function showFn(toName, fromName) {
let a = 0;
return a;
a = 1
}
//不允許對(duì)象有重復(fù)的key,no-dupe-keys
const obj = {
name: 'zs',
name: 'zs1'
}終端執(zhí)行命令npm run lint規(guī)范代碼
ESLint可以創(chuàng)建獨(dú)立的配置文件.eslintrc.js，也可以直接在package.json中配置
a.執(zhí)行node_modules/.bin文件夾里的eslint腳本來(lái)創(chuàng)建配置文件
包含完整腳本路徑的命令：'./node_modules/.bin/eslint --init'
也可以用npx來(lái)執(zhí)行npxeslint --init
創(chuàng)建配置文件過(guò)程中，需要選擇配置
自動(dòng)生成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,
];創(chuàng)建js文件，輸入npx eslint 文件名執(zhí)行語(yǔ)法檢查
5.規(guī)范集簡(jiǎn)化配置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"
// }
// }
//規(guī)則集
import js from '@eslint/js'
export default [js.configs.recommended]三、手動(dòng)安裝eslint(ts)
1.創(chuàng)建一個(gè)測(cè)試文件夾：eslint-ts-test
2.初始化項(xiàng)目：npm init -y(創(chuàng)建package.json)
3.直接在項(xiàng)目中安裝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 {
//文件配置，哪些文件需要被校驗(yàn),忽略eslint.config.js文件
ignores: ["eslint.config.js"],
files: ["**/*.ts"],
//規(guī)范配置
rules: {
"no-unused-vars": "error",
"no-console": "error"
},
//語(yǔ)言配置
languageOptions: {
//指定解析器
parser: tsPsrser
}
}5.創(chuàng)建ts文件，src/index.ts
const age=18
console.log(name)
/*ts類型定義
*ts相關(guān)的校驗(yàn)，eslint自帶的校驗(yàn)espress解析器無(wú)法識(shí)別
*我們需要ts解析器來(lái)解析ts代碼，完成類型校驗(yàn)
*/
interface Uesr{
name:string;
age:number;
}Parsing error: The keyword 'interface' is reserved
ts相關(guān)的校驗(yàn)，eslint自帶的校驗(yàn)espress解析器無(wú)法識(shí)別
我們需要ts解析器來(lái)解析ts代碼，完成類型校驗(yàn) npm i @typescript-eslint/parser
四、手動(dòng)安裝eslint(vue)
1.創(chuàng)建一個(gè)測(cè)試文件夾：eslint-ts-test
2.初始化項(xiàng)目：npm init -y(創(chuàng)建package.json)
3.直接在項(xiàng)目中安裝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,
//解析器的語(yǔ)法parser設(shè)置
parserOptions: {
parser: tsParser
}
}
}5.創(chuàng)建vue文件，src/index.vue
<template>
</template>
<script setup lang="ts">
//不允許變量聲明但沒(méi)有使用no-unused-vars
const name = 'zs'
//不允許打印no-console
console.log('name');
//不允許數(shù)組中有空元素no-sparse-arrays
const arr = [1, , 3]
//不允許有未聲明的變量no-undef
console.log(afffffff);
//不允許函數(shù)return后還有代碼no-unreachable
function showFn(toName, fromName) {
let a = 0;
return a;
a = 1
}
//不允許對(duì)象有重復(fù)的key,no-dupe-keys
const obj = {
name: 'zs',
name: 'zs1'
}
//類型定義
interface User{
name:string;
age:number;
}
</script>
五、自定義插件
1.rule定義
針對(duì)這個(gè)規(guī)范的需求，編寫一個(gè)rule，原理是通過(guò)ast節(jié)點(diǎn)處理來(lái)完成
//規(guī)則的本質(zhì)是一個(gè)對(duì)象，
//eslint插件，必須長(zhǎng)得像一個(gè)約定好的對(duì)象
export const noMiaomiVars = {
//插件的元信息
meta: {
messages: {
noMiaomiVars: "不允許使用miaomi變量"
}
},
create(context) {
return {
// 這是一個(gè)訪問(wèn)者模式，訪問(wèn)到某一個(gè)ast的節(jié)點(diǎn)，就進(jìn)行處理
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進(jìn)行插件化，提供給外部使用‘
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 //插件定義好后，插件名稱就是規(guī)則的作用域
},
rules: {
"miaomi/no-miaomi-vars": "error",
},
languageOptions: {
//指定解析器
parser: vueParser,
//解析器的語(yǔ)法parser設(shè)置
parserOptions: {
parser: tsParser
}
}
}總結(jié)
到此這篇關(guān)于ESLint的簡(jiǎn)單使用的文章就介紹到這了,更多相關(guān)ESLint簡(jiǎn)單使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
復(fù)制Input內(nèi)容的js代碼_支持所有瀏覽器，修正了Firefox3.5以上的問(wèn)題
今天作一個(gè)功能，有一個(gè)input，里邊有內(nèi)容，點(diǎn)一下按鈕就復(fù)制里邊的內(nèi)容到剪貼板2010-06-06
這篇文章主要介紹了微信小程序 slot踩坑的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript中文件緩存導(dǎo)致404錯(cuò)誤的解決方案
當(dāng) JavaScript 文件在服務(wù)器上被更新或刪除后,瀏覽器仍然請(qǐng)求舊的緩存文件,導(dǎo)致 404 錯(cuò)誤,本文將深入探討這一問(wèn)題的原因,并提供多種解決方案,需要的可以參考下2025-03-03
JavaScript中通過(guò)閉包解決只能取得包含函數(shù)中任何變量最后一個(gè)值的問(wèn)題
JavaScript中解決閉包只能取得包含函數(shù)中任何變量最后一個(gè)值的問(wèn)題2010-08-08
深入理解JavaScript系列（16） 閉包（Closures）
本章我們將介紹在JavaScript里大家經(jīng)常來(lái)討論的話題 —— 閉包（closure）。閉包其實(shí)大家都已經(jīng)談爛了。盡管如此，這里還是要試著從理論角度來(lái)討論下閉包，看看ECMAScript中的閉包內(nèi)部究竟是如何工作的2012-04-04
JS實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)特效代碼
這篇文章主要為大家詳細(xì)介紹了一款轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)的JS特效代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
JavaScript中數(shù)組隨機(jī)排序的實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript中數(shù)組隨機(jī)排序的實(shí)現(xiàn)，主要是利用原地算法和sort/shuffle算法，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-11-11
這篇文章主要為大家詳細(xì)介紹了JS制作網(wǎng)站吸頂條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
你可能從未使用過(guò)的11+個(gè)JavaScript特性(小結(jié))
這篇文章主要介紹了你可能從未使用過(guò)的11+個(gè)JavaScript特性(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
javascript設(shè)置文本框光標(biāo)的方法實(shí)例小結(jié)
這篇文章主要介紹了javascript設(shè)置文本框光標(biāo)的方法,結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)文本框光標(biāo)的位置、設(shè)置及文本操作的相關(guān)技巧,需要的朋友可以參考下2016-11-11