Automatically creating patches when linting using CI

Fixing code especially when linting can be interesting; honestly. If you are like me and work on a lot of different languages and tools then you likely do not track changes in coding standards particularly well. However, with effective tooling and schedules, you can recieve code that is constantly updated with patches you can simply apply to your code and move forwards.

I already run a bunch of PHP, JavaScript and CSS linting tools and also use YAML linters inside Ansible projects. However, managing these updates can be challenging.

The CI Linting Fix Process

This is the process I follow.

1. Make sure you know the coding standards you are using
2. Sort out CI to check linting for you
3. Make linting tools do a fix of the code
4. Diff the changes that fixing made against the original code
5. Submit those diffs as a patch and store as an artifact.
6. Download the artifact and apply to the project

CI Example

This is an example of fixing the linting of some CSS within this very project you are looking at (you can probably see tweaks.css if you want). This is using GitLab CI which is excellent, but applies similarly to other modern CI tools (CircleCI, Drone, JenkinsX, Travis).

stylelint-lint:
  image: willhallonline/stylelint:10-alpine
  allow_failure: yes
  script:
    - stylelint ./*.css

stylelint-fix:
  image: willhallonline/stylelint:10-alpine
  allow_failure: yes
  script:
    - apk add --no-cache git # This image does not have git, so need to install.
    - set +e
    - stylelint --fix ./*.css
    - git status
    - git -c user.name='Will Hall' -c user.email='incoming+willhallonline/[email protected]' commit -am "Coding Standards Formatting"
    - git diff origin/$CI_COMMIT_REF_NAME > $CI_COMMIT_SHA.patch
  artifacts:
    paths:
    - $CI_COMMIT_SHA.patch
    expire_in: 1 week

What we can see in the CI script is that we check linting before. We also set the allow_failure: yes as this means that it will in fact move to the next task in the CI script.

Fixed code

The --fix command will fix the code and then we will create a patch that can be subsequently applied to your code if required using git diff against the original branch. What we have created is a *.patch looking like this:

diff --git a/static/css/tweaks.css b/static/css/tweaks.css
index 150f19b..7641a4f 100644
--- a/static/css/tweaks.css
+++ b/static/css/tweaks.css
@@ -19,7 +19,7 @@ nav.pagination span {
   background-color: #efefef;
   padding: 10px;
   text-align: center;
-  margin: 0px 10px;
+  margin: 0 10px;
 }

Apply to your project

And you can then download and apply this to your project.

$  git apply 5ff4d29271301d306796621626dc30aee9b2d295.patch

I will probably be writing some extensions to this over the coming weeks for managing updating of all kinds of different projects, as this is a useful way to both bridge the gap of having to maintain coding standards, but also reducing the need for continual work on codebases.