Hello!! 👋

As I continue to improve the Barrierless project, I recognized the need to enhance code quality and ensure consistency across all contributions. Adding a source code formatter and linter would enforce a uniform style and prevent common errors, streamlining the development process and making it more efficient for all contributors. Here’s a breakdown of my process and the decisions I made to add Prettier and ESLint to the project.

(Check out the commit for this update here).

Create a CONTRIBUTING.md File

To make the development process more accessible for contributors, I generated a CONTRIBUTING.md file using CONTRIBUTING.md Generator. This document provides guidance for contributors on setting up the development environment, coding standards, and submitting changes. By having clear contribution guidelines, I hope to create a more organized and structured experience for future contributors.

Choose a Source Code Formatter – Prettier

Since Barrierless is primarily built in JavaScript, I decided to use Prettier as the project’s source code formatter. Prettier is a popular choice in the JavaScript community, known for enforcing a consistent code style automatically. With Prettier, formatting rules are predefined and eliminate the need for contributors to focus on stylistic details, allowing them to focus on the code logic itself.

To add Prettier, I installed it as a dev dependency and configured a .prettierrc file in the project. This file allows us to customize formatting rules and keep them consistent across the project. I also added a .prettierignore to avoid formatting unnecessary files. Then, I created a format script in package.json to make it easy for contributors to run Prettier with a single command.

Choose a Linter – ESLint

To catch common coding issues and enforce best practices, I chose ESLint as the linter for the Barrierless project. ESLint is highly configurable, and it integrates well with JavaScript projects, identifying potential errors, bad practices, and non-standard code.

After installing ESLint as a dev dependency, I created a lint script in package.json so that contributors can easily run ESLint from the command line.

Fix Errors and Inconsistencies

With these scripts in place, contributors can now use npm run format to format their code and npm run lint to check for any linting issues before submitting a pull request.

After running Prettier and ESLint on the project for the first time, I was surprised by the number of inconsistencies and potential issues they flagged. Many of these were minor syntax and formatting issues, but there were also errors that could have easily gone unnoticed without these tools. Addressing these issues not only improved the code’s readability but also helped to catch small mistakes that could have caused bugs.

Integrate Formatting and Linting with Editor Configuration

To make it easier for contributors to integrate Prettier and ESLint with their editor, I added configuration files under the .vscode folder. These configurations ensure that code is formatted and linted automatically in editors like VS Code, making the development experience seamless and consistent.

Here’s an example of the .vscode/settings.json file configuration:

{
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "files.eol": "\n",
  "files.insertFinalNewline": true
}

With these settings, VS Code will automatically format and lint code upon saving, minimizing the manual steps required by contributors.

Document Instructions in CONTRIBUTING.md

Finally, I documented all the setup and usage instructions for Prettier and ESLint in the CONTRIBUTING.md file. This documentation explains how to run the scripts, and configure the editor to integrate with these tools. By including these details in CONTRIBUTING.md, I hope to make it straightforward for contributors to follow the same standards without hassle.

Summary

Adding Prettier and ESLint to the Barrierless project was a valuable step in improving code quality and consistency. These tools not only help maintain a uniform code style but also prevent potential issues, creating a smoother development experience for both current and future contributors. I’m excited to see the impact this has on our collaborative efforts, and I encourage anyone interested to check out the project and contribute!