myHotTake

Tag: Prettier setup

  • 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.

  • How Does Prettier Transform Your JavaScript Code?

    If you find this story intriguing or helpful, feel free to like or share it!

    I’ve decided to type out my novel on an old, clunky typewriter. The keys clack loudly with each letter, echoing the rhythm of my thoughts. My fingers dance across the keys, but sometimes, in my creative frenzy, my spacing goes awry, and the alignment of my paragraphs looks like a jumbled mess. That’s when I imagine Prettier stepping in, like a assistant sitting beside me, helping to ensure my story flows smoothly and looks immaculate on the page.

    To bring Prettier into my world, I first need to install it, much like acquiring a new ribbon for my typewriter. I open my trusty command line interface—the modern equivalent of loading paper into the typewriter—and type in npm install --save-dev prettier. With a satisfying click, Prettier is now part of my project, ready to work its magic.

    Next, I must configure it, akin to adjusting the margins and setting the tabs on my typewriter. I create a file named .prettierrc, where I can specify how I want my text to appear—do I prefer two spaces or four for indentation? Should there be semicolons at the end of each line? These are the settings Prettier will follow, ensuring my novel is formatted just the way I envision.

    Now, as I type away, Prettier becomes my vigilant companion. I might still make mistakes—perhaps a line runs too long or my paragraphs lack consistency. But with a simple command, npx prettier --write ., Prettier sweeps through my manuscript, aligning everything perfectly, much like a skilled editor reviewing my work. My story is now polished, free from the distractions of irregular formatting.

    In my JavaScript project, I start by ensuring Prettier is part of the team. I open my terminal and type:

    npm install --save-dev prettier

    This command is like pulling Prettier into the coding world, ready to guide my JavaScript just as it did my novel. Next, I create a configuration file called .prettierrc, where I dictate the rules of my code’s presentation. For example:

    {
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2
}

    This setup tells Prettier not to use semicolons, to prefer single quotes, and to use two spaces for indentation—simple preferences that ensure my code looks exactly how I want.

    As I delve into coding, my JavaScript becomes a tapestry of functions and logic, but it can quickly become chaotic without some formatting love. Here’s a snippet of my code before Prettier’s touch:

    function greet(name){console.log("Hello, " + name + "!")}
greet("World")

    To bring clarity and consistency, I run:

    npx prettier --write .

    Prettier sweeps through my code like a skilled editor, transforming it into:

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

    The code is now organized and readable, much like the neatly typed pages of my story.

    Key Takeaways:

    1. Installation: Just like adding a new ribbon to a typewriter, installing Prettier in your JavaScript project is as simple as running npm install --save-dev prettier.
    2. Configuration: Create a .prettierrc file to set your formatting rules, ensuring your code aligns with your preferred style.
    3. Execution: Use npx prettier --write . to format your entire codebase, turning chaos into clarity.