「折腾」ESLint 安装与使用

吐槽/反馈/建议:我的咸鱼心  爱发电-@wdssmq

写在前边

因为嫌麻烦,并没有实际用到过 ESLint;

最近改了一个别人写的东西,别的不说,单行注释双斜线后不加空格实在是逼死强迫症。

资源网址

ESLint - Visual Studio Marketplace:

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter:

https://eslint.org/

虽然不太清楚,使用 VSCode 插件版仍然需要在项目下或全局安装eslint的样子?

安装 ESLint

# 安装 pnpm 并设置淘宝镜像
npm install -g pnpm
pnpm config set registry https://registry.npm.taobao.org

全局安装:

# 全局安装
pnpm install eslint -g
# 查看全局安装的版本号
pnpm ls eslint -g

当前项目内:

# 当前项目内
pnpm install eslint --save-dev
# 查看版本号
pnpm ls eslint

初始化

pnpm create @eslint/config
# eslint --init
# 所在目录如果没有 package.json 可能会报错,`npm init` 创建;

# 注:后续选项以实际为准

# 选项一 - 如何使用 ESLint
? How would you like to use ESLint? …
  To check syntax only
▸ To check syntax and find problems

# 选项二 - 模块引入方式
? What type of modules does your project use? …
▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

# 选项三 - 项目使用的框架
? Which framework does your project use? …
  React
▸ Vue.js
  None of these

# 选项四 - 是否使用 TypeScript
? Does your project use TypeScript? ‣ No / Yes

# 选项五 - 项目使用的环境,可以都选或都不选
? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

# 选项六 - 根据选择可能需要安装额外的项目,比如 vue 的插件
The config that you ve selected requires the following dependencies:

eslint-plugin-vue@latest

# 选项七 - 是否直接安装上边列出的项目
? Would you like to install them now? ‣ No / Yes

# 选项八 - 如果上一步选择了安装,会询问使用的包管理器
? Which package manager do you want to use? …
  npm
  yarn
▸ pnpm

使用(CLI)

# 检查指定文件
eslint vite.config.js

# 可以使用 --fix 修复能够自动修复的问题

# 按路径匹配文件,某一对引号内的规则没能匹配到文件时会报错
eslint "src/**/*.vue" "src/**/*.{js,mjs,ts}" --fix

新版命令行废弃了很多参数,甚至官方文档也还没完全更新……

Command Line Interface Reference - ESLint - Pluggable JavaScript Linter:

https://eslint.org/docs/latest/use/command-line-interface#site_top

VSCode 插件版

注:插件版本好像依赖于全局安装的eslint包?

在「命令面板(Ctrl + Shift + P)」中输入eslint即可查看所拥有的命令:

  • ESLint: Create ESLint configuration 创建配置文件;
  • ESLint: Fix all auto-fixable Problems 修复能够自动修复的问题;
  • ESLint: Migrate Settings 迁移设置,啥用暂不清楚;
  • ESLint: Show Output Channel 查看日志输出,从信息看确实依赖于node_modules\eslint\lib\api.js
  • ESLint: Restart ESLint Server 重启插件服务;

因为 VSCode 默认终端是 Git Bash,所以自动触发创建命令时出现了下边错误:

node_modules\.bin\eslint.cmd --init
# bash: node_modules.bineslint.cmd: command not found

所以保险起见还是自己执行pnpm create @eslint/config吧;

插件有不少配置项,可以在「设置」中搜索eslint查看:

