为了解决路径问题,我写了一个eslint plugin

前言

公司的老项目部分import是用的相对路径,之前写需求的时候也改过一部分,但是文件太多了,一个一个改显然不是长久之计,昨天突发奇想能不能用eslint --fix来做下自动修复呢?于是,花了大概一个多小时写了一个plugin来满足需求。

效果

昨天下午我写完之后,晚上回家在github上,找到了一个库github.com/steelsojka/...

这个库也能实现相同的效果,而且做的挺完善,不足之处在于不支持动态引入,比如这种

js 复制代码
import('../../test.js')

作者也不维护了,于是我就自己补了一下处理动态引入的逻辑。

效果图如下:

思路

获取处理文件的路径

要想实现相对路径的修改,首先要拿到处理文件的绝对路径,这个我们可以 context.getFilename() 或者 context.filename() 获取

它的值类似于 /Users/chouchouji/alias-manager/src/aliases.ts

处理相对路径

然后就是获取 from 后面或者 import 里面的相对路径,eslint 是通过 ast 来实现代码内容解析的,我们要处理两种形式的 import

转化相对路径为绝对路径

这个就比较简单了,可以借助 node:path 来处理。

先通过 path.dirname 获取当前文件的上一级目录,通过 path.resolve 获取引入文件的绝对路径,然后根据需求出路路径,如果想把 src 替换为 @,就切割获取绝对路径 src 后面的内容,用 replace 方法做替换就行

实践

可以通过 --rulesdir 这个参数来实现本地调试,

rules 是我新创建的目录,下面有我写的 eslint rule 的代码,

然后在你的 eslint 配置文件中加下该 rule

package.json 中加一个命令

js 复制代码
"test:lint": "eslint --rulesdir ./rules \"src/**/*.{js,vue}\" --fix"

最后控制台执行 pnpm test:lint 就可以了

源码

js 复制代码
## use-alias.js

const path = require('path');

module.exports = {
  meta: {
    name: 'eslint-plugin-alias',
    type: 'problem',
    docs: {
      description: 'Use Alias',
    },
    messages: {
      error: 'Use Alias',
    },
    fixable: 'code',
  },
  create: function (context) {
    const filename = context.getFilename();
    return {
      ImportDeclaration(node) {
        if (node.source.value.startsWith('.')) {
          context.report({
            node,
            messageId: 'error',
            fix: function (fixer) {
              const absolutePath = path.resolve(
                path.dirname(filename),
                node.source.value,
              );
              const relativePath = 'src' + absolutePath.split('/src')[1];
              return fixer.replaceText(
                node.source,
                `'${relativePath.replace('src', '@')}'`,
              );
            },
          });
        }
      },
      ImportExpression(node) {
        if (node.source.value.startsWith('.')) {
          context.report({
            node,
            messageId: 'error',
            fix: function (fixer) {
              const absolutePath = path.resolve(
                path.dirname(filename),
                node.source.value,
              );
              const relativePath = 'src' + absolutePath.split('/src')[1];
              return fixer.replaceText(
                node.source,
                `'${relativePath.replace('src', '@')}'`,
              );
            },
          });
        }
      },
    };
  },
};

结尾

如有疑问,欢迎留言

相关推荐
乐多_L31 分钟前
使用vue3框架vue-next-admin导出表格excel(带图片)
前端·javascript·vue.js
南望无一1 小时前
React Native 0.70.x如何从本地安卓源码(ReactAndroid)构建
前端·react native
Mike_188702783511 小时前
1688代采下单API接口使用指南:实现商品采集与自动化下单
前端·python·自动化
鲨鱼辣椒️面1 小时前
HTML视口动画
前端·html
一小路一1 小时前
Go Web 开发基础:从入门到实战
服务器·前端·后端·面试·golang
堇舟1 小时前
HTML第一节
前端·html
纯粹要努力1 小时前
前端跨域问题及解决方案
前端·javascript·面试
小刘不知道叫啥1 小时前
React源码揭秘 | 启动入口
前端·react.js·前端框架
kidding7231 小时前
uniapp引入uview组件库(可以引用多个组件)
前端·前端框架·uni-app·uview
合法的咸鱼1 小时前
uniapp 使用unplugin-auto-import 后, vue文件报红问题
前端·vue.js·uni-app