How to Seamlessly Integrate ESLint & Prettier in CI/CD?

Hey there! If you enjoy this little tale and find it helpful, feel free to like or share it with your fellow code adventurers.

---

Once upon a time, in the kingdom of Codebase, I was a brave developer tasked with maintaining the peace and harmony of our beloved application. Every day, I faced the relentless horde of bugs and errors that threatened to bring chaos to our realm.

One fateful day, I discovered two powerful allies—ESLint and Prettier. Like a wise sage and a meticulous craftsman, they promised to help me keep my code clean and error-free. But how could I ensure their magic worked every time I deployed my creations to production? The answer lay in the mystical land of CI/CD pipelines.

I began my quest by configuring ESLint to enforce the kingdom’s coding standards. With a few lines of configuration, I enlisted its watchful eye to scan my JavaScript code for any lurking mistakes or inconsistencies. ESLint was like a seasoned detective, always on the lookout for the tiniest of errors that could disrupt the harmony.

Next, I sought the assistance of Prettier, the artisan of formatting. With a simple touch, Prettier transformed my code into a masterpiece, ensuring every line was beautifully aligned and easy to read. It was like watching a skilled artist meticulously crafting a work of art, where every stroke mattered.

With my trusted companions by my side, I ventured into the CI/CD pipeline, a assembly line that automated the process of building, testing, and deploying my code. I integrated ESLint and Prettier into this enchanted pipeline, ensuring that each pull request was scrutinized and polished before it could reach the sacred production environment.

The pipeline became my loyal sentinel, ceaselessly running ESLint to catch any new errors and invoking Prettier to maintain the elegance of my code. It was like having an ever-vigilant guardian, tirelessly working to keep my kingdom free from the chaos of bugs.

---

To begin, I needed to set up ESLint in my project. I opened my terminal and initiated the ESLint configuration wizard:

npx eslint --init

I answered the prompts, selecting my preferred settings, and soon, a .eslintrc.json file appeared in my project. This file was like a spellbook, containing rules that ESLint would follow to keep my code in check.

Here’s a peek at what my .eslintrc.json looked like:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "no-unused-vars": "warn",
    "eqeqeq": "error"
  }
}

With ESLint set up, it was time to introduce Prettier. I installed it into my project:

npm install --save-dev prettier

Then, I created a .prettierrc file to define Prettier’s formatting rules:

{
  "singleQuote": true,
  "trailingComma": "es5"
}

To ensure ESLint and Prettier worked harmoniously, I added the eslint-config-prettier package to disable any ESLint rules that might conflict with Prettier’s formatting:

npm install --save-dev eslint-config-prettier

I updated my .eslintrc.json to include this configuration:

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}

With the setup complete, I wrote a simple JavaScript function to test my newfound tools:

function greet(name) {
  if (name == 'World') {
    console.log('Hello, ' + name + '!');
  }
}

greet('World');

Running ESLint on this code:

npx eslint myfile.js

ESLint pointed out that I should use === instead of ==. I corrected the code:

function greet(name) {
  if (name === 'World') {
    console.log('Hello, ' + name + '!');
  }
}

Next, I let Prettier work its formatting magic:

npx prettier --write myfile.js

The result was a beautifully formatted and error-free piece of code, ready for deployment.

Key Takeaways:

1. Setup and Configuration: ESLint and Prettier can be easily integrated into a JavaScript project with a few configuration steps, ensuring code quality and consistency.
2. CI/CD Integration: By incorporating these tools into a CI/CD pipeline, I can automate code checks before deployment, reducing errors in production.
3. Harmony in Tools: Using eslint-config-prettier helps avoid conflicts between ESLint rules and Prettier’s formatting, ensuring a smooth workflow.
4. Continuous Learning: Whether through stories or code, continuously exploring new tools and practices can greatly enhance the quality of my work as a developer.