{
  "eslint.validate": [
    "typescript",
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "eslint.packageManager": "pnpm"
}

检查规则

使用 @eslint/config 初始化,然后再修改具体细节,下边为一份参考:

// 此处为新版的 eslint.config.mjs
import globals from "globals";
import pluginJs from "@eslint/js";

export default [
  {
    languageOptions:
    {
      globals: {
        ...globals.browser,
        "$": "readonly",
        "module": "readonly",
        "jQuery": "readonly",
      },
    },
  },
  pluginJs.configs.recommended,
  {
    // 规则定义,按实际需要修改
    'rules': {
        // 缩进
        'indent': [
            'error',
            4,
            {
                'SwitchCase': 1,
            },
        ],
        // 换行符
        'linebreak-style': [
            'error',
            'unix',
        ],
        // 引号
        'quotes': [
            'error',
            'single',
        ],
        // 分号
        'semi': [
            'error',
            'never',
        ],
        // 单行注释的空格
        'spaced-comment': [
            'error',
            'always',
            {
                'line': {
                    // 继下述字符后再加空格
                    'markers': ['!', '#', '/'],
                },
            }
        ],

        /* ---------------- */

        // 对象或数组的拖尾逗号
        // always-multiline 表示只有在多行时才需要拖尾逗号
        'comma-dangle': [
            1,
            'always-multiline',
        ],

        // 箭头函数参数括号
        // as-needed 表示只有在需要时才添加括号
        'arrow-parens': [
            1,
            'as-needed',
            {
                // requireForBlockBody 表示在块体中需要括号
                'requireForBlockBody': true
            },
        ],

        // 变量声明后未使用
        // args: "none" 表示不检查函数参数是否被使用
        'no-unused-vars': [
            1,
            {
                'args': 'none'
            },
        ],

        // 函数圆括号之前的空格
        // 分别对匿名函数、异步箭头函数、命名函数设置
        'space-before-function-paren': [
            1,
            {
                'anonymous': 'never',
                'asyncArrow': 'always',
                'named': 'never'
            },
        ],

        // 禁止不规则的空白
        'no-irregular-whitespace': [
            2,
            {
                'skipStrings': true,
                'skipRegExps': true
            },
        ],

        // // 允许 require 语法赋值
        // '@typescript-eslint/no-var-requires': 0,

        // // generator 函数中 * 号前后的空格
        // 'generator-star-spacing': 0,

        // // 正式环境禁止 debugger
        // 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    },
  },
];

List of available rules - ESLint 中文:

http://eslint.cn/docs/rules/

错误排查

1、

Environment key "es2021" is unknown

项目中已经安装 ESLint 但是版本太低,请删除「package-lock.json」文件后重新执行cnpm install eslint --save-devcnpm install eslint@latest --save-dev;

仍然有问题请删除 node_modules 后再试;

可在「本站(www.wdssmq.com)」搜索关键词:快速删除 node_modules快速删除

2、

Parsing error: Invalid ecmaVersion.

默认生成的配置文件中有一项是"ecmaVersion": 12,,改成 11 或 10,虽然并不清楚有啥用;

3、

Do not access Object.prototype method 'hasOwnProperty' from target object.eslintno-prototype-builtins

出于安全并不建议直接用:foo.hasOwnProperty("bar"),而应该写成 Object.prototype.hasOwnProperty.call(foo, "bar")

正则替换:

([a-z0-9]+)\.hasOwnProperty\(([^\)]+)\)

Object.prototype.hasOwnProperty.call($1, $2)

然后 VSCode 中 forin 的代码片段如下,看了已经修改过了:

for (const key in object) {
  if (Object.hasOwnProperty.call(object, key)) {
    const element = object[key];

  }
}

4、

The "marketId" property should be a constructor.eslintvue/require-prop-type-constructor

vue 中定义props对像时,多个类型声明应写为数组;

export default {
    props: {
        myProp1: Number | String, // 错误
        myProp2: [Number, String] // 正确
    }
}

5、

'__dirname' is not defined.eslintno-undef

错误提示出现在「vite.config.js」中;

解决:

.eslintrc.json 或其他格式的配置文件中,确保对应声明中存在"node": true,这一项;

{
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  }
}

6、

The template root requires exactly one element.eslintvue/no-multiple-template-root

报错代码如下,将<template> ** </template>改为<template><div> ** </div></template>可以消除这个错误,但是不太科学;

<template>
  <Header class="header" />
  <router-view class="content" />
  <Footer class="footer" />
</template>

正确方法,修改「.eslintrc.json」文件

"extends": ["eslint:recommended", "plugin:vue/essential"],"extends": ["eslint:recommended", "plugin:vue/vue3-essential"],


爱发电

本文标题:《「折腾」ESLint 安装与使用》作者:沉冰浮水
原文链接:https://www.wdssmq.com/post/20190917021.html
特别注明外均为原创,转载请注明。

分享到微信

扫描二维码

可在微信查看或分享至朋友圈。

相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

网站分类

搜索

本周旧文

wdssmq/blog-astro: 一个基于 Astro 的静态博客;

本质上,面临一个代码问题时,我们需要的是另一个人愿意为「你」的问题投入精力,并且有相应的技术知识。。

接上一条,Resilio Sync 换 Syncthing 感觉也是略大的工程。。Orz

去年 GoodSync 送了一年授权,然后也确实用上了;本来想着到期就换 Syncthing,结果前几天临期提醒,花 ¥381 续了三年 Orz,两者定位和使用姿势还是有些差别的。。更早是用 Resilio Sync 和 BCompare,但是前者内存占用太高,后者并不是自动同步的定位。。

2024 年了,姑且备份下嘟特存档。。

……,一个不知名的小众样式库 + 内联样式混写这种入坑姿势确实很有槽点,但是,「已经开始学」并且能够持续是绝对值得肯定的。。

在贴吧看过很多提问了,就有种错觉:好多人为了提一个问题专门注册了贴吧,问题本身可能得到有效回答,也可能没有(和提问的点及具体姿势有关。。但无论如何,之后就和注销了账号一样没有然后了,好像之后永远不用学相应的东西一样。。

《恶魔娃娃》

- 他们正研究你究竟是真正的大人,还是伪装成大人的小孩

- 我自己都研究很久了

乐高 DC 里,(基本就蝙蝠侠家,,年龄最小的那个无论是谁感觉人设都会变得一样 - -

所以,就感觉和祥林嫂一样,每天都需要向外「签到」自己的情绪感受,然而又并没有什么「需要」我这样的签到……

爱发电支持者

最新留言

友情链接

  • 订阅本站的 RSS 2.0 新闻聚合
召唤伊斯特瓦尔