ESlint学习

介绍

https://eslint.nodejs.cn/

eslint是一个代码质量检测的包。

javascript standard style https://standardjs.com/readme-zhcn.html

ESLint 规则表 https://zh-hans.eslint.org/docs/latest/rules/

创建Vue时引入了

如果使用像

1
pnpm create vue

的命令选择引入eslint后，项目中dev依赖就有eslint相关的包了。

现在项目(带pakcage.json文件)

安装eslint包

1
npm install --save-dev eslint @eslint/js

添加配置文件(eslint.config.js)

1
2
touch eslint.config.js
# 或者 图形界面创建，与 pakcage.json 同一级

修改eslint.config.js

1
2
3
4
5
6
7
8
9
10
11
12
import js from "@eslint/js";

export default [
    js.configs.recommended,

   {
       rules: {
           "no-unused-vars": "warn",
           "no-undef": "warn"
       }
   }
];

使用 ESLint CLI 进行代码检查

1
2
# 可以写路径通配符  *.js
npx eslint src/main.js

在main.js中添加 const a = {};

再执行，发现提示

1
2
3
  15:7  warning  'a' is assigned a value but never used  no-unused-vars

✖ 1 problem (0 errors, 1 warning)
1
2
3
npx是Node.js中的一个命令行工具，它主要用于执行npm包中提供的可执行文件。
1.无需全局安装
2.自动下载并运行

vscode中eslint插件

Vscode安装eslint插件。

vscode在设置中搜索框中输入 eslint, eslint: enable ； 应该安装上就配置好了，不需要配置。

安装插件后，打开项目，项目依赖有eslint, 并且有eslint.config.js 或者 .eslintrc.cjs，这时候应该就会自动检测项目里的代码了。

网上说在vscode的首选项-》配置文件-》 新增eslint的配置文件，这是一种全局配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"eslint.autoFixOnSave": true,
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    {
    "language": "html",
    "autoFix": true
    },
    {
    "language": "vue",
    "autoFix": true
    }
]

autoFix 设置为 true 时，在vscode按下保存键时 ctrl+s 会自动为我们格式化代码。

我感觉还是应该使用项目里的配置这样跟随着源码。

pnpm创建vue项目中eslint的默认配置解析

.eslintrc.cjs文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* eslint-env node */
/*  用于改进ESLint的模块解析能力 */
require('@rushstack/eslint-patch/modern-module-resolution')
/* 定义了ESLint的配置对象，该对象将被导出并用于配置ESLint的行为。*/
module.exports = {
  /*告诉ESLint当前目录是配置文件的根目录*/
  root: true,
  'extends': [
    /*Vue官方提供的ESLint插件，针对Vue 3项目的核心规则集。*/
    'plugin:vue/vue3-essential',
    /*ESLint推荐的规则集，包含了一系列捕获常见问题和错误的规则。*/
    'eslint:recommended',
    /*这个配置用于关闭所有与Prettier格式化冲突的ESLint规则，以便你可以同时使用ESLint和Prettier，而不用担心它们之间的冲突*/
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  /*允许你指定解析器选项。*/
  parserOptions: {
    /*ESLint将使用最新的ECMAScript语法特性*/
    ecmaVersion: 'latest'
  }
}

vscode 配置

vscode打开一个项目后，会在项目目录下创建一个.vscode的目录，会有一个settings.json文件。

1
2
3
4
5
6
7
{
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
1
2
3
4
5
6
"source.fixAll": "true"
// ESlint插件 + Vscode配置 实现自动格式化修复
// explicit 是需要明确的修复命才修复
// true 时保存即修复
// 保存即格式化
"editor.formatOnSave": true,

一些额外的.eslintrc.cjs配置

1
2
3
4
5
6
7
8
9
module.exports = {
  // 省略了上面的配置
  // 添加
  rules: {
    // 未定义变量使用，快速报错, 默认是这样的，无需配置
    // 可以改成warn测试一下
    'no-undef': 'error'
  }
}

Rules还可以添加,但是还是看需求，别错误使用还被忽略了。

1
2
3
4
5
6
7
8
9
10
11
rules: {
    // vue组件名称多单词组成（忽略index.vue）
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] 
      }
    ],
    // 关闭 props 解构的校验
    'vue/no-setup-props-destructure': ['off'], 
  }

添加pettier格式化规则

1
2
3
4
5
6
7
8
9
10
11
12
rules: {
	'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ]
}

vscode 关闭保存后格式化：

1
"editor.formatOnSave": false,
前端
#前端 #eslint
ESlint学习
http://hanqichuan.com/2024/09/14/前端/ESlint学习/
作者
韩启川
发布于
2024年9月14日
许可协议