vite+ts esslint的问题

Question

我是用vite+ts 搭建了项目 使用husky以及eslint git-hooks进行校验

现在提交的时候eslint报如下错

问题1

D:\project\radar_crm\src\shims-vue.d.ts
  10:15  error  'NProgress' is defined but never used  no-unused-vars
  13:19  error  'force' is defined but never used      no-unused-vars
  17:18  error  'rate' is defined but never used       no-unused-vars
  19:18  error  'rate' is defined but never used       no-unused-vars

我的shims-vue.d.ts 是这样的

declare module '*.vue' {
    import { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
}
/**
 * 声明cdn中引入的 NProgress
 */
declare class NProgress {
    static start: () => void
    static done: (force?: boolean) => void
    static remove: () => void
    static set: (rate: number) => void
    static inc: (rate: number) => void
}

这个校验就很迷

问题2

正常能跑 ,但是提交eslint就报错

 2:26  error  Unable to resolve path to module './modules/base'  import/no-unresolved
  2:26  error  Missing file extension for "./modules/base"        import/extensions

我的base.ts

import { RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/login',
        name: 'Home',
        component: () => import("@/views/common/login.vue")
    },
    {
        path: '/',
        name: 'Dashboard',
        component: () => import("@/views/index.vue")
    },
    {
        path: "/:pathMatch(.*)*",
        name: '404',
        component: () => import("@/views/common/404.vue")
    }
]

export default routes;

第一个为啥报不能识别模块呢?

第二个 说让我补全后缀, 我补ts
报错

我补js直接就跑不起来了

这可咋整

Answer 1

对于问题1

在.eslintrc添加

  globals: { // 解决cdn引入的提示未定义
        NProgress: 'readonly'
    },

对于问题2的解决办法
因为配置了eslint和prettierrc, 所以校验以 prettierrc为主.但是报错统一在eslint
这个后缀的问题需要在.eslintrc配置

settings: {

    "import/resolver": { // 这个是解决引入时没后缀查不到的问题
        node :{
            extensions: [".js", ".jsx", ".ts", ".tsx", ".json"]
        }

---

   }
},
rules: {
    "no-unused-vars": 'off',
    "import/no-unresolved": 0,
    "import/extensions": [ // 这个是解决不写后缀报错的问题
        "error",
        "ignorePackages",
        {
          "js": "never",
          "jsx": "never",
          "ts": "never",
          "tsx": "never",
          "json": "never"
        }
     ]
}

Answer 2

最简单粗暴的办法就是关闭esLint。或者在.eslintrc.js中关闭一些检查。参考如下:

"no-unused-vars": 'off'

按照错误提示，某某变量定义，但并未使用，关闭的配置项应该是这个，这是eslint的检查。

已参与了SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。