myHotTake

Tag: JavaScript formatting

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

  • How to Automate ESLint & Prettier with Git Hooks Easily

    If you find this story twisty and fun, feel free to like and share! 🌟

    I’m standing before a colorful Rubik’s Cube, a puzzle waiting to be solved. Each twist and turn represents a step in my coding journey. I want my code to be as perfect as a completed Rubik’s Cube, with every side flawlessly aligned. That’s where ESLint and Prettier come in, my trusty companions on this quest.

    As I hold the cube, I realize that ESLint is like my guiding hand, ensuring I don’t make those awkward moves that could throw the whole puzzle off balance. It keeps me in line, whispering reminders to keep my syntax clean and errors at bay. ESLint is the patient mentor, always watching, always guiding.

    Next to ESLint is Prettier, the artist in this partnership. Prettier is like my eye for symmetry, making sure each side of the cube looks just right. It smooths out the rough edges, ensuring every color is in its place, every line of code neat and beautiful. With Prettier, my cube — my code — isn’t just functional; it’s a work of art.

    But here’s the magic: I want this duo to work even when I’m not looking. That’s where the pre-commit hook comes in. It’s like setting an automatic solver on the Rubik’s Cube. Before I snap the pieces into place and call it done, the hook leaps into action, running ESLint and Prettier. It checks my every move, ensuring I’ve not missed a beat.

    I configure this behind the scenes using a tool called Husky. Husky links my cube-solving process to a pre-commit hook. Every time I’m about to declare my puzzle complete — or my code ready to commit — Husky steps in. It runs ESLint and Prettier automatically, making sure everything aligns perfectly, just like a finished Rubik’s Cube.

    First, I needed to install the tools that would help keep my code as tidy as my cube. Using Node.js, I installed ESLint and Prettier:

    npm install eslint prettier --save-dev

    Next, I set up ESLint by creating a configuration file. This file was like the blueprint for my cube-solving strategy, detailing how I wanted ESLint to guide me:

    npx eslint --init

    This command walked me through setting up my .eslintrc.json file, where I could define rules to keep my code in check. It’s like deciding the preferred methods for solving the cube’s layers.

    With Prettier, the setup was just as simple. I added a configuration file named .prettierrc to ensure my code was consistently styled:

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

    Then came the part where I needed to ensure these tools ran automatically before each commit. This was the pre-commit hook, my secret weapon for keeping my code cube-perfect. I turned to Husky, a tool designed to help with this precisely:

    npm install husky --save-dev

    Once installed, I initialized Husky:

    npx husky install

    I created a pre-commit hook to run ESLint and Prettier using a simple command:

    npx husky add .husky/pre-commit "npx eslint . && npx prettier --write ."

    This command ensured that every time I prepared to commit my changes, ESLint would check for errors, and Prettier would format my code. It was like having an automatic cube solver ready to make the final adjustments.

    Key Takeaways:

    • ESLint and Prettier: These are essential tools for maintaining clean and consistent code. ESLint acts as the guide, catching errors, while Prettier polishes the code’s aesthetic.
    • Husky and Pre-commit Hooks: Husky automates the running of ESLint and Prettier, ensuring code quality is maintained before each commit, similar to setting an automatic solver for a Rubik’s Cube.
    • Configuration: Setting up configuration files for ESLint and Prettier is like defining the rules for cube-solving, ensuring consistency and adherence to best practices.