Taro项目中使用f2elint

Posted 2023-04-18 ZerlinM

一、f2elint全局安装

yarn安装

yarn add global f2elint

或者
npm安装

npm i f2elint -g

查看是否安装成功

npx f2elint -h

二、f2elint初始化

在项目根目录下初始化

npx f2elint init

1.会提示选择项目的语言和框架类型，此处我选择 react + ts

2.选择是否需要样式的检查，此处我选择 Y

3.是否检查markdown 此处我选择 n

4.是否用Prettier插件格式化代码 此处我选择 Y

5.检查冲突，确认是否继续，此处我选择 Y

6.安装依赖

7.初始化完成

三、使用

package.json中会多出2条脚本（第三条为自行添加，可对要提交的代码进行分析）

"f2elint-scan": "npx f2elint scan",
"f2elint-fix": "npx f2elint fix",
"f2elint-commit-file-scan": "npx f2elint commit-file-scan"

这时就可以使用以下命令 查看代码分析

yarn f2elint-scan

注意：
vscode用户需要安装三个插件

• ESLint
  

• Stylelint
  

• Prettier - Code formatter
  

此时即可开心的使用eslint了~~~
如果使用命令时有报错之类的，可以先尝试删除node_modules重新安装，未解决的话可自行百度具体报错~~

四、设置eslint规则

比如不希望出现 已声明但未使用的报错提示，则可设置.eslintrc.js如下
\'@typescript-eslint/no-unused-vars\': \'off\'
比如希望空格2个，则可设置.eslintrc.js如下
\'@typescript-eslint/indent\': [\'error\', 2, SwitchCase: 1 ],

rules: 
    \'@typescript-eslint/no-unused-vars\': \'off\',
    \'@typescript-eslint/indent\': [\'error\', 2,  SwitchCase: 1 ],
,

f2lint中使用了commitlint校验提交代码时的备注信息，格式为 [subject]:
但是我们不想使用这种信息格式，可配置文件 .commitlint.config.js

module.exports = 
  extends: [\'ali\'],
  rules: 
    \'subject-empty\': [0],
    \'type-empty\': [0],
  ,
;

表示type可为空，subject可为空

五、部分ts校验提示 找不到模块 xxx 或其响应的类型声明

taro创建项目时，会自动创建一个文件夹types，其中有个文件为 global.d.ts

但是我们需要在根目录中的 tsconfig.json中添加该文件，如下

配置好之后保存，即可发现报错提示消失了。

六、在taro启动项目前校验

由于项目是多人开发，期望统一项目风格，所以在项目中添加了如下校验。
对修改后待提交的文件进行校验
新建bin文件夹，文件夹中新建文件 scan-by-file.js

const f2elint = require(\'f2elint\');
const cwd = process.cwd();
const fs = require(\'fs\');
const failureReturn = function () 
  process.exit(1);
;

try 
  const result = fs.readFileSync(cwd + \'/bin/files\',  encoding: \'utf-8\' );
  fs.rmSync(cwd + \'/bin/files\');
  const fileList = result.trim().split(\'\\n\');

  f2elint
    .scan(
      cwd,
      files: fileList,
      // 只显示错误信息
      quiet: true,
    )
    .then(
      (res) => 
        if (res.errorCount) 
          console.error(new Error(\'有\' + res.errorCount + \'条代码风格错误，请修改后重新提交！\'));
          failureReturn();
        
      ,
      (err) => 
        console.log(\'f2elint scan error\', err);
        failureReturn();
      ,
    );
 catch (err) 
  console.log(\'try..catch error\', err);
  failureReturn();

package.json中添加

"check-all-uncommited-files": "git diff --pretty=format: --name-only > ./bin/files && node ./bin/scan-by-file.js",
"dev:weapp": "yarn check-all-uncommited-files && npm run build:weapp -- --watch",

此时执行启动命令时，则会先校验文件成功后 在会启动程序

yarn dev:weapp

Taro项目遇到的问题

1.

https://taro-ui.aotu.io/#/docs/questions

请在Taro项目根目录找到 config/index.js 文件中的h5项，添加如下：

h5: {
  ...

 esnextModules: [‘taro-ui‘]
}

 

 

2.

原则：少什么就装什么

少了 babel-plugin-transform-decorators-legacy ，那就npm install babel-plugin-transform-decorators-legacy --save 

run dev少了包，那就--save-dev，run build少了包，那就--save