Wide hard time

Please add wechat: 389399428

Bytedance Happiness Team [school recruitment/social recruitment/internship] is in the process of synchronization, [front-end/back-end/client/testing/data warehouse/algorithm/product/operation] has a large number of HC, waiting for you to do things together.

Xinlinli is bytedance’s real estate information, service and transaction platform that integrates content, community and tools. Based on the personalized recommendation engine, the product recommends high-quality real estate content and comprehensive and real housing information to users, and is committed to providing users with comprehensive, professional and reliable purchase decision support. Founded in August 2018, Happy Lane is the fastest growing real estate information and service platform in China, integrating content, community and tools. Its business covers 23 cities in the first and second tier, with tens of millions of registered users and entering a period of rapid growth.

background

Several practical scenarios have been encountered in recent development:

  • The team has detailed development specifications and has publicized them, but the CodeReview code submitted by team members is still filled with a large number of non-conforming codes, which may need to be modified repeatedly and delay each other’s time.
  • There are some old codes that do not conform to the specifications in the project, and the new students may directly compare the old code to develop.
  • There is no guarantee that the team will settle on best practices, such as code layering or writing that should be avoided, but there will always be someone who will write code that does not meet the best practices, and business logic or request code will be mixed into the UI layer.
  • The team pulls out more and more common materials, but the new person may not know that components from third-party libraries are still used when needed, leading to problems that may have already occurred a thousand times.

The problem

  • Although the project introducedESLintandPrettier, but the code quality is still not guaranteed, such as some data structure restructuring scenarios, skilled useES6orLodashAll developers can write clean and readable code, but beginners may use nested code in many scenariosforThis is not a syntactical error, but it makes the code bloated and coupled, harder to maintain, and adds to the overall clutter of the project.
  • There are a lot of development specifications and best practices that developers can slip up on or add late to and fail to implement.
  • Code review was plagued by low-level issues that violated development specifications, and while many questions were asked, the time input/output ratio was too low for both the author and the reviewer.

solution

  • usingESLintThe ability to customize plug-ins deposits the team’s accepted best practices and coding specifications into rules so that problems can be discovered and corrected directly during development, reducing the interference of low-level Code Review problems or repetitive problems, focusing on core Code, and improving the consistency of the team’s Code output.
  • Provide referenceESLint-PluginandRuleTemplate code (preferably integrated into your own scaffolding to avoid the mental burden of knowing yeoman scaffolding and templates)
  • When there is a problem in the process of Code Review, the submitter can write custom rules, update plug-ins and solve similar problems in the Code storehouse, so as to evenly repay the technical debt, which is also conducive to cultivating the awareness of infrastructure and technology precipitation.

hands-on

Effect demonstration (in the example, you want to force the developer to import some components from the common components that the team precipitates) :

For a step-by-step tutorial, see the article “How to Customize the ESLint Plugin Rule and how ESLint works”. This article will only cover some of the key points. API for details, see ESLint common API for custom rules

The basic concept

ESLint extends development with the concepts of Rule,Plugin, and Config. Roughly speaking,Config can be inherited and reused in different projects. Config can contain multiple plugins, and Plugin can contain multiple rules.

Why not use a custom Rule

The use of a single Rule is very strange. You need to pass parameters in the command line to specify a directory path for a custom Rule. Personally, I feel that it is very inconvenient to reuse, but Plugin can be directly extended in the configuration file.

Unit testing

The template generated using Yo scaffolding comes with the unit test template, but some configuration parameters need to be passed when initializing the RunTester class, otherwise ES6+ syntax (such as import) may not be recognized. Unit tests need to provide at least one set of sample code, both correct and incorrect, and then execute NPM install to install dependencies and run tests automatically through the NPM Run test. (The Mocha-based automated test suite has been integrated)

var ruleTester = new RuleTester({
  parserOptions: { ecmaVersion: 2015.sourceType: 'module'}});Copy the code

Custom Configuration

The template generated using Yo scaffolding only exports the rules custom rule, in fact the plugin also supports exporting a configuration directly:

module.exports.configs = {
  fConfig: {
    plugins: ['@avengers/ayaya'].rules: {
      '@avengers/ayaya/import-from-shared': [2]}}};// Add plugin configuration to eslintrc when used

{
   extends: ['plugin:@avengers/ayaya/fConfig'],}Copy the code

How NPM private packages are referenced

The developed plug-in may be hosted under a private domain name of NPM (such as @avengers). To download the plug-in, use the following command:

NPM install ‘ ‘@avengers/eslint-plugin-ayaya, but you do not need to write generic prefixes to declare inheritance or reference plug-ins, just use the syntax of the example in the previous section, Definition for rule ‘@avengers/eslint-plugin-ayaya/class-name-cap’ was not found

  • Rules support user-defined parameters

The configuration is passed in by the user:

 rules:{
        "@avengers/ayaya/import-from-shared": [2, {
            SomeProps:'dashnowords'}}]Copy the code

In the create method of the rule code, context.options[0] corresponds to the object passed in by the user, and multiple parameters are supported (but not usually necessary). In addition, you need to configure schema parameters to constrain the type of parameters, using the standard JSON-Schema format, as shown below: