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文件

1. export default {
2.     rules: {
3.         "no-unused-vars": "error",
4.         "no-console": "error",
5.         "no-sparse-arrays": "error",
6.         "no-undef": "error",
7.         "no-unreachable": "error",
8.         "no-dupe-keys": "error"
9.     }
10. }

复制代码

在package.json文件中添加type属性，添加下令 

1. {
2.     "name": "eslint-test",
3.     "version": "1.0.0",
4.     "main": "index.js",
5.     "type": "module",
6.     "scripts": {
7.         "lint": "eslint ."
8.     },
9.     "keywords": [],
10.     "author": "",
11.     "license": "ISC",
12.     "description": "",
13.     "dependencies": {
14.         "eslint": "9.14.0"
15.     }
16. }

复制代码

 创建js文件src/index.js

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

复制代码

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

---

ESLint可以创建独立的设置文件.eslintrc.js，也可以直接在package.json中设置
a.执行node_modules/.bin文件夹里的eslint脚原来创建设置文件
包含完备脚本路径的下令：'./node_modules/.bin/eslint --init'
也可以用npx来执行npxeslint --init
创建设置文件过程中，须要选择设置

 自动生成eslint.config.mjs文件

1. eslint.config.mjs
2. import globals from "globals";
3. import pluginJs from "@eslint/js";
5. /** @type {import('eslint').Linter.Config[]} */
6. export default [
7.   {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
8.   {languageOptions: { globals: globals.browser }},
9.   pluginJs.configs.recommended,
10. ];

复制代码

创建js文件，输入npx eslint 文件名执行语法查抄

5.规范集简化设置npm i@eslint/js

1. // export default {
2. //     rules: {
3. //         "no-unused-vars": "error",
4. //         "no-console": "error",
5. //         "no-sparse-arrays": "error",
6. //         "no-undef": "error",
7. //         "no-unreachable": "error",
8. //         "no-dupe-keys": "error"
9. //     }
10. // }
11. //规则集
12. import js from '@eslint/js'
13. 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

1. {
2.     "name": "pro",
3.     "version": "1.0.0",
4.     "main": "index.js",
5.     "type": "module",
6.     "scripts": {
7.         "lint": "eslint ."
8.     },
9.     "keywords": [],
10.     "author": "",
11.     "license": "ISC",
12.     "description": "",
13.     "devDependencies": {
14.         "@eslint/js": "9.14.0",
15.         "eslint": "9.14.0",
16.         "@typescript-eslint/parser": "8.14.0"
17.     }
18. }

复制代码

 4.新建设置文件eslint.config.js文件

1. import tsPsrser from '@typescript-eslint/parser'
3. export default {
4.     //文件配置，哪些文件需要被校验,忽略eslint.config.js文件
5.     ignores: ["eslint.config.js"],
6.     files: ["**/*.ts"],
7.     //规范配置
8.     rules: {
9.         "no-unused-vars": "error",
10.         "no-console": "error"
11.     },
12.     //语言配置
13.     languageOptions: {
14.         //指定解析器
15.         parser: tsPsrser
16.     }
17. }

复制代码

 5.创建ts文件，src/index.ts

1. const age=18
2. console.log(name)
4. /*ts类型定义
5. *ts相关的校验，eslint自带的校验espress解析器无法识别
6. *我们需要ts解析器来解析ts代码，完成类型校验
7. */
8. interface Uesr{
9.   name:string;
10.   age:number;
11. }

复制代码

  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

1. {
2.     "name": "eslint-test",
3.     "version": "1.0.0",
4.     "main": "index.js",
5.     "type": "module",
6.     "scripts": {
7.         "lint": "eslint ."
8.     },
9.     "keywords": [],
10.     "author": "",
11.     "license": "ISC",
12.     "description": "",
13.     "dependencies": {
14.         "@eslint/js": "9.14.0",
15.         "@typescript-eslint/parser": "8.14.0",
16.         "eslint": "9.14.0",
17.         "vue-eslint-parser": "9.4.3"
18.     }
19. }

复制代码

 4.新建设置文件eslint.config.js文件

1. import tsParser from '@typescript-eslint/parser'
2. import vueParser from 'vue-eslint-parser'
3. export default {
4.     ignores: ["eslint.config.js"],
5.     files: ["**/*.ts", "**/*.vue"],
6.     rules: {
7.         "no-unused-vars": "error",
8.         "no-console": "error",
9.         "no-sparse-arrays": "error",
10.         "no-undef": "error",
11.         "no-unreachable": "error",
12.         "no-dupe-keys": "error"
13.     },
14.     languageOptions: {
15.         //指定解析器
16.         parser: vueParser,
17.         //解析器的语法parser设置
18.         parserOptions: {
19.             parser: tsParser
20.         }
21.     }
22. }

复制代码

 5.创建vue文件，src/index.vue

1. <template>    </template><script setup lang="ts">//不允许变量声明但没有使用no-unused-vars
2. const name = 'zs'
4. //不允许打印no-console
5. console.log('name');
7. //不允许数组中有空元素no-sparse-arrays
8. const arr = [1, , 3]
10. //不允许有未声明的变量no-undef
11. console.log(afffffff);
13. //不允许函数return后还有代码no-unreachable
14. function showFn(toName, fromName) {
15.     let a = 0;
16.     return a;
17.     a = 1
18. }
20. //不允许对象有重复的key,no-dupe-keys
21. const obj = {
22.     name: 'zs',
23.     name: 'zs1'
24. }//范例界说interface User{  name:string;  age:number;}</script>

复制代码

五、自界说插件

 1.rule界说

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

1. //规则的本质是一个对象，
2. //eslint插件，必须长得像一个约定好的对象
3. export const noMiaomiVars = {
4.     //插件的元信息
5.     meta: {
6.         messages: {
7.             noMiaomiVars: "不允许使用miaomi变量"
8.         }
9.     },
10.     create(context) {
11.         return {
12.             //  这是一个访问者模式，访问到某一个ast的节点，就进行处理
13.             VariableDeclaration(node) {
14.                 console.log('VariableDeclaration', node);
15.             },
16.             VariableDeclarator(node) {
17.                 console.log('VariableDeclarator', node);
18.             },
19.             Identifier(node) {
20.                 console.log('Identifier', node);
21.                 if (node.name == 'miaomi') {
22.                     context.report({
23.                         node,
24.                         messageId: 'noMiaomiVars',
25.                         data: {
26.                             name: node.name
27.                         }
28.                     })
29.                 }
30.             },
31.             Literal(node) {
32.                 console.log('Identifier', node);
33.             }
34.         }
35.     }
36. }

复制代码

2.plugin插件界说

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

1. import { noMiaomiVars } from '../rules/no-miaomi-vars.js'
2. export const eslintMiaomiPlugin = {
3.     rules: {
4.         "no-miaomi-vars": noMiaomiVars
5.     }
6. }

复制代码

3.use将插件引入到eslint设置文件中，使用插件

1. import tsParser from '@typescript-eslint/parser'
2. import vueParser from 'vue-eslint-parser'
3. import { eslintMiaomiPlugin } from './eslint/plugins/eslint-plugin-miaomi.js'
4. export default {
5.     ignores: ["eslint.config.js"],
6.     files: ["src/**/*.js", "**/*.ts", "**/*.vue"],
7.     plugins: {
8.         miaomi: eslintMiaomiPlugin //插件定义好后，插件名称就是规则的作用域
9.     },
10.     rules: {
11.         "miaomi/no-miaomi-vars": "error",
12.     },
13.     languageOptions: {
14.         //指定解析器
15.         parser: vueParser,
16.         //解析器的语法parser设置
17.         parserOptions: {
18.             parser: tsParser
19.         }
20.     }
21. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。