【Journey of HarmonyOS Next】DevEco Studio User Guide (12)

1 -> Code Linter code check

Code Linter checks ArkTS/TS code for best practices/programming specifications.

You can manually fix code defects based on the alarm prompts in the scan results, or perform one-click automatic repair to ensure code quality during the code development stage.

Inspection Method:

Right-click Code Linter in the open Code Editor window, or select one or more project files or directories in the Project Management window, right-click and select Code Linter > Full Linter to perform full code checks.

If you only need to check the incremental files (including adding, modifying, and renaming) in the Git project, click the gear icon in the lower right corner of the commit page and select Incremental Linter to perform the incremental check.

illustrate

If no code check rule file is configured, the .ets file will be checked according to the default programming rules.
Code Linter does not check the following files and directories:
src/ohosTest folder
/src/test folder
node_modules folder
oh_modules folder
build folder
.preview folder
hvigorfile.ts file
hvigorfile.js file
BuildProfile.ets file

2 -> Configure code checking rules

Create a code-linter.json5 configuration file in the root directory of the project to configure the scope of code check and the corresponding effective check rules, in which the files and ignore configuration items jointly determine the code check scope, and the ruleSet and rules configuration items jointly determine the effective rule range. The specific configuration items have the following functions:

files: Configure the list of files to be checked, if no directory is specified, all .ets files in the currently selected files or folders will be checked.

ignore: Configure a file directory that does not need to be checked, and the specified directory or file must use a relative path format, which is relative to the root directory of the project where code-linter.json5 is located, for example: build/*/.

ruleSet: The rule set used for the check, which allows you to import multiple rules at a time. Currently supported rule sets include:

General rule @typescript-eslint
Safety rules @security
Performance rules @performance
Preview the rule @previewer
Develop a multi-terminal deployment rule @cross-device-app-dev at a time
ArkTS code style rules@hw-stylistic
Correctness rules @correctness
illustrate

The above rule sets are divided into two types: all and recommended. The all rule set is a complete set of rules, which contains all rules; A recommended rule set is a set of recommended rules to use. The all rule set contains the recommended rule set.
If you do not create a new code-linter.json5 file in the root directory of the project, Code Linter will check the rules contained in the @performance/recommended and @typescript-eslint/recommended rule sets by default.
rules: You can add additional rule items based on the ruleSet configuration or modify the default configuration of the rule in the ruleSet, for example, change the alarm level of a rule in the ruleset from warn to error.

Overrides: You can configure custom check rules for specific directories or files in the root directory of a project.

{
  "files":   //用于表示配置适用的文件范围的 glob 模式数组。在没有指定的情况下，应用默认配置
  [
    "**/*.js", //字符串类型
    "**/*.ts"
  ],
  "ignore":  //一个表示配置对象不应适用的文件的 glob 模式数组。如果没有指定，配置对象将适用于所有由 files 匹配的文件
  [
    "build/**/*",    //字符串类型
    "node_modules/**/*"
  ],
  "ruleSet":       //设置检查待应用的规则集
  [
    "plugin:@typescript-eslint/recommended"    //快捷批量引入的规则集, 枚举类型：plugin:@typescript-eslint/all, plugin:@typescript-eslint/recommended, plugin:@cross-device-app-dev/all, plugin:@cross-device-app-dev/recommended等
  ],
  "rules":         //可以对ruleSet配置的规则集中特定的某些规则进行修改、去使能, 或者新增规则集以外的规则；ruleSet和rules共同确定了代码检查所应用的规则
  {
    "@typescript-eslint/no-explicit-any":  // ruleId后面跟数组时, 第一个元素为告警级别, 后面的对象元素为规则特定开关配置
    [
      "error",              //告警级别: 枚举类型, 支持配置为suggestion, error, warn, off
      {
        "ignoreRestArgs": true   //规则特定的开关配置, 为可选项, 不同规则其下层的配置项不同
      }
    ],
    "@typescript-eslint/explicit-function-return-type": 2,   // ruleId后面跟单独一个数字时, 表示仅设置告警级别, 枚举值为: 3(suggestion), 2(error), 1(warn), 0(off)
    "@typescript-eslint/no-unsafe-return": "warn"            // ruleId后面跟单独一个字符串时, 表示仅设置告警级别, 枚举值为: suggestion, error, warn, off
  },
  "overrides":      //针对特定的目录或文件采用定制化的规则配置
  [
    {
      "files":   //指定需要定制化配置规则的文件或目录
      [
        "entry/**/*.ts"   //字符串类型
      ],
      "excluded":
      [
        "entry/**/*.test.js" //指定需要排除的目录或文件, 被排除的目录或文件不会按照定制化的规则配置被检查; 字符串类型
      ],
      "rules":   //支持对overrides外公共配置的规则进行修改、去使能, 或者新增公共配置以外的规则; 该配置将覆盖公共配置
      {
        "@typescript-eslint/explicit-function-return-type":  // ruleId: 枚举类型
        [
          "warn",     //告警级别: 枚举类型, 支持配置为error, warn, off; 覆盖公共配置, explicit-function-return-type告警级别为warn
          {
             allowExpressions: true    //规则特定的开关配置, 为可选项, 不同规则其下层的配置项不同
          }
        ],
        "@typescript-eslint/no-unsafe-return": "off"   // 覆盖公共配置, 不检查no-unsafe-return规则
      }
    }
  ]
}

3 -> View/process code check results

Once the scan is complete, view the results in the bottom palette. Select Defects to view the alarm levels of the corresponding alarm levels. Double-click an alarm result to jump to the location of the corresponding code defect. If you select an alarm result, you can view the detailed description of the alarm rule in the Defect Description window on the right, including forward and reverse examples, and modify the code based on the suggestions. When searching for a rule, you can set whether the whole word matches and whether it is case-sensitive.

Click the lightning icon to view the code rules that can be repaired, and click the wrench code repair icon to fix alarms in batches and refresh the check results.

Masking Alarm Information:

In some special scenarios, if a false alarm appears in the scan result, click the Ignore icon next to a single alarm result to ignore the code linter check on the line where the alarm is located. Or select the file name or multiple alarms to be blocked, and click the Ingore icon on the left tool panel to perform operations in batches.
Add a comment at the top of the file /* eslint-disable / to block the entire file to perform code linter checks, and add one or more comma-separated rule IDs to the end of eslint-disable to block specific check rules.
Add / eslint-disable / and / eslint-enable / before and after the code block to be ignored before and after the code block, and then run the code linter, the code block scan result will no longer be displayed. Add / eslint-disable-next-line */ to the line of code to be masked to block the codelinter check on the line of code.
If you want to restore the error message that you ignored, delete the comment above the line and run the code linter check again.

Export check results: Click the Export button on the left side of the tool panel to export the check results to an Excel file, including the line where the alarm is located, the alarm details, and the alarm level.