What

What is the quality of the code itself?

The quality of the code itself: complexity, repetition rate, code style, etc.

  • Complexity: amount of project code, module size, coupling degree, etc
  • Repetition rate: The percentage of code blocks that repeat, usually under 5% (with the help of platform tools such as Sonar)
  • Code style: Uniform code style (dynamic language code such as JS, Python style is not restricted)

A vicious cycle of code quality degradation

Common reasons for code quality degradation:

  • Breaking: There’s less guilt in iterating over broken code
  • Contagiousness: Don’t care about code quality, focus only on business output
  • The spirit is willing, but the flesh is weak

Common scenarios that lead to a vicious cycle:

  • Business pressure is too high

A common cause of bad code is business pressure that doesn’t have the time or inclination to focus on code quality. It’s a classic vicious cycle because when you yield to business pressure and produce bad code, development productivity drops, which leads to more business pressure.

  • Solve business stress by adding manpower

In response to business pressures, it is common to add people to a project, but simply adding people will lead to more bad code due to inconsistent styles, increased communication costs, and so on.

So how do we solve it?

This is a long-term process.

There are four stages of code quality control

  • The canonical

Establish Code specification and Code Review system

  1. airbnb
  2. standard
  3. node-style-guide
  4. google javascript style guide
  5. google html/css style guide
  6. Vue Style Guide

I think a uniform project directory structure is one of the more formalized ones (for example, we use scaffolding to create project templates). A formalized directory structure greatly reduces the cost of getting started.

  • automation

Use tools (Linters) to automatically check code quality.

  • A routing

Bind code quality checks to the code flow process.

Binding quality checks to code flow:

Note: 1. When editing: View quality check in real time through editor plug-in 2. You can use CI(Jekins/Travis) to move the build release process online, run code scans, test code, etc., and then build without errors. The build is successfully pushed to the server via SSH.Copy the code
  • centralized

Centralized management of code specifications and transparency of quality status from a team perspective.

As teams grow in size and projects grow in number, code quality control faces the following problems:

  1. Different projects use different code specifications

  2. Some projects have no access to quality checks due to relaxed requirements, or have a large number of unfixed defects

  3. The quality comparison of each project cannot be reflected from the overall level of the team

In order to cope with the above problems, it is necessary to build a centralized code quality control system. Key points include:

Unified management of code specifications. Manage code scanning configuration rule sets vertically through scaffolding commands, automatically install, not write rules locally. One team, one type of project, one set of rules.

  • [TBD] Use unified continuous integration services (Jekins/Travis, etc.). Projects that fail quality inspection cannot be put online.

  • [to be determined] Code quality scoring system (with the help of Sonar). Make horizontal comparisons between projects, vertical comparisons within projects, and aggregate feedback.

Why

Code quality is a direct reflection of the team’s technical level and management level.

You spend more time looking at code than you do writing it

Current front-end project problems

  • Different writing styles and poor reading experience
  • Poor maintainability and poor reusability (Code Review improves each other)
  • Prone to low quality code, code rework rate is high
  • Git commit is not standard

How

What can be done to ensure code quality?

EditorConfig

EditorConfig supports maintaining consistent coding styles (file formats) across editors and ides when developing projects with multiple collaborators.

The VSCode plugin EditorConfig for VSCode provides one-click generation.

View an example.

TypeScript

  • [Official website](www.typescriptlang.org/

).

  • “Chinese awesome typescript
  • TypeScript architecture research report
  • 2018 JS Trends Report

Git Hooks

Git can trigger custom scripts when certain important actions occur. There are two sets of hooks: client-side and server-side. Client-side hooks are invoked by operations such as commit and merge, while server-side hooks are used for networking operations such as receiving pushed submissions, and we currently use mostly client-side hooks.

Integrate git hooks with Husky. Read the Git documentation if you want a more thorough understanding of Git.

Husky installs a series of Git hooks into the project’s. Git /hook directory.

The following two images compare git directories without husky and those with husky installed:

When you initialize a new repository with git init, git default places sample scripts (files ending in.sample) in this directory.

pre-commit

The pre-commit hook runs before the commit information is typed. This hook is used to check for a snapshot to be submitted, and you can use this hook to check if the code style is consistent (running programs like Lint).

  • Lint-staged: You can capture all submitted files and execute configured task commands. Various Lint validation tools can configure Lint-staged tasks.
  • Prettier: Can be configured into Lint-staged coding styles for automatic formatting.
  • stylelint
  • eslint
  • tslint
  • Eslint-plugin-vue: the officially recommended Lint tool for vue.js

Why prettier is chosen and why esLint is different from Prettier .

About Prettier configuration. About stylelint configuration. About ESLint configuration.

commit-msg

  • Commitlint.

Commit-msg can be used to verify project status or commit information before a commit is accepted, using this hook to verify that the commit follows the specified template.

About git hooks configuration in package.json:

test

unittest

  • [Jest](jestjs.io/

)

  • [Mocha](mochajs.org/

)

e2e

  • [Nightwatch](nightwatchjs.org/

)

  • [Cypress](www.cypress.io/

)

CHANGELOG

Update log, standard-version.

Code Review

  • [Pending] Review system. Currently, our company has to approve code merge after multiple people Review it.

How to quickly land to the current business

Front-end scaffolding (XX – CLI)

Using the idea of centrally managing code scan configuration files, send the Code Lint configuration file as an NPM package to the internal network, then extend the scaffolding command to execute one-click to send the remote configuration file to the local project, and type in the new package.json dependencies, and you can install new dependencies later.

The so-called centralized management: all project code configuration files are subject to remote configuration files. If you have local configuration with the same name, it will be deleted, so that we can update the configuration files in the future, such as (adding VW/VH adaptation), and all business synchronization problems.

For now there are only lint script commands based on the vue.js project. For future projects, consider extending dC-cli lint -- vue DC-CLI lint -- nodeCopy the code

The demo presentation

Demo how to build code quality checks into old projects? Because this part is in the Intranet demo will not be sent out.

Refer to my previous demoeasy-cli for scaffolding. This is the full demo.

Future

Jenkins automation

Sonar

Github:

SonarQube is a leading continuous code quality monitoring platform, open source on Github, can be easily configured on the Intranet server, real-time monitoring code to help understand and improve team project code quality. Through the plug-in mechanism, SonarQube can inherit different testing tools, code analysis tools, and continuous integration tools.

Unlike continuous integration tools (Hudson/Jenkins, etc.), SonarQube does not simply display the results of different code inspection tools (such as FindBugs, PMD, etc.) directly ona Web page, but reprocesses these results through different plug-ins. By measuring the change of code quality in a quantitative way, it is convenient to manage code quality for projects of different sizes and types.

Industry mentioned “code quality management, automated quality management “, generally refers to through Sonar to achieve.

What can be achieved with Sonar?

  • Technical debt (Sonar scans code with “rules” that doesn’t conform to rules)
  • Coverage (unit test coverage)
  • Repetition (repeated code, good for reminder encapsulation)
  • structure
  • …

sonarjs

Sonar supports multiple programming languages, including JavaScript. Such as sonarjs

Finally hit an advertisement, welcome to pay attention to my public number XYz_ programming diary.