An overview of the

In this article, I’ll look at some of the tools you can use to improve code quality. On the one hand, TS, ESLint, and Prettier, used for code development, all use ides to prompt the source code being edited and use ast for type, quality, and format, respectively.

On the other hand, HusKY, Lint-staged, and @Commitlint in the Git commit phase are responsible for creating Git hooks, performing lint operations on passively written code, and checking commit messages to prevent improper code from entering version management.

All the preceding tools require corresponding configuration files.

typescript

Ts is one of the most intrusive tools, so much so that it is often referred to as a language. It mainly adds type annotations to JS (along with features that differ from JS, such as enum) to implement static type analysis of JS and catch potential errors before the code runs.

Ts code to the final run, need to go through a js compilation process, this process can be implemented by TSC, but the actual use of Babel handling, TSC is only responsible for the type.

Vscode supports ts, prompting and reporting errors when typescript lib is downloaded.

Writing rules

Ts is a superset of JS. The transition from JS to TS is mainly about learning the application of types, which can be roughly divided into such several parts

Type annotation

This is the type of annotation that corresponds to the various identifiers that appear in the code.

Types can be divided into basic types and expression types.

  • The former is the primary type in JS such as string or number and the part defined in TS such as any.
  • The latter are combinations of primitive types, such as arrays or functions.

Either type is intended to clarify the specific use of the identifier, which is indicated when it is used, and will result in an error if it is used outside the specified scope, and thus can be of great help in code refactoring.

Type inference

If there are no type annotations for the identifiers used, it is up to the TS to infer the possible types.

This can be divided into three cases

  • The most common types, such as a literal type defined in let,let a = 'a', is usually inferred to string. If you want to be inferred to a literal, you can declare it as const.
  • Context types, such as function types, are inferred as parameter types
  • If none of the above can be inferred, infer any, which should be avoided because you lose the meaning of the type.

Types of assertions

Sometimes type inference is not what we want, and we can use assertions to fix it, as in the example above

let a= 'a' as const
Copy the code

Type Guards

This means that if an identifier may have multiple types, such as union, the type guard can narrow the range of types. That is, when entering a control flow related to type judgment, the type possibility in this control flow will be narrowed, and this type will be excluded in the next condition, such as

function padLeft(padding: number | string, input: String) {if (typeof padding === "number") {return new Array(padding + 1).join(" ") + input; } // return padding + input; }Copy the code

Type is compatible

When identifier A is of a different type than identifier B, but the former is assigned to the latter, the latter’s type must be compatible with the former. For example, functions with fewer arguments will be compatible with functions with additional arguments

The configuration file

More customizations require configuration files, usually tsconfig.json, which can be used to indicate which files are processed by TS and how.

Here are a few commonly used ones. See the documentation for details

files,include,exclude

  • Files Specifies the TS file to be processed
  • Include specifies files in batches using the matching characters
  • Exclude Excludes the files that do not meet the requirements in the specified file

compilerOptions

This is used to indicate how ts works, such as the following classes

  • Type checking is related, such as noImplicitAny, which reports an error when the type is inferred to be any, prompting an explicit declaration of the type
  • Module related, such as what module system the project uses, module resolution method, can be used to configure the corresponding directory alias
  • Output related to, declaration file and js file output
  • Language and environment, by specifying the locale to determine specific compilation behavior, such as how JSX will determine how TSX files will be compiled

Eslint and prettier

Eslint originally had the ability to handle both syntax errors and code styles, but the second function was inferior to prettier, so it usually prettier for formatting and Linters for catching bugs! .

The ide’s integration downloads the corresponding plug-in and sets it to be fixed automatically when saved.

When used together, eslint-config-prettier is added to an ESLint configuration file to remove conflicting parts of the two because they overlap and don’t necessarily be executed separately. Using eslint-plugin-prettier can automatically prettier when esLint is executed.

Husky, Lint-passage, @commitlint

The only thing you need to do here is to prevent the offending code from entering the remote code base and check the commit message. Using git hook, you can modify the contents of the corresponding file without using a third-party tool, which will automatically execute the corresponding action of git operation.

  • Husky installs hooks automatically, eliminating the need to manually set them up. The other two packages are used to simplify hook calls. Note that the new version uses different hooks
  • Lint-staged, used to perform lint operations on files that have been added by Git, either by checking only the code to be committed or by stopping it if it fails
  • Commitlint is used to check the commit message and block the commit if it does not meet the specification

The last

This article gives a general introduction to several tools, mainly refer to the documentation, also can see my other summary, where TS can refer to this article, other see this article, pay attention to the impact of version.

The repository is configured with the latest version of the tool for reference.