Related articles and reading order

1. Initialize the project

2. Improve the development experience

3. Organize projects and miscellaneous

4. Package the project

5. Team specifications

The project address

Pay attention to

Each step in this article is based on vscode, so if you’re not using vscode, you’ll need to integrate your own plug-ins and their configuration. This article simply introduces the process of checking each code. As for the configuration items, you need to go to the corresponding official website of Lint to check and configure them yourself.

preface

Typescript development tools are often used in large and medium-sized projects, where there is usually more than one person working on the project. Therefore, some uniformity and inspection of the code style within the team can reduce the amount of wild code. This, combined with automatic formatting of the code in the editor, can help keep the team’s code style consistent. In this section we need to do the following:

  1. usetslintDo code inspection
  2. usestylelintDo code inspection
  3. addnpm scriptFor testing
  4. useprettierFormatting code
  5. usepre-commit

usetslintCode inspection

Our project uses typescript heavily, so we use tsLint detection. If you don’t use typescript in your project, use ESLint.

  1. The first thing we need to do isvscodeTo install the plug-in:

    Then install it in your projectnpm install -D tslint. Also, because we have a lot of.tsxFile, so you neednpm install -D tslint-reactTo specify the target.tsxGrammatical limitations.

  2. Then create a new one under the root directorytsling.jsonFile, which is used to writetslintConfiguration file:
  3. intslint.jsonTo write configuration, please click for configuration item referencehere:

    In this configuration item, the one aboveextendsRefers to thetslint, the first extension is stable and conventional TSLING detection standard, the second is for.tsxFile to do the test.

  4. To test if this works: we willno-consoleInstead oftrueTest it out:

    Then write one in the componentconsole.logTo know that the configuration table is in effect:

usestylelintrightscssFile detection

While the previous section examined ts(x) code, this section examines the code types of SCSS files.

  1. First, install in vscodestylelintThis plug-in, this plug-in can be used forcss,less,scssAnd other types of style sheet code for formatting and style writing order checks:

    Remember you still neednpm install -D stylelint.

  2. We create it in the root directory.stylelintrc.jsFile, and then install the official recommended configurationstylelint-config-standardAs well as forscssPlug-in for code type detectionstylelint-scss: npm install -D stylelint-config-standard stylelint-scss
  3. Then, in.stylelintrc.jsWrite configuration items to the file:
  4. But at this pointscssThere is a problem with code detection, which does not recognize SCSS for example@mixin,@includeAnd so on:

    So you also need to manually write some rules to override the detection of this syntax so that it does not report an error:

addnpm scriptFor testing

This step uses the command line commands that come with tsLint and stylelint to detect code specification problems in the project and output them to the terminal for review:

  1. Go to thepackage.json, in thescriptsTo add the following command:

    This command both checks.tsxFiles are also checked.scssFile.

  2. Then enter the terminal again, you can see the following error:

    Then locate the file to modify it.

useprettierFormatting code

In addition to manually locating and modifying nonconforming code as described in the previous section, we can rely on vscode’s plug-in, which recommends prettier, to format code that conforms to our specification.

  1. First of all invscodeTo install this plugin:
  2. Then go to the user Settings table, go to the Workspace Settings to configure, the following is the template configuration, of course you can also configure the required Settings:
  3. To return to the error, it will automatically format to correct as soon as we save:

usepre-commit

In the previous section, we added the lint command to NPM script, but running this command on its own, which I think many people forget, can result in non-conforming code being uploaded to a remote repository. In this case, we can do pre-commit for code mandatory inspection, that is, a code inspection before git commit, do not commit if it does not meet the specification. NPM install -d husky: NPM install -d husky: NPM script