After my first approach to AWS Amplify, I want to deal with the implementation of source code linters and end-to-end tests with Cypress, obviously automated in the AWS Amplify CI/CD pipeline. Let’s face up this new challenge!

Photo by Yancy Min on Unsplash

References: this is the link to the GitHub repository and this is the link to the web application related to this post.

Linter

The linter is a tool that analyzes the source code to flag programming errors, bugs, stylistic errors and suspicious constructs — wikipedia

Linter tools allows to increase the quality of the source code. Using these tools in a CI/CD pipeline also allows to deploy an application when its source code meets certain quality levels.

The web application I created with AWS Amplify includes a React frontend and few Python lambdas in backend. For this reason I need two different tools, specific to the two technologies used.

ESLint

One of the best linters I’ve had the chance to test for JavaScript is ESLint: its functions are not limited to test but it includes automatic fix of a large number of problems.

ESLint installation is simple: from the main directory of our project, we can install the linter with the following command:

npm install eslint --save-dev

Once the installation is complete, we can run the first configuration wizard:

npx eslint --init

You will be asked for various information: in general you can choose whether to use ESLint for:

• syntax checking
• syntax checking and problem finding
• syntax checking, problem finding and code style checking

This last option is interesting and includes most popular styles, such as Airbnb and Google source code styles. Once the configuration is complete, the required packages are installed. In my case:

"devDependencies": {
    "eslint": "^7.8.1",
    "eslint-config-google": "^0.14.0",
    "eslint-plugin-react": "^7.20.6"
  }

Now that we’ve set up ESLint, let’s check the code:

npx eslint src/*.js

Depending on the options chosen during configuration, the result may not be the most optimistic, revealing a long series of problems.

But as I said initially, ESLint allows us to automatically correct some of these, using the following command:

npx eslint src/*.js --fix

Great! Of the 87 problems initially detected, only 6 require our intervention to be corrected.

#cypress #react #eslint #pylint #aws-amplify