Proposal: Integrating Prettier, ESLint, Husky, and Lint-Staged with the Auro Project

[rsstdd]

Proposal: Integrating Prettier, ESLint, Husky, and Lint-Staged with the Auro Project

Hello Team,

This proposal outlines integrating the tools — Prettier, ESLint, Husky, and Lint-Staged — into the Auro project's development workflow to ensure high code quality and consistency standards. Integrating these tools will enforce coding standards and streamline the development process.

Integrating Prettier, ESLint, and Stylelint into pre-commit hooks streamlines the development workflow by automating coding standards enforcement. This automation ensures guideline compliance, prevents minor errors, and promotes maintainable code without manual reviews. Pre-commit hooks also reduce the time and resources spent on code reviews and debugging by catching issues early. This setup fosters a culture of quality and consistency, which is essential in collaborative and complex projects.

Integration Overview

Setup ESLint

• Install ESLint: Add ESLint to ensure our JavaScript and HTML are error-free and consistent.
• Configure ESLint: Tailor ESLint to meet our specific project needs, especially for handling Web Components.

Setup Stylelint

1. Add Stylelint: Install Stylelint and its necessary plugins to the project:

   npm install stylelint stylelint-config-standard --save-dev

1. Configure Stylelint:

• Create Stylelint Configuration: Establish a .stylelintrc.json or stylelint.config.js in the project root to define rules that align with Auro's CSS/SCSS coding practices:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "number-leading-zero": "always",
    "string-quotes": "double"
  }
}

Integrate Prettier

• Install Prettier: Introduce Prettier for automatic code formatting.

npm install --save-dev prettier

• Configure Prettier: Align Prettier's formatting rules with Auro's coding standards. For Example:

.prettierrc.yaml:

 printWidth: 80
 semi: true
 singleQuote: false
 trailingComma: es5
 bracketSpacing: true
 arrowParens: always
 htmlWhitespaceSensitivity: ignore
 ...

.prettierignore:

node_modules
...

Integrate ESLint with Prettier

• Avoid Conflicts: Ensure Prettier and ESLint work together without conflicts.

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

• Update ESLint Configuration: ESLint uses Prettier rules to enforce consistent styling.

echo '{ "extends": ["auro-base", "prettier"] }' > .eslintrc.json

Setup Husky for Pre-commit Hooks

• Install Husky: Manage Git hooks with Husky to automate scripts before commits.

npm install husky --save-dev

• Husky Configuration: Configure pre-commit hooks to run linting and formatting.

"husky": {
  "hooks": {
    "pre-commit": "fmt && lint-staged"
  }
}

Alternatively, you can use the following configuration.

• ./husky/pre-commit:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run fmt && lint-staged

Add Stylelint Script

1. Update Lint-Staged Configuration: Add a script in package.json to run Stylelint across the project easily:

"scripts": {
  "lint:style": "stylelint \"**/*.{css,scss}\"",
  "fmt": "prettier --write . --cache",
}

Configure Lint-Staged

• Install Lint-Staged: Lint only the staged Git files to improve commit times and code quality.

npm install --save-dev lint-staged

• Configure Lint-Staged: Configure lint-staged in package.json to run ESLint, Prettier, and Lint-Staged on staged files:

"lint-staged": {
  "*.{js,jsx,ts,tsx,html,css,scss}": [
     "eslint --fix",
     "stylelint --fix",
     "prettier --write",
     "git add"
  ]
}

Testing and Validation

• Ensure Configurations Work: We'll test the setup by making changes to files and attempting commits, ensuring tools correct errors and enforce styles.

Documentation

• Update Project Documentation: Document the setup process, including commands and configurations, in the project README or contributing guidelines.

Integration Considerations

• Continuous Integration: Align CI checks with local setups to catch issues early.

Benefits

This integration aims to:

• Reduce the time spent on code reviews by focusing on style issues.
• Ensure consistency in code quality, even with multiple contributors.
• Automate the detection and correction of common coding errors.

Request for Comments

Please review this proposal and provide feedback. I'd love to discuss any concerns or additional ideas you have.

[blackfalcon]

Thanks for this @DukeFerdinand. We do most of this already with the Auro repos, but it's the Integrate ESLint with Prettier that I am most interested in.

Could you create an issue with the WC-Generator with the scope of the work needed to add this to the generator? That would be awesome!

Thanks!