Improving MAUI & Xamarin Code Quality with Pre Git Commit Linting

Using husky & lint-staged to clean C# code commits & make it prettier

This tutorial, based on John’s article, shows how easy it is to use tools common to other frameworks, to enforce coding standards across all developers on a MAUI/Xamarin mobile app project. Nobody likes to be nitpicked in their PR reviews, especially on little things like “6 unnecessary line breaks”, or “incorrect placement of curly braces”, just to make sure everyone adheres to the same coding standards. It’s important to maintain good code quality without having to do all the development yourself. Unless you have it well documented, other developers have to guess based on the other files, so it’s powerful to have an automatic code “linter” which which detects and fixes all the code formatting issues.

Pre-requisites:

1. Install node on your computer, and make sure it’s available in your terminal by running node -v
2. Install dotnet cli and make sure it’s available by running dotnet -v
3. Then, install dotnet format: dotnet tool install -g dotnet-format which helps format C# code in dotnet projects

Procedure

1. You need to add a package.json file in the root folder of your repository, which you can do using by opening the repository in the command linenpm init --yes. This allows you to run npm commands
2. Add a .editorconfig file in your root folder and add put in the code from here and save it. This file performs a lot of functions and for us it contains all the formatting rules you want to enforce.
3. We’ll install Husky to our project which does the magic here, using npx husky-init && npm install. You’ll notice several temp files getting installed, but it will also add items to your package.json file and a new file .husky/pre-commit which is a “pre-commit hook” that gets called when you try to commit something (either by tapping a button in a Git client or through the terminal). If the command isn’t successful, it will stop a commit and show an error
4. Then installlint-staged using this within the project directory npm install lint-staged --save-dev
5. Inside your .husky/pre-commit, replace npm test with npx lint-staged --relative so that relative file paths will be used
6. Then add this to your package.json file (I place mine below scripts): “lint-staged”: {“*.cs”: “dotnet format --include”}. This command is invoked by lint-staged against all files with a .cssuffix in your commit, and this is what the changes will look like in the commit:

Things to Note:

• To test this in action, you can try to add an incorrect extra line break and commit the file and you should see the entire file get auto-corrected inside the commit.
• After your code commit is pushed and your co-workers pull the latest changes, they just need to run an npm install in the root directory and the pre-commit magic should work on their computer as well at the time of any commit.
• The steps above work for projects where the SLN file is in the same directory as the hidden .git folder. You will have to make some changes to make it work for other folder structures.

Video that goes through the different steps needed

Feel free to reach out to me with questions on Twitter or Linkedin, and check out our other articles on Converting country names to flag emojis or Getting started with NFC’s! Or our new & growing iOS fitness app!