ESLint, Husky, and Prettier are linting and formatting tools to maintain code quality and consistency. This article explains how to configure these tools and is organized into following sub-topics:
Setting Up ESLint
ESLint is a tool for identifying and fixing JavaScript code issues, ensuring code quality. This configuration mandates that all JavaScript and TypeScript files (.js, .jsx, .ts, .tsx) within the src directory are subjected to linting using ESLint. This process aids in identifying and rectifying code issues in accordance with the established ESLint rules.
Follow the steps to configure ESLint for the project:
-
- For a better development experience, add ESLint extensions to your code editor (e.g., VS Code).
-
Open .eslintrc.json file in vscode and scroll to the rules section and add your eslint rules.
"no-console": ["error", // Warn if console.* methods are used{"allow": ["warn", "error", "info"]}],
-
To change a rule’s severity, set the rule ID equal to one of these values:
- "off" or 0 - turn the rule off
- "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
-
"error" or 2 - turn the rule on as an error (exit code is 1 when triggered)
For more details, please refer to ESlint documentation here.
- To set up a new alias for the newly created folder
- Add new alias of path in .eslintrc.json in root.
"import/resolver": {"alias": {"map": [["@", "./src"],["@api", "./src/api"],["@assets", "./src/assets"],["@components", "./src/components"],["@configuration", "./src/configuration"],["@constants", "./src/constants"],["@context", "./src/context"],["@css", "./src/css"],["@hooks", "./src/hooks"],["@pages", "./src/pages"],["@routes", "./src/routes"],["@store", "./src/store"],["@utils", "./src/utils"],["@validations", "./src/validations"]],"extensions": [".js", ".jsx", ".json"]}}
- Add new alias of path in .eslintrc.json in root.
- For a better development experience, add ESLint extensions to your code editor (e.g., VS Code).
-
-
- Open jsconfig.json and add alias in paths section.
"paths": {"@/*": ["./src/*"],"@api/*": ["./src/api/*"],"@assets/*": ["./src/assets/*"],"@components/*": ["./src/components/*"],"@configuration/*": ["./src/configuration/*"],"@constants/*": ["./src/constants/*"],"@context/*": ["./src/context/*"],"@css/*": ["./src/css/*"],"@hooks/*": ["./src/hooks/*"],"@pages/*": ["./src/pages/*"],"@routes/*": ["./src/routes/*"],"@store/*": ["./src/store/*"],"@utils/*": ["./src/utils/*"],"@validations/*": ["./src/validations/*"]}
- Open jsconfig.json and add alias in paths section.
-
-
-
- Open vite.config.js and add alias here as well.
resolve: {alias: {"@": path.resolve(__dirname, "./src"),"@api": path.resolve(__dirname, "./src/api/"),"@assets": path.resolve(__dirname, "./src/assets/"),"@components": path.resolve(__dirname, "./src/components/"),"@configuration": path.resolve(__dirname, "./src/configuration/"),"@constants": path.resolve(__dirname, "./src/constants/"),"@context": path.resolve(__dirname, "./src/context/"),"@css": path.resolve(__dirname, "./src/css/"),"@hooks": path.resolve(__dirname, "./src/hooks/"),"@pages": path.resolve(__dirname, "./src/pages/"),"@routes": path.resolve(__dirname, "./src/routes/"),"@store": path.resolve(__dirname, "./src/store/"),"@utils": path.resolve(__dirname, "./src/utils/"),"@validations": path.resolve(__dirname, "./src/validations/")}},
- Open vite.config.js and add alias here as well.
-
Configuring Prettier
Prettier is an opinionated code formatter that enforces consistent style. This configuration ensures that all JavaScript, TypeScript, JSON, CSS, SCSS, and Markdown files (.js, .jsx, .ts, .tsx, .json, .css, .scss, .md) are formatted using Prettier. The --write flag guarantees that the files are automatically formatted based on the Prettier configuration specified in .prettierrc.json.
Follow the below Instruction to configure Prettier for code formatting.
- Open .prettierrc.json file in vscode and edit configuration according to need.
{"trailingComma": "none","semi": true,"tabWidth": 2,"singleQuote": false,"bracketSpacing": true,"jsxBracketSameLine": true,"printWidth": 100}
For more details, please refer to prettier documentation here.
Configuring Husky
Husky allows running scripts during Git lifecycle events, like pre-commit hooks. Below is the guide to set Husky for pre-commit hooks:
Commit Message
To streamline the process of committing new code to the branch and ensure that proper code with appropriate commit messages is pushed, we have implemented Husky.
The rules for commit messages are defined in the commitlint.config.cjs file. The only acceptable format for commits is: issueID (commit type): message. For example, EB-1212 (fix): message.
- The issueID format can be modified according to your requirements by editing the headerPattern property.
- The commit type can be one of the following: ["build", "chore", "docs", "feat", "fix", "refactor", "revert", "style", "test", "merge"].
module.exports = {extends: ["@commitlint/config-conventional"],parserPreset: {parserOpts: {headerPattern: /^(AW|EB)-[0-9]+ \((\w+)(?:\/(\w+))?\): (.*)$/,headerCorrespondence: ["reference", "type", "scope", "subject"]}},rules: {"type-enum": [2,"always",["build", "chore", "docs", "feat", "fix", "refactor", "revert", "style", "test", "merge"]],"type-case": [2, "always", ["lower-case"]],"subject-max-length": [2, "always", 400],"subject-empty": [2, "never"],"subject-case": [0]}};
Pre-Commit
To ensure code quality and consistency, we have configured lint-staged to execute specific linters and formatters on staged files prior to committing. Below is the formal configuration for .lintstagedrc
Comments
Please sign in to leave a comment.