欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ESLint的簡單使用方法(js,ts,vue)

 更新時間：2025年01月06日 11:12:34   作者：想退休的搬磚人  
ESLint是一個用于統一團隊編碼規(guī)范、減少代碼錯誤的工具,它可以手動安裝并配置,支持JavaScript、TypeScript和Vue.js等語言,文章詳細介紹了如何手動下載和配置ESLint,需要的朋友可以參考下

一、ESLint介紹

1.為什么要用ESLint

統一團隊編碼規(guī)范（命名，格式等）

統一語法

減少git不必要的提交

減少低級錯誤

在編譯時檢查語法，而不是等js引擎運行時才檢查

2.eslint用法

可以手動下載配置

可以通過vue腳手架創(chuàng)建項目時自動下載

3.ESLint包

安裝方式：

通過npm直接進行全局安裝npm i eslint -D

通過vue腳手架創(chuàng)建項目時選擇安裝eslint模塊包vue create 創(chuàng)建項目時選擇eslint安裝的包

vscode中ESLint擴展工具

二、手動下載配置(js)

1.創(chuàng)建一個測試文件夾：eslint-test

2.初始化項目：npm init -y(創(chuàng)建package.json)

3.直接在項目中安裝eslint包npm i eslint -D

node_modules中下載了很多包，.bin/eslint.cmd腳本文件，內部通過nodejs執(zhí)行eslint運行包的代碼；@eslint包用來規(guī)范eslint配置文件；eslint開頭的包是eslint運行包，包含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

//不允許變量聲明但沒有使用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'
}

 終端執(zhí)行命令npm run lint規(guī)范代碼

ESLint可以創(chuàng)建獨立的配置文件.eslintrc.js，也可以直接在package.json中配置

a.執(zhí)行node_modules/.bin文件夾里的eslint腳本來創(chuàng)建配置文件

包含完整腳本路徑的命令：'./node_modules/.bin/eslint --init'

也可以用npx來執(zhí)行npxeslint --init

創(chuà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í)行語法檢查

5.規(guī)范集簡化配置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]

三、手動安裝eslint(ts)

1.創(chuàng)建一個測試文件夾：eslint-ts-test

2.初始化項目：npm init -y(創(chuàng)建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"],
    //規(guī)范配置
    rules: {
        "no-unused-vars": "error",
        "no-console": "error"
    },
    //語言配置
    languageOptions: {
        //指定解析器
        parser: tsPsrser
    }
}

 5.創(chuàng)建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.創(chuàng)建一個測試文件夾：eslint-ts-test

2.初始化項目：npm init -y(創(chuàng)建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.創(chuàng)建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定義

針對這個規(guī)范的需求，編寫一個rule，原理是通過ast節(jié)點處理來完成

//規(guī)則的本質是一個對象，
//eslint插件，必須長得像一個約定好的對象
export const noMiaomiVars = {
    //插件的元信息
    meta: {
        messages: {
            noMiaomiVars: "不允許使用miaomi變量"
        }
    },
    create(context) {
        return {
            //  這是一個訪問者模式，訪問到某一個ast的節(jié)點，就進行處理
            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 //插件定義好后，插件名稱就是規(guī)則的作用域
    },
    rules: {
        "miaomi/no-miaomi-vars": "error",
    },
    languageOptions: {
        //指定解析器
        parser: vueParser,
        //解析器的語法parser設置
        parserOptions: {
            parser: tsParser
        }
    }
}

總結 

到此這篇關于ESLint的簡單使用的文章就介紹到這了,更多相關ESLint簡單使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論