umi-fabric 帮助写代码的工具

https://images.unsplash.com/photo-1554034483-04fda0d3507b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

一开始我对 lint 类工具不太感冒,觉得只要运行没问题就 OK 了,但是当入门之后想精进一步,lint 会帮你查漏补缺(群里的一个大佬提醒我的),帮你写出符合规范的代码。结合框架umi,查到了 umi-fabric ,一个包含 prettier,eslint,stylelint 的配置文件合集(我个人 stylelint 用的比较少,因为基本都是 tailwindcss )。

安装配置

假如是 antd pro 应用,那么它自带 fabric 。一般的 umi 工程需要按照如下步骤手动安装。

npm i @umijs/fabric --save-dev
yarn add @umijs/fabric -D

然后你新建配置文件 .eslintrc.js

module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint')],

  // in antd-design-pro
  globals: {
    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
    page: true,
  },

  rules: {
    // your rules
  },
};

新建 .stylelintrc.js

const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.stylelint,
};

降低版本的问题

这里需要注意的是假如出现问题,大概率是 eslint 版本的问题。你只要在 package.json 里指定 eslint 版本为 “eslint”: “^7.0.0″。 降到 v7 版本就可以。在这个问题里提到了。

VSCode

VSCode 下你需要安装 ESLint 插件。否则也是不会提示。