Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Draft] Palak Add support for Prettier Config #604

Closed
wants to merge 2 commits into from

Conversation

palakgosalia
Copy link

@palakgosalia palakgosalia commented Nov 11, 2023

Description

This pull request aims to improve code formatting consistency across the team by aligning ESLint and Prettier configurations. In addition to the rule adjustments, I've included specific rules to handle unnecessary list warnings or errors, promoting cleaner and more maintainable code.

Benefits of Using .prettierrc and Format-on-Save:

  • Consistency: Establishing a common code style across the team ensures consistency in the codebase, making it easier to read and maintain.
  • Reduced Code Review Friction: With automatic formatting on save, the need for manual formatting changes in code reviews is minimized, reducing friction and speeding up the review process.
  • Improved Developer Experience: Developers can focus on writing code without worrying about manual formatting, resulting in a more enjoyable and efficient development experience.

Motivation

In numerous pull requests, I observed formatting inconsistencies leading to challenges and unnecessary changes in files solely due to formatting differences. This PR addresses these issues, streamlining the development process and enhancing code readability by establishing a standardized code format.

Related PRS (if any):

N/A

Main changes explained:

Created .prettierrc file

  • Formatting Consistency:

    • Enabled semicolons at the end of statements (semi: true) to ensure a consistent style throughout the codebase.
    • Utilized single quotes for string literals (singleQuote: true) to maintain a unified and clean look for strings.
    • Removed trailing commas (trailingComma: "none") to adhere to a no-trailing-comma style.
    • Set the maximum print width to 100 characters (printWidth: 100) for better readability and adherence to code review standards.
    • Established a consistent indentation size of 2 spaces (tabWidth: 2) for a clean and readable code layout.
    • Enforced consistent spacing within curly braces (bracketSpacing: true) to improve code readability.
    • Required parentheses around arrow function parameters (arrowParens: "always") to enhance code consistency.
  • ESLint Configuration:

    • Disabled the object-curly-newline rule ("object-curly-newline": 0) to allow more flexibility in object destructuring formatting.
    • Turned off the arrow-parens rule ("arrow-parens": "off") to allow more flexibility in arrow function parameter parentheses.
    • Adjusted the no-console rule ("no-console": ["error", { "allow": ["warn", "error"] }]) to allow the use of console.warn and console.error in addition to console.log.
    • Disabled the comma-dangle rule ("comma-dangle": "off") to allow trailing commas in object literals and array literals.
    • Turned off the no-else-return rule ("no-else-return": "off") to eliminate warnings related to unnecessary else statements.
    • Disabled the consistent-return rule ("consistent-return": "off") to allow more flexibility in return statement consistency.

Added prettier and eslint related packages to dev dependencies in package.json

How to test:

  1. check into current branch

  2. do npm install and ... to run this PR locally

  3. Configure Prettier Extension:

    • Install the Prettier extension for your code editor if not already installed.
  4. Configure VS Code Settings:

    • Open Visual Studio Code settings (Ctrl + , or Cmd + ,).
    • Search for "Formatter" and select Prettier - Code Formatter as the default formatter.
  5. Enable Format On Save:

    • Still in VS Code settings, enable the Format On Save option for automatic formatting.
  6. Test Formatting:

    • Open any .js file from your project.
    • Make intentional formatting changes, such as adjusting indentation or adding/removing spaces.
    • Save the file (Ctrl + S or Cmd + S).
    • Verify that Prettier formatting is automatically applied, and the file conforms to the defined styling rules.
  7. Repeat Testing:

    • Test the automatic formatting process in various JavaScript files to ensure consistency across the codebase.

These steps ensure that the Prettier configuration is applied consistently through the "Format On Save" feature, enhancing the overall code formatting experience for all team members.

Next Steps

This is my first PR. I am looking forward to getting some more suggestions and feedback.
Once this PR is approved, Consider creating a separate pull request dedicated solely to formatting fixes. This makes it easier to track changes and allows team members to review and discuss formatting adjustments specifically. The formatting PR will resolve any lingering formatting issues across the codebase, contributing to a polished and standardized look.

Screenshots or videos of changes:

I have tested the changes to two files. src/controllers/dashBoardController.js and src/controllers/actionItemController.js.

Note:

This is still a draft PR. Please reach out to me if any doubts. There are a lot of things that can still be added to the configurations.

@palakgosalia palakgosalia added the Do Not Review Do not review or look at code without full context label Nov 11, 2023
@palakgosalia palakgosalia self-assigned this Nov 11, 2023
@palakgosalia palakgosalia marked this pull request as draft November 11, 2023 09:46
@palakgosalia palakgosalia removed the Do Not Review Do not review or look at code without full context label Nov 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